Design System · v2

DIORAO · DESIGN SYSTEM CHEATSHEET · v1

See history, clearly.

Single-page reference for the DIORAO Shopify build. All tokens, components, and rules. Use it as the source of truth — the theme already loads diorao-tokens.css and diorao-components.css so every class below is live.

Colors — Core neutrals

--diorao-ink-900#0B0B0D
--diorao-ink-800#141418
--diorao-ink-700#1F1F24
--diorao-ink-500#5A5A63
--diorao-ink-300#9A9AA3
--diorao-ink-100#E6E6EA
--diorao-marble#F2EDE3
--diorao-white#FFFFFF

Colors — Oxidized bronze (brand)

--diorao-bronze-600primary hover
--diorao-bronze-500PRIMARY CTA
--diorao-bronze-400accent / glow
--diorao-bronze-200highlight / badge bg

Colors — Greek accents

--diorao-aegeannarrative / about
--diorao-amphorasale / alert
--diorao-olivein-stock / success
--diorao-goldpremium badge (<1%)
--diorao-sandneutral chip
Surfaces rule: Two primary canvases per page, never more. Marble (#F2EDE3) is default page bg. Ink (#0B0B0D / #141418) for hero, featured, footer. Product photography lives full-bleed on ink-800 — never studio white.

Semantic aliases

Alias Value Use
--fg-1 ink-900 primary text
--fg-2 ink-500 meta / description
--fg-3 ink-300 muted / disabled
--fg-on-dark marble text on ink
--bg-page marble page background
--bg-dark ink-900 hero / footer
--bg-card-dark ink-800 product image box
--accent bronze-500 primary CTA
--accent-hover bronze-600 CTA hover
--state-sale amphora sale badges
--state-success olive in-stock dot, success
--state-premium gold Ω premium badge only
--state-narrative aegean About / newsletter / era chip
--border-subtle ink-100 card edge on marble
--border-strong ink-900 secondary button outline, focus

Typography

Families

Token Family Use
--font-display Inter Black 900 H1/hero, display-xl/l/m (-2 to -4% tracking)
--font-body Inter 400–700 body, H3, buttons (700 UPPERCASE)
--font-mono JetBrains Mono 400–500 every uppercase label, SKU, spec, eyebrow (+8–12% LS)
Display XL — 96/1.0/-.04
Display L — 64/1.05/-.03
Display M — 48/1.1/-.025
H1 — 36/1.15/-.01
H2 — 28/1.2/-.005
H3 — 22/1.3 Inter 600
Body L — 18/1.55 for intro paragraphs and hero supporting copy.
Body — 16/1.6 for default paragraphs, specs, descriptions.
Body S — 14/1.5 for meta text, captions, fine print.
LABEL — 12 / MONO / +0.08em / UPPERCASE
LABEL S — 11 / +0.12em
LABEL XS — 10 / +0.12em

Spacing — 4px grid

4 · sp-1
8 · sp-2
12 · sp-3
16 · sp-4
24 · sp-6
32 · sp-8
48 · sp-12
64 · sp-16
96 · sp-24
128 · sp-32

Hero sections carry 96–128 vertical padding. Cards use 14–32 internal.

Radii

0 · r-0
2 · r-1
4 · r-2
8 · r-3

0 on surfaces/image boxes. 2 on chips/badges. 4 on buttons/inputs. 8 on modals only. Never round cards or product photos.

Buttons

&lbrace;% render 'diorao-button', label: 'Add to cart', variant: 'primary', size: 'lg' %&rbrace;
&lbrace;% render 'diorao-button', label: 'View collection', variant: 'secondary', href: collection.url %&rbrace;
&lbrace;% render 'diorao-button', label: 'Subscribe', variant: 'on-dark' %&rbrace;

Badges

NEW SALE −20% LIMITED 250 PREMIUM Ω PREORDER ● IN STOCK

Inputs

Announcement bar

FREE SHIPPING OVER €70 · SHIPS FROM POLAND IN 24H · +48 500 123 456

Product card anatomy

NEW GREECE
32 MM · 1 FIG · GREECE

Spartan hoplite

€39,00 €49,00
→

Structure — Image box 1:1 on ink-800, radial bronze-glow 15%, badge top-left, era mono top-right. Meta area on marble: mono spec line, Inter 600 title (-0.02em), foot = price + →. No shadow, no border, no radius on image.

&lbrace;% render 'diorao-product-card', product: product %&rbrace;

/* Metafields (diorao.*):
   era         → "GREECE"
   scale       → "32 MM · 1 FIG"
   badge       → "NEW" | "SALE −20%" | "LIMITED 250" | "PREMIUM Ω" | "PREORDER"
   badge_kind  → new | sale | limited | premium | preorder  */

Motion

Token Duration Use
--dur-fast 120ms hover darken, color swap
--dur-med 220ms card lift (translateY -2)
--dur-slow 360ms drawer slide
--ease-standard cubic-bezier(.2,.6,.2,1) all transitions — start fast, settle soft

No bounces, no spring overshoot, no scale on press. Buttons hold their size. Page transitions fade only.

Hard rules

  • No emoji. Ever. The brand is a museum, not a Discord.
  • No gradients beyond the single hero radial glow (rgba(176,114,54,0.2)).
  • No rounded corners on cards, product photos, hero.
  • No shadows beyond the sparse card drop + modal lift. No inner shadows, no neumorphism, no glow.
  • No studio-white product photography. Always ink-800 backdrop.
  • Greek motif lives on brand surfaces (hero, packaging, About, newsletter, footer). Never on product cards.
  • Mono labels always UPPERCASE with +8–12% letter-spacing.
  • Casing: sentence case for headlines, UPPERCASE mono for eyebrows / SKUs / specs.
  • Units: metric with a space (32 mm). Dates BCE/CE in EN, p.n.e./n.e. in PL.

Liquid snippets — copy-paste

{% comment %} Button {% endcomment %}
&lbrace;% render 'diorao-button', label: 'Add to cart', variant: 'primary', size: 'lg', type: 'submit' %&rbrace;

{% comment %} Product card (in any grid) {% endcomment %}
&lbrace;% render 'diorao-product-card', product: product %&rbrace;

{% comment %} Announcement bar (layout/theme.liquid, after <body>) {% endcomment %}
&lbrace;% render 'diorao-announcement-bar' %&rbrace;

Wiring (already applied to theme v0.2)

<!-- layout/theme.liquid, just before </head> -->
&lbrace;&lbrace; 'diorao-tokens.css'     | asset_url | stylesheet_tag &rbrace;&rbrace;
&lbrace;&lbrace; 'diorao-components.css' | asset_url | stylesheet_tag &rbrace;&rbrace;

File index

Path Role
assets/diorao-tokens.css all CSS vars: colors, type, spacing, radii, motion
assets/diorao-components.css .diorao-btn · .diorao-badge · .diorao-card · .diorao-input · .diorao-announce · .diorao-eyebrow · .diorao-grid · .diorao-h1/h2 · .diorao-display
snippets/diorao-button.liquid {% render 'diorao-button' %}
snippets/diorao-product-card.liquid {% render 'diorao-product-card', product: product %}
snippets/diorao-announcement-bar.liquid {% render 'diorao-announcement-bar' %}

DIORAO · DESIGN SYSTEM · v1 · ESTD · MMXXVI · POLONIA