HugoPress reference site

Components

An overview of everything the reference theme can render — and what you can drive through design tokens and data/site.yaml.

What's here This page is a living catalog. Colors, typography, radii and spacing come from data/design_tokens.yaml; meta, icons and analytics from data/site.yaml. Change the tokens in the HugoPress admin and this page changes with them.

Barvy

primary
#2563eb
--brand-primary
secondary
#4f46e5
--brand-secondary
accent
#f59e0b
--brand-accent
fg
#0f172a
--brand-fg
bg
#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

Primary CTA

Secondary CTA

<a class="card">Fast
New FastStatic site — no server running.
</a> <a class="card">Secure
SecureNo database or PHP in production.
</a> <a class="card" href="/en/">Cheap
CheapHost anywhere, even for free.
</a>

Info A neutral message for the reader.
Done The action completed successfully.
Heads up Think this one through.
Error Something went wrong.

Launch your site today

HugoPress publishes your content to Hugo over Git — you just write.

Start freeDocumentation
12Mon19Tue8Wed22Thu17Fri5Sat9Sun
JanFebMarAprMayJun

A regular paragraph with bold, italic and a link. Below it, a table:

FeatureM0M5
Editor.js✓✓
Publish to Hugo—✓
Favicons—✓

The theme doesn’t know Editor.js. All renderers live on the CMS side.

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