Tvary & pohyb
Měkce zaoblené tvary (default karta lg/16) a klidný, prémiový pohyb. 8 stupňů radii, 4 durations, 3 easingy — vše token, žádné magic px.
Radii
Default karta = lg (16). CTA / badge = pill. Neměň rounded-* na tlačítkách a inputech — používej varianty.
xs
4px
Drobné chipy, tagy
sm
8px
Inputy, malé prvky
md
12px
Image well, menší karty
lg
16px
Default karta
xl
20px
Větší panely
2xl
24px
Hero karty, sekce
3xl
32px
Velké plochy, hub
pill
9999px
CTA, badge, chip
rounded-lg · --r-lg
Durations
Čtyři tempa. Drž je — žádné duration-200/300 magic čísla, vždy token.
fast
120ms
Hover barvy, drobné stavy
base
200ms
Default přechody
slow
360ms
Karty, větší pohyby
sheet
480ms
Drawer / bottom sheet
Easings
Tři křivky. spring-soft = prémiový default; spring jen na čísla; smooth na běžné přechody.
smooth
cubic-bezier(0.32, 0.72, 0.24, 1)Obecné přechody
spring
cubic-bezier(0.34, 1.56, 0.64, 1)Hravý overshoot (čísla)
spring-soft
cubic-bezier(0.22, 1, 0.36, 1)Prémiový měkký dojezd
duration-base · ease-spring-soft
Mikro-interakce
Hover / press / focus patterny napříč UI — vždy přes transform + opacity, bez layout reflow. Najeď / klikni / tabni.
hover:scale-[1.02]active:scale-[0.97]focus-visible:ring-4 ring-brand/30.card-liftgroup-hover:translate-x-0.5.glow-brand.lift-hover.pulse-soft.num-rollVše honoruje prefers-reduced-motion a běží na GPU (transform + opacity).
Motion principy
- Tempo: prémiový klid — default
base+spring-soft. Snappy jen pro produktové mikro-interakce. - Účel: pohyb potvrzuje akci nebo vede pozornost, nikdy nezdržuje.
- Čísla: živě se měnící čísla vkloužnou (
num-roll), neposkakují. - Přístupnost: vždy respektuj
prefers-reduced-motion.