The living reference of the Gautier UI charte (Swiss typographic style) —
one self-contained file, zero dependencies, file://. Each caption is a rule; the
token block (§14) ships it. Spec: Gautier-ui.md · v0.1
Function first — spacing, typography, colors and grey levels exist only to serve a function. Every value must prove its job; when in doubt, it goes.
Grey is the only value channel — six named steps, no improvised greys. The fields show the current mode's ramp; edits are a session sandbox.
900 · Title / full ink · most important
700 · Strong secondary · everyday reading
500 · Tertiary / muted · units, quiet labels
300 · faint label in caps
The eye meets the most important thing first — through position, size and ink level, not through piled-up colors. Spaced caps: short labels only.
| Figure | Year | Office |
|---|---|---|
| Louis Gautier | 1508 | Citizen, notary |
| Jean-Antoine | 1704 | Councillor, historian |
| Raoul | 1889 | Observatory director |
| Hélène | 1937 | CLAFG founder |
Exact values go in a table, not in a chart. Tabular numerals; 1px hairlines always under the data.
Slider: white thumb, quiet dark fill — the accent is reserved for the active value. Toggle: same family; dark track = on. Focus is always visible (hit Tab).
Indexed ✓ histoire_de_geneve_vol9_1914.pdf
✕ Import failed — page 1691 unreadable
Working = ink (thin bar, tabular %). Success = plain — a tool's normal state. Only the error is accent-colored: an anomaly, the accent's job. No green, no orange, ever.
Lowercase, no spaces — used in export filenames.
✕ Out of range — the record begins in 1508.
gautier_tree_1508-1960.svg already exists. Overwriting replaces it permanently — this cannot be undone.
Errors sit inline, under their field — the only accent-colored state. Dialog: sharp ink frame, primary action inverted. Destructive? The sentence warns, not the button color.
Quantity = position, never hue. Bars start at zero. The accent marks the anomaly, nothing else.
No legend — labels live at line ends. Featured series 900, context 500/300, grid behind. One accent point. > 4 series → small multiples (§10).
Effect ordering: sorted by the value you are showing, not alphabetically. Common scale, one salient point.
Compare by repetition: same scale, same framing, the accent in the same place — one module flagged.
A "degree" gradient = the ink ramp, never a second hue. Test: the "Grayscale" button must change nothing about how this reads.
The card is the unit of reading. The brand (here: the Gautier armoirie) lives on the chrome, never in the data. Stepper underlined, KPIs tabular, charts follow §07–§11. One accent per view: the alert.
TOOL regime, after a real generator: flat, sharp, hairlines — numbered sidebar, editable value fields, notes inside the UI, stats below. The paper's soft shadow belongs to the object, not the chrome. Tilt is symmetric, so its fill grows from the center — at zero the bar is empty, it never lies. Inside this dashboard page, the tool window is a framed object, like paper on a desk.
Gautier UI v0.1 · from the pen-plotter atelier of Jérôme Gautier, Geneva · Instagram · MIT license