Soft „nature“ UI — téma a provoz

Stav dokumentu: Částečně — vizuální směr a současná implementace jsou popsány; CSP pro fonty a extrakce komponent jsou otevřené.

Tento dokument popisuje vizuální směr veřejného webu Soul of Herbs („měkká příroda“: zaoblené karty, pastelové plochy, jemná dekorace) a co je potřeba pro údržbu, rozšíření a přístupnost.

Související: plán komponent v 26-ui-components.md, obsahová pravidla v 30-content-guidelines.md.

Kde v kódu co žije

Oblast	Soubor	Poznámka
Globální pozadí těla, typografie display	`app/root.tsx` + `app/app.css`	`body` používá třídy z `nature.body`; v `@theme` je `--font-display` (Literata).
Společné řetězce Tailwind tříd	`app/ui/nature-classes.ts`	Exportovaný objekt `nature` — literály pro JIT; neskládat dynamicky z částí.
Dekorace (SVG list, rozmazané „bloby“)	`app/components/nature-decor.tsx`	Čistě dekorativní; vždy `aria-hidden` u SVG / prázdných blobů.
Úvodní stránka	`app/routes/home.tsx`	Hero karta, technické info v `<details>`.
Katalog	`app/routes/byliny.tsx`	Mřížka karet, filtry v jedné velké kartě, MVP/D1 v `<details>`.
Detail byliny	`app/routes/byliny.$slug.tsx`	Sekce jako karty (`Section` + `sectionShell`), sběr jako karty, ne tabulka.

Fonty se načítají z Google Fonts v app/root.tsx (links): Inter (text) + Literata (nadpisy přes font-display).

Co je potřeba při změnách UI

Nové obrazovky — používej existující klíče z nature (karty, tlačítka, vstupy). Pokud vzniká třetí layout šířky, přidej nový klíč do nature-classes.ts místo kopírování dlouhých řetězců do více rout.
Nové barvy — drž se stone / emerald / amber / sky / rose s nízkou saturací na velkých plochách; akcenty a text musí držet rozumný kontrast (viz níže).
Ilustrace — dnešní motiv je inline SVG (LeafSprig) a CSS blob (SoftBlob). Pro vlastní ilustrace: jednotný styl (tloušť čar / paleta), WebP/SVG, rozumná velikost; dekorace nesmí být jediný nosič informace.
Dark mode — projekt spoléhá na prefers-color-scheme (Tailwind dark:). Každá nová komponenta musí mít dark: variantu pozadí, textu a ohraničení.
Reduced motion — jemné transition a active:scale jsou OK; při přidávání animací doplň @media (prefers-reduced-motion: reduce) (globálně v app.css nebo lokálně).

Přístupnost (povinné minimum)

Dekorativní SVG a bloby: aria-hidden="true" (už u LeafSprig / SoftBlob).
Kontrast: pastel na velkých plochách + tmavší text; odkazy a primární tlačítka musí zůstat čitelné proti pozadí.
Klávesová navigace: nativní prvky (<a>, <button>, <details>, <select>) zachovat; při vlastních „chip“ filtrech by bylo potřeba role a stavy (zatím používáme odkazy a formulářové prvky).

Závislosti a nasazení

Žádný nový npm balíček — čistě Tailwind + Google Fonts.
Fonts z CDN: při striktní CSP na produkci je potřeba povolit fonts.googleapis.com a fonts.gstatic.com (viz budoucí hlavičky v Workers).

Budoucí rozšíření (volitelné)

Extrahovat z rout opakující se bloky (HerbCard, Section) do app/components/ podle pravidel v 26-ui-components.md.
Ilustrace per bylina (R2 / public_url) jako hero obrázek vedle textu.
Design tokeny přesunout částečně do @theme v app.css, pokud bude potřeba sdílet hodnoty i mimo Tailwind utility.