Brand guidelines
Ikony Laundry Cloud
Jednotný line-art systém ikon pro celý web. Monochrome, bez rámečků, se třemi velikostmi a jednou tloušťkou čáry — připravený pro karty, formuláře, navigaci i interaktivní prvky.
Tokeny
Velikosti a tloušťka
Všechny ikony vycházejí z pěti CSS proměnných. Neměň je ad-hoc — když potřebuješ nový kontext, rozšiř tokeny, ne je obcházej.
| Token | Hodnota | Použití |
|---|---|---|
| --icon-sm | 20 px | Inline ikony v tlačítkách, odrážkách, seznamech |
| --icon-md | 24 px | Navigace, ovládací prvky, chevrony, mobilní menu |
| --icon-lg | 40 px | Feature ikony v kartách a hlavních sekcích |
| --icon-stroke | 1.5 | Jednotná tloušťka čáry pro všechny velikosti |
| --space-icon-gap | 20 px | Mezera pod ikonou v kartách a boxech |
Vizualizace
Tři velikosti na jedné čáře
20 px
Tlačítka, odrážky, seznamy
size="sm"
24 px
Navigace, chevrony, kontroly
size="md"
40 px
Feature ikony v kartách
size="lg"
Příklady použití
Karty, formuláře, navigace
Karta se službou
Feature ikona 40 px, brandová barva, interaktivní hover posun. Pod ikonou je vždy token --space-icon-gap.
<Icon icon={ClipboardCheck} size="lg" interactive />Tlačítko s ikonou
Inline ikona 20 px v tlačítku. Použij interactive, aby se ikona při hoveru zvedla a změnila na brand barvu.
<Button>
<Icon icon={Phone} size="sm" interactive />
Zavolat
</Button>Seznam s ikonami
- Autorizovaný servis
- Reakce do 24 h
- Díly s sebou
<li className="flex items-start gap-3">
<Icon icon={BadgeCheck} size="sm" brand className="mt-0.5" />
<span>Autorizovaný servis</span>
</li>Navigace a ovládací prvky
Mobilní menu hamburger 24 px, chevrony v akordeonech 24 px, kontaktní ikona v sheetu 20 px. Všechny dědí stejnou tloušťku čáry a plynulé přechody.
Pravidla
Dělej a nedělej
- Vždy používej sdílenou komponentu <Icon />.
- Drž se jedné z předepsaných velikostí: sm / md / lg.
- Na barvu použij brandovou barvu jen tam, kde má ikona vyniknout.
- Interaktivní ikony v tlačítkách a odkazech nechávej s interakcí.
- Dekorativní ikony označ aria-hidden, aby nechodily do screen readeru.
- Neměň tloušťku čáry různě na různých místech.
- Nepoužívej barevné nebo vyplněné (filled) ikony v hlavním obsahu.
- Neobaluj ikony do rámečků nebo kruhů.
- Nescaluj ikony na náhodné hodnoty mimo tokeny.
- Nepoužívej ikony jako jediný vizuální indikátor bez textu/labelu.
Komponenta
Použij komponentu Icon
Vždy importuj ikony přes sdílenou komponentu. Neimportuj raw Lucide komponenty s vlastními Tailwind třídami — to rozbíjí jednotný vzhled.
import { Icon } from "@/components/ui/icon";
import { Wrench, Phone, Menu } from "lucide-react";
<Icon icon={Wrench} size="lg" brand interactive />
<Icon icon={Phone} size="sm" interactive />
<Icon icon={Menu} size="md" />size
sm | md | lg
brand
Použije brandovou barvu místo dědičné.
interactive
Hover posun + barva, active zmenšení.
Aktualizuj dokumentaci
Když přidáš nový kontext ikony, nejprve rozšiř tokeny v src/styles.css, pak aktualizuj tato brand pravidla a spusť vizuální regresní testy.