Komponenty

Přehled všeho, co reference theme umí vyrenderovat — a co lze řídit přes design tokeny a data/site.yaml.

Co tu je Tahle stránka je živý katalog. Barvy, typografie, zaoblení a spacing se berou z data/design_tokens.yaml; meta, ikony a analytika z data/site.yaml. Změň tokeny v adminu HugoPress → změní se i tahle stránka.

Barvy

primary

#2563eb
--brand-primary

secondary

#4f46e5
--brand-secondary

accent

#f59e0b
--brand-accent

#0f172a
--brand-fg

#ffffff
--brand-bg

bg_elevated

#f8fafc
--brand-bg-elevated

muted

#64748b
--brand-muted

border

#e2e8f0
--brand-border

Typografie

Nadpisy · system-ui, -apple-system, 'Segoe UI', sans-serif

Příliš žluťoučký kůň

Text · system-ui, -apple-system, 'Segoe UI', sans-serif

Příliš žluťoučký kůň úpěl ďábelské ódy. 0123456789

Mono · ui-monospace, 'SF Mono', monospace

const hugo = "press"; // 0123456789

Zaoblení & spacing

Radii

sm 0.25rem

md 0.5rem

lg 1rem

Spacing

1

2

3

4

6

8

12

16

Primární CTA

Sekundární CTA

Novinka RychléStatický web — žádný server v provozu.

</a> <a class="card">

BezpečnéV provozu žádná databáze ani PHP.

</a> <a class="card" href="/cs/">

LevnéHostuj kdekoliv, klidně zdarma.

</a>

Info Neutrální sdělení pro čtenáře.

Hotovo Akce proběhla úspěšně.

Pozor Tohle si rozmysli.

Chyba Něco se nepovedlo.

Běžný odstavec s tučným, kurzívou a odkazem. Pod ním tabulka:

Funkce	M0	M5
Editor.js	✓	✓
Publikace do Hugo	—	✓
Favicony	—	✓

Theme nezná Editor.js. Všechny renderery sedí na CMS straně.

const site = await fetch('/data/site.yaml');

Barvy

Typografie

Zaoblení & spacing

Spusťte web ještě dnes