ONLINE REFERENCE · v0.2
DIORAO Design System
Źródłem prawdy jest plik Figma DIORAO (3 strony: Cover & Brand / System / Screens).
Ta strona to ściąga online — co zostało zaprojektowane, co stoi live na diorao.com, i gdzie są rozjazdy.
Uwaga: Figma DS zawiera polskie copy + ceny w PLN (legacy ze sprintu — skończył się limit API do tłumaczenia). Kierunek produkcyjny = EN + EUR. Patrz Figma vs Live.
01 · COVER
Cover — Brand mark.
Wordmark Ultra-heavy Inter 900 na ink-900. Ω sygnet nad wordmarkiem. Slogan “See history, clearly.” w bronze-500. Etymologia (διορῶ · TO SEE CLEARLY) w mono caps. Meander w dolnym centrum jako brand pattern.
01 · BRAND · LOGO CONCEPTS
Three Greek directions.
A · PRIMARY
Omicron + Ω
Ultra-heavy wordmark. ‘O’s jako perfekcyjne greckie omikron. Sygnet: Ω w kółku. Production system.
B · PATTERN
Meander
Greek key jako brand pattern. Skaluje się na packaging, paper tape, newsletter divider. Secondary asset.
C · REJECTED
Pediment
Wordmark pod frontonem świątyni + dwie kolumny. Museum-grade. Risk: tourist cliché. Nie użyte.
02 · SYSTEM
Tokens & components.
Od góry: tokeny koloru (ink-900 → marble · bronze-600/500/400/200 · aegean/amphora/olive/gold/sand) · typografia (Inter Black 96/40/28/20/16 + JetBrains Mono spec labels) · buttony (primary bronze / secondary ghost / dark / ATC / sold / NEW / LIMITED chips) · formularze (email/input/textarea) · product cards (badges, scale chip, tytuł, price).
02 · SYSTEM · TOKENS (CSS VARS)
CSS custom properties
Żywe tokeny w assets/diorao-brand.css. Zgodne 1:1 z paletą z Figmy.
Core neutrals
ink-900
#0B0B0D
ink-800
#141418
ink-700
#1F1F24
ink-500
#5A5A63
ink-300
#9A9AA3
ink-100
#E6E6EA
marble
#F2EDE3
Brand — Oxidized bronze
bronze-600
#8A5A2B
bronze-500
#B07236
bronze-400
#C89053
bronze-200
#E8D4B5
Greek accents (narrative use only)
aegean
#1E3A5F
amphora
#A8553B
olive
#6B7A3F
gold
#C8A24B
sand
#D9C8A8
02 · SYSTEM · ERA ICONS
Nine glyphs, one per wing.
192×192 PNG. Corinthian helmet, great helm, bicorne, pith, Brodie, M1, star, MICH+NVG, gas mask.
ANTIQUITY
era-icon-antiquity.png
MEDIEVAL
era-icon-medieval.png
NAPOLEONIC
era-icon-napoleonic.png
COLONIAL
era-icon-colonial.png
WWI
era-icon-wwi.png
WWII
era-icon-wwii.png
COLD WAR
era-icon-cold-war.png
MODERN
era-icon-modern.png
APOCALYPSE
era-icon-apocalypse.png
02 · SYSTEM · MEANDER PATTERN
The Greek-key signature.
SMALL · unit 8px
MEDIUM · unit 16px (default)
LARGE · unit 24px · on ink
03 · SCREENS · HOME
Homepage · Desktop 1440
- Hero split (60/40): headline "Widzimy historię wyraźnie" / "See history, clearly" + CTA "ZOBACZ KOLEKCJE" + "NOWOŚCI" ghost + Spartan in bronze glow
- Era timeline — 9 stops: Termopile → Thermopylae, Grunwald, Waterloo, Krym, 1 wś, 2 wś, Zimna wojna, Najnowsze, Apokalipsa
- Battle-cards section: ΤΕΡΜΟΠΥΛΑΙ 480 BC · STALINGRAD 1942 · GRUNWALD 1410 — nazwy bitew zamiast er
- "Świeżo z drukarki" (just off the printer) — new products row
- Newsletter na marble z meandrem
- Footer: DIORAO Ω + menu SKLEP / INFORMACJE / STUDIO + copyright strip
03 · SCREENS · COLLECTION
Collection · Starożytność · Grecja
- Split hero 65/35: banner po lewej, ink metadata po prawej (breadcrumbs, era name, date range, lead paragraf)
- Sticky sub-nav z density toggle + sort
- Filter chips inline (skala, faction, condition)
- Grid 3-up, editorial, hover crossfade
- Archive interstitial co 6 produktów (cytat + źródło)
- Related eras footer — 4 sąsiednie wings
03 · SCREENS · PRODUCT
Product · Spartiata hoplita
- Gallery stacked left 60% / buy box sticky right 40%
- Edition label (LIMITED X / NEW / OPEN EDITION) nad tytułem
- Chips: scale (ink solid) + era (clickable) + side (faction)
- Compact spec table (dt/dd) w buy box
- Primary ATC bronze + ghost "Notify when restocked"
- Maker's Note full-width ink z cytatem + paragraf
- Full Specifications accordion
- "Pairs with" / "From the same era" — 3-up related
04 · LIVE THEME · HOMEPAGE
/ — live
04 · LIVE THEME · COLLECTION
/collections/antiquity — live
04 · LIVE THEME · PRODUCT
/products/spartan-hoplite-thermopylae-480-bce — live
04 · LIVE THEME · ABOUT
/pages/about — live
04 · LIVE THEME · JOURNAL
/blogs/journal — live
05 · NOTES · FIGMA vs LIVE
Gdzie Figma rozjeżdża się z live theme.
Figma DS został zrobiony w poprzednim sprintie jako polski prototyp. W produkcji idziemy kierunkiem EN + EUR bo sklep jest międzynarodowy. Poniżej lista świadomych rozjazdów.
| Obszar | Figma (v0.2) | Live theme (production) | Kierunek |
|---|---|---|---|
| Język UI | Polski | Angielski | EN primary, PL/DE/FR/ES locales draft |
| Waluta | PLN (zł) | EUR / USD / PLN via Shopify Payments auto-convert | EUR base display dla EU / PLN base currency |
| Nazwy kart kolekcji | Bitwy (ΤΕΡΜΟΠΥΛΑΙ / STALINGRAD / GRUNWALD) | Ery (Antiquity / WWII / Medieval) | Ery jako main taxonomy, bitwy jako sub-collections lub "featured drops" |
| Menu header | Figurki historyczne / Bustyki i Dodatki / Promocje / Nowości / Kontakt | Eras (dropdown) / Journal / About / Contact | Live wygrywa — Eras jest głównym browse path |
| Typography | Inter Black 96 / 40 / 28 / 20 + JB Mono | Identyczne | ✓ Zgodne |
| Paleta | Ink + bronze + marble + Greek accents (5 schemes) | Identyczna (w diorao-brand.css) | ✓ Zgodne |
| Ikony ery | Brak w Figmie | 9 AI-generated PNG (Corinthian, Brodie, M1...) | Live wygrywa — ikony post-Figma |
| Slogan | "Widzimy historię wyraźnie." | "See history, clearly." | EN canonical; PL translation gdy PL locale zostanie opublikowany |
| Meander | Na cover + newsletter | Na cover, newsletter, footer (reusable snippet) | ✓ Zgodne, rozszerzone |
| Scales format | N/A lub mm | 1:72 / 1:48 / 1:35 / 1:24 / 1:16 | Klasyczne skale modelarskie canonical |
Update policy: Gdy zmieni się coś w Figmie, wyeksportuj PNG-i 1:1 i zastąp pliki
assets/ds-*.png w theme. Ta sekcja renderuje z assetów, więc zmiana jest natychmiastowa po re-deploy.
05 · DOWNLOADS
