01
Foundations
Tokeny, na kterých všechno stojí. Žádné ad-hoc styly v komponentech.
Brand paleta
Surové barevné tokeny
Surové barevné tokeny
Turquoise
--turquoise · #0097B2
Turquoise soft
--turquoise-soft · #38C0D8
Coral
--coral · #E1767D
Coral soft
--coral-soft · #F1B7BB
Navy
--navy · #003D4C
Navy soft
--navy-soft · #146074
Cream
--cream · #FFF8E7
Lavender
--lavender · #C5B4E3
Mint
--mint · #B7E5D6
Mist
--mist · #F4F7F8
Použití: Používejte přes semantické tokeny, ne přímo.
Semantické tokeny
Vždy preferujte tyto
Vždy preferujte tyto
bg.canvas
Hlavní pozadí obrazovek
bg.subtle
Sekundární plocha, oddíly
bg.emotive
Citlivé/teplé plochy (cream)
surface.hero
Hero plochy a CTA
accent.heart
Emocionální CTA
success.mint
Pozitivní stav, ověření
overlay.blur
Pro postupné odhalení
Použití: Komponenty by měly sahat výhradně po semantických tokenech.
Gradienty
Pro hero, CTA a citové momenty
Pro hero, CTA a citové momenty
Screen color variants
Tonality celých obrazovek dle kontextu
Tonality celých obrazovek dle kontextu
Krémová
Onboarding, vítací plochy, soft moments
Mentolová
Úspěch, ověření, klidná potvrzení
Fialová
AI insights, personalita, hloubka
Tyrkysový top bar
Hero hlavička, brand momenty
Růžové CTA
Emoční CTA — like, match, boost
Tmavé CTA
Premium, paywall, závazné akce
Použití: Použijte přes <PageContainer tone='…' />.
Typografie
League Spartan · Montserrat · Comfortaa
League Spartan · Montserrat · Comfortaa
Pomalu, ale doopravdy.
Display
text-4xl font-display font-bold
Najděte hlas, ne jen tvář.
H1
text-3xl font-display font-bold
Nová shoda na základě hodnot
H2
text-2xl font-display font-semibold
Jak funguje rezonance
H3
text-xl font-display font-semibold
Vaše konverzace
Title
text-base font-display font-semibold
Sdílejte svým tempem. Vždy máte kontrolu nad tím, co o vás druzí vidí.
Body
text-sm
Tato akce vyžaduje potvrzení.
Body small
text-xs
Aktualizováno před chvílí
Caption
text-[11px] text-muted-foreground
Štítek sekce
Label
text-[11px] uppercase tracking-wider font-medium
92%
Metric
font-accent text-3xl font-bold
Spacing & Radius
4-bod ová stupnice + měkké rohy
4-bod ová stupnice + měkké rohy
Radius (rounded-*)
Spacing (4 / 8 / 12 / 16 / 24 / 32 / 48)
Elevation
Šeptem, ne výkřikem
Šeptem, ne výkřikem
Motion principy
Klid > efekt
Klid > efekt
- · soft-rise 0.5s · vstupy obsahu
- · heart-pulse 2.4s · jen pro nové shody, max 1× na obrazovce
- · shimmer · skeletony
- · Žádné agresivní pružiny, žádné konfety, žádný gambling feedback.
Iconography
Lucide-style, 1.75 stroke, 18–24 px
Lucide-style, 1.75 stroke, 18–24 px