Every font is self-hosted via @fontsource and imported at the top of src/routes/layout.css, before Tailwind. Always import full weights (and latin-ext subsets) — never the plain latin-400.css files, which drop Bosnian / Croatian characters.
Title and body fonts
Title fonts set --font-primary (headings). Body fonts set --font-secondary (paragraphs, UI chrome).
Pick them on /showcase or encode them in a template code. New sites resolve those shortcodes in scripts/create-site.js.
Structural presets
Presets change shape, not brand colour: radius, shadow, border, and hover language.
| Preset | Device |
|---|---|
| Classic | Inset mat-frame outline |
| Simple | Zero radius, 2px rules |
| Contemporary | Cards lift on hover |
| Modern | Neon glow edge |
| Artistic | Asymmetric radii + offset block shadow |
| Editorial | Heavy top rule, flat print |
| Nordic | Borderless whisper shadow |
| Brutalist | Zero radius, 3px stroke, hard offset |
Colour lives in a separate color set (navy-gold, rose-teal, …) so you can mix a Brutalist frame with Rose & Teal without forking CSS.
On /showcase, Type switches the template-code prefix (TS static, TA Access, TC CMS) so the copied code matches the add-ons you will compose.
Header chrome
Three extra slots sit after button style:
| Slot | Attribute | Options |
|---|---|---|
| Header size | data-header-size |
compact (default), comfortable, large |
| Nav links | data-nav-style |
ghost (default), underline, pill, text |
| Header surface | data-header-surface |
frost (default), solid, transparent |
Large matches a tall header with bigger menu type (logo ~4–4.75rem, nav text-base / min-h-14). Shorter codes still parse; missing chrome slots default to compact / ghost / frost.
Compact codes are T[SCA] plus 10–20 even characters (2 per field). A full 22-character code encodes all ten slots.