Web style
These pages are built from one small design system, written down in site/DESIGN.md and implemented section for section by one stylesheet. Every component appears below exactly once, so a change can be checked by eye.
The shape is still the GNU one: a main column, a nav column, a notice at the foot, every page readable in a text browser. The setting is not. It uses the sans the reader's own system provides, a type scale and a spacing scale rather than ad-hoc ems, and hairlines rather than filled boxes. No script, no web fonts, no external requests, light mode only.
Type scale
Seven steps, ratio about 1.25, all in rem so they follow the reader's browser setting rather than overriding it.
| Token | Value | At 16px | Used for | Specimen |
|---|---|---|---|---|
--text-2xl | 2.25rem | 36px | h1 | Grumpy wizards |
--text-xl | 1.75rem | 28px | section opener | Grumpy wizards |
--text-lg | 1.375rem | 22px | h2 | Grumpy wizards |
--text-md | 1.125rem | 18px | h3, lead | Grumpy wizards |
--text-base | 1rem | 16px | body | Grumpy wizards |
--text-sm | 0.875rem | 14px | nav, meta, tables, code | Grumpy wizards |
--text-xs | 0.75rem | 12px | labels, badges | Grumpy wizards |
Body text is --text-base at --leading 1.6.Small is --text-sm.Smaller is --text-xs.Soft ink. Faint ink.Highlight is semibold. Figures are tabular, so2026-09-04 and 2026-11-30 line up in a column.
A third-level heading
A fourth-level heading
Spacing scale
One 4px step, doubled and halved. Every margin and padding in the stylesheet is one of these eight.
| Token | Value | |
|---|---|---|
--space-1 | 4px | |
--space-2 | 8px | |
--space-3 | 12px | |
--space-4 | 16px | |
--space-5 | 24px | |
--space-6 | 32px | |
--space-7 | 48px | |
--space-8 | 64px |
Colour
Three inks, three grounds, two lines and one accent. Colour carries hierarchy; it never carries meaning on its own.
| Token | Value | Use | |
|---|---|---|---|
--ink | #14171c | body text | |
--ink-soft | #59616e | secondary: dates, meta, the notice | |
--ink-faint | #6b7480 | tertiary: nav labels | |
--bg | #ffffff | page | |
--bg-subtle | #f7f8fa | panels | |
--bg-inset | #f2f4f7 | code, inset things | |
--line | #e5e8ec | the default hairline | |
--line-strong | #ccd2da | a border that holds its own | |
--accent | #1b58d0 | links, primary action, focus | |
--accent-hover | #1443a5 | hover and active | |
--accent-visited | #4a3f9e | visited links | |
--accent-subtle | #eff4fe | tinted ground |
Buttons
One button, three intents, two sizes. An <a> and a <button> are drawn identically.
Primary smallDefault smallQuiet smallDisabled
Primary marks the one action a page is for; there is never more than one. Quiet is for an action that is available but not being suggested.
Lockup
The mark and the name, one rule at both sizes. It is the only ornament on the site.
fontina0.1.1
fontina
Centred rather than baseline-aligned, set below 1em, and aria-hidden — the word carries the name, so a machine with no emoji font loses only the joke. The favicon is drawn as SVG, because nothing about a favicon can rely on a font at all.
Masthead, sitemap and colophon
Both are on this page already, because they are on every page: the masthead above, the sitemap at the foot. Navigation is three tiers — the masthead carries the five destinations most people want, the nav column carries what is contextual (on a manual chapter, its chapters), and the footer at the foot carries everything.
The footer is one section in three bands — the index, the licence, the small print — owning one rule and one width between them. Its sitemap reuses the nav item's markup but neither its rail nor its indent: the nav column's left border says you are here in this list and its indent says this belongs to the line above, and a footer index is a list you are nowhere in.
Property strip
What the program refuses to do, in the first screen. Argued properly under Properties.
- No network
- No telemetry
- No elevation
- GPL-3.0-or-later
Badge and note
badgeaccent A badge labels a thing in place: a state, a licence, a version.
An aside that must not be missed. A hairline and a tint, not a coloured shout. It takes any content and the last child loses its margin.
Panel
A panel groups something that is not prose: a summary, a set of figures, a callout that is not a warning.
Subtle ground, one hairline, one radius.
Hero, section, grid
The three pieces a landing page is built from. A hero states what the thing is; a section is a rule and a gap; a grid holds one claim per tile.
Find any font you have. Use it in anything. Install nothing.
What it is and how, in one paragraph. The hero does not repeat the name — the masthead six lines above already said it.
- No network
- No telemetry
Finds and indexes
One claim, the chapter that proves it, and the command that does it. scan
Activates
Per user, in place, never a system directory. activate
Exports
CSS, specimens, JSON against a published schema. specimen
Properties
The rule and the gap above this heading are .section: the cheapest thing that says "new subject" without inventing a card for it.
Properties are for claims that have to be checkable: the term is the property, the definition says how you would verify it.
- It makes no network connections
- The core and the command line contain no networking code at all.
- It never asks for elevation
- Everything is per user; system font directories are left alone.
On-page contents, and a chapter row
Every command, its options and its exit codes, laid out as a manual page.
What every --json output is guaranteed to contain.
Nav item
The site navigation, and the only navigation there is: a tracked-out label over a list. The current page is set in <strong>; a sub-item takes .sub.
Columns, news list, status list
News
- A thing happened 2026-09-03
- One line of detail.
- Another thing 2026-09-01
Supported releases
- fontina 0.1.1 (changes)
- Released 2026-09-04. Binaries with checksums and provenance.
Node nav
Next: Concepts · Previous: Getting started · Up: Manual
Table
Rules between rows, not around cells: the data is the grid.
| Id | Level | Finding |
|---|---|---|
name/family | error | no family name |
hinting/none | info | TrueType outlines without hinting programs |
license/nonfree | warn | licence is not a free software licence |
Code
$ fontina list --script Arab
id family style wght wdth flags license path
1 Amiri Regular 400 100 ---- OFL-1.1 /home/me/Fonts/Amiri-Regular.ttfInline code takes the inset ground. Press Ctrl C to stop a scan.
A terminal transcript takes .term, which colours the command against the output. Syntax colours are not used: every fenced block in the manual is a transcript, and a transcript has no syntax to colour.
$ fontina facets --script Arab 1 face(s) in 1 family(ies) weight 400 Regular 1 license OFL-1.1 1 freedom free 1 $
Definition list, quotation, rule
- Face
- One font, in one file, at one index.
- Family
- The faces that share a name and differ only in style.
Standards over invention.
The notice at the foot of every page is the last component.