DesignAnalytika
⌘K
    • Přehled
  • Tokens

    • Barvy
    • Typografie
    • Tvary & pohyb
    • Motion
    • Ikony
    • Glass
  • Primitivy

    • Logo
    • Button / CTA
    • Badge
    • Price & PriceTag
    • TrustStars
    • Chip / UspTag
    • Avatar
    • Eyebrow & Num
    • Separator
    • Skeleton
    • Toast
    • Cards & Containers
    • Form controls
  • Komponenty

    • ProductCard

Cards & Containers

Surface — základní obal pro karty a panely. Jedna komponenta pro oba registry: světlý (card / soft / sage / mint / blush) a tmavý akcent (dark / gradient / glass). Hairline ring, elevace, radius, padding.

8
Povrchy
card → glass
2
Registry
světlý · tmavý
3
Elevace
flat · ring · raised
5
Radius
12 → 32px

Povrchy — dva registry

Světlý registr (default) pro obsah a produktové karty; tmavý akcent pro hero / feature / footer. Glass jen nad gradientem nebo fotem.

Světlý registr

card
soft
sage
mint
blush

Tmavý akcent

dark
gradient
glass

Elevace

flat → ring (default) → raised. Hairline ring (ne border-*), brand-tintovaný stín.

flat
flat
ring
ring
raised
raised

Radius

md 12 · lg 16 · xl 20 · 2xl 24 (default) · 3xl 32px. Plná škála + playground viz Tvary & pohyb.

md
lg
xl
2xl
3xl

Padding

none · sm 16 · md 20/24 · lg 24/32px (responzivní).

pad sm
pad md
pad lg

Interaktivní

interactive = jemný zdvih + stín na hover (klikatelná karta). Najeď myší.

Klikatelná karta

Na hover se jemně zvedne. Pro navigaci zabal do Link.

Props & pravidla

<Surface>

components/ui/surface.tsx
PropTypDefaultPoužití
kind"card" | "soft" | "sage" | "mint" | "blush" | "dark" | "gradient" | "glass""card"Povrch (registr)
elevation"flat" | "ring" | "raised""ring"Hairline ring / stín
radius"md" | "lg" | "xl" | "2xl" | "3xl""2xl"Zaoblení
pad"none" | "sm" | "md" | "lg""md"Vnitřní odsazení
interactivebooleanfalseHover zdvih (klikatelná)
as"div" | "section" | "article""div"HTML tag
  • Decision tree: bílá stránka → page; zvednutá karta → card; jemný well → soft; sekce s tintem → sage / mint; teplé promo → blush; hero / feature / footer → dark nebo gradient.
  • Glass jen nad gradientem / fotem; gradient = čistý grad-cover + grain (bez topo).
  • Hrana vždy přes hairline ring, nikdy border-*.
  • Šířku sekce řeší width systém (.section-bb / .section-wide), ne Surface.