Design showcase

Slovo·Cesta brand

Sdílené komponenty SlovoCestaBadge, SlovoCestaWordmark a SlovoCestaBrand ve všech velikostech, tónech a reálných kontextech. Přepni schéma a ověř kontrast i v dark režimu.

SlovoCestaBadge

Gradientní čtverec s ikonou. Default = LogoMark (ICHTHYS s křížem). Aktivní tón invertuje pozadí na světlé pro použití na accent gradientu (BackButton pilulka).

size="sm" tone="default"
LogoMark
size="md" tone="default"
LogoMark
size="lg" tone="default"
LogoMark
size="sm" tone="active"
LogoMark
size="md" tone="active"
LogoMark
size="lg" tone="active"
LogoMark
size="md" icon={Home}
Home
size="md" icon={Compass}
Compass
size="md" icon={Sparkles}
Sparkles

SlovoCestaWordmark

Gradientní text „Slovo·Cesta" s monotónním size scale (sm 13→14 px, md 16→18 px, lg 18→20 px) a volitelným podtitulkem na ≥640px.

size="sm" tone="default"
size="md" tone="default"
size="lg" tone="default"
size="sm" tone="active"
size="md" tone="active"
size="lg" tone="active"

SlovoCestaBrand (lockup)

Badge + wordmark vedle sebe — kompletní podpis používaný v hlavičce a drawer.

size="sm"
size="md"
size="lg"
tone="active" (na accent)

Reálné kontexty

Stejné komponenty v produkčním obalu — header brand link a BackButton fallback pilulka.

Header brand link (group)
BackButton fallback pilulka (active)

A11y poznámky

Co čtečka obrazovky řekne v každém kontextu.

  • Standalone Badge: role="img", label „Symbol ryby ICHTHYS s křížem".
  • Standalone Wordmark: jednotný aria-label="Slovo Cesta" (vnitřní fragmenty jsou aria-hidden).
  • V brand linku / pilulce (s vlastním aria-label): obě komponenty mají decorative → aria-hidden, SR čte jen text rodiče.
  • Focus: wordmark má group-focus-visible:underline, aktivuje se při fokusu rodiče s třídou group.