Interní stránka — není v navigaci
DESIGN SYSTEM
Reference design tokens, typography a komponent. Tokens se mění v src/styles/global.css (@theme block) — nikde jinde nedefinuj barvy přímo.
01. BARVY
Sémantické tokens — používej třídy bg-primary, text-accent, atd.
Brand
primary
#011327
Navy — tmavá pozadí
bg-primary, text-primary
secondary
#262626
Charcoal — alternativní tmavá
bg-secondary
accent
#ffee00
Žlutá — CTA, badges
bg-accent, text-accent
accent-hover
#ccb800
Žlutá hover
hover:bg-accent-hover
accent-subtle
#fff7a0
Světle žlutá — dekor. velké číslovky na tmavém
text-accent-subtle
Surfaces
card
#ffffff
Bílé karty, primární světlé pozadí
bg-card
light-gray
#f0f0f0
Sekundární světlé pozadí
bg-light-gray
dark-secondary
#383838
Tmavá karta
bg-dark-secondary
Text
text
#262626
Hlavní text na světlém (15.13:1 ✓)
text-text
text-muted
#666666
Sekundární text (5.74:1 ✓)
text-text-muted
text-on-dark
#ffffff
Text na primary (18.69:1 ✓)
text-text-on-dark
text-on-dark-muted
#b8c1cf
Tlumený na primary (7.4:1 ✓)
text-text-on-dark-muted
text-on-dark-subtle
#808998
Hraniční jen pro velký text (5.29:1)
text-text-on-dark-subtle
text-on-accent
#011327
Navy na žluté (15.56:1 ✓)
text-text-on-accent
Borders
border
#d9d9d9
Decorative divider (1.41:1 — non-essential only)
border-border
border-strong
#999999
Silný border na světlém
border-border-strong
border-on-dark
#2a3a52
Border na primary
border-border-on-dark
02. KONTRASTNÍ PÁRY
WCAG AA požaduje 4.5:1 pro normální text, 3:1 pro velký text (18pt+ nebo 14pt bold).
Velký text Aa
Normální text — Lorem ipsum dolor sit amet.
white on primary
Ratio 18.69:1 — ✓
Hlavní text na navy
Velký text Aa
Normální text — Lorem ipsum dolor sit amet.
primary on accent
Ratio 15.56:1 — ✓
CTA tlačítka
Velký text Aa
Normální text — Lorem ipsum dolor sit amet.
text on card
Ratio 15.13:1 — ✓
Body text
Velký text Aa
Normální text — Lorem ipsum dolor sit amet.
primary on card
Ratio 18.69:1 — ✓
Nadpisy na bílém
Velký text Aa
Normální text — Lorem ipsum dolor sit amet.
text-muted on card
Ratio 5.74:1 — ✓
Tlumený text
Velký text Aa
Normální text — Lorem ipsum dolor sit amet.
text-muted on light-gray
Ratio 5.04:1 — ✓
Tlumený na šedém
Velký text Aa
Normální text — Lorem ipsum dolor sit amet.
text-on-dark-muted on primary
Ratio 7.4:1 — ✓
Sekundární text na navy
Velký text Aa
Normální text — Lorem ipsum dolor sit amet.
accent on primary
Ratio 15.56:1 — ✓
Highlight slova na navy
Velký text Aa
Normální text — Lorem ipsum dolor sit amet.
text-on-dark-subtle on primary
Ratio 5.29:1 — ✓ (large)
Hero subtitle (18pt+)
03. TYPOGRAPHY
Headings: Bebas Neue 400. Body: Poppins 300/400/500/600/700.
Heading 1 · font-heading text-5xl md:text-6xl tracking-wider
Heading 2 · font-heading text-3xl md:text-4xl tracking-wider
Heading 3 · font-heading text-xl md:text-2xl tracking-wider
Body Large · font-sans text-lg leading-relaxed
Body · font-sans text-base leading-relaxed
Body Small · font-sans text-sm
Caption · font-sans text-xs uppercase tracking-widest
Body Semibold · font-sans text-base font-semibold
04. TLAČÍTKA
Tři varianty: primary (žluté CTA), secondary (outline na navy), ghost.
05. BADGES
RC třídy, certifikace, BESTSELLER.
Na světlém pozadí
Na tmavém pozadí
06. KARTY
KARTA SE ZNAKEM
Light-gray pozadí, accent top border, decorative big number jako vodoznak.
KARTA S IKONOU
Bílá karta, navy border, ikona v navy badge.
07. FORM INPUTS
08. IKONY
Inline SVG přes Icon.astro wrapper. Stroke width 1.5.