STYLEGUIDE
Type, color, components, and the heuristics that hold them together. Every specimen below is rendered with the same classes and tokens the rest of the site uses, so this page can never drift from what ships.
> 01 / Type
Typography
A thing documented.
--font-system · Space Mono · route titles, headlines, default voice
Le Sauvegarder.
--font-display · Old Standard TT · LE SAUVEGARDER and homepage-landing titles
Report body copy is set in IBM Plex Sans at the reading measure used across dossiers and briefings — comfortable line length, generous leading, sentence case.
--font-ui / --font-report-body · IBM Plex Sans · report body copy
Field note, written by hand. Courier Prime carries authored testimony and the human voice when green or cyan would over-systematize the copy.
--font-human · Courier Prime · authored testimony, human voice
Recent Work Shelves
.section-label · small green uppercase eyebrow above a section
Inline treatments: a primary link in blueprint cyan with its
underline, and the yellow-green ::selection
highlight — select this text to see the focus color fill behind it.
a (blueprint, hover → green) · ::selection (bg --focus) · a:focus-visible (3px cyan outline)
> 02 / Color
Color
Color is role-based, not decorative. Each token below carries a fixed job across every route.
-
--fi-bg#000000Base archive field, page background
-
--fi-surface#020617Panels, ticker beds, shadow interiors
-
--fi-cyan#22d3eeSystem structure: borders, rails, metadata
-
--fi-green#4ade80SYSOUT: machine output, caption plates, counts
-
--fi-magenta#e879f9Prompt syntax, rare operator marks (sparingly)
-
--fi-amber#fbbf24Warning, authored emphasis, warm accent
-
--fi-gold#f59e0bLE SAUVEGARDER / MTM title energy, human warmth
-
--fi-copper#c47a3aProvenance, source chain, maker plate, custody
-
--fi-maroon#7f1d1dÀ Propos primary accent (provenance)
-
--fi-silver#c0c0c0Steel / silver institutional register
-
--fi-slate#94a3b8Muted text (--muted)
-
--fi-paper-light#f7f4efReadable human text, light paper surface
Semantic aliases sit on top of these raw tokens: --ink (green), --muted (slate), --line (cyan), --steel (cyan), --oxide (magenta), --brass (green), --focus (cyan). Style new components with the aliases so a route re-theme flows through automatically.
Route Families
Structure is shared across sibling routes; only the color temperature changes, set by a body class.
L'Œuvre · default
Assembled work. Cyan structure, green SYSOUT, magenta only as prompt syntax or a faint wash. No body class needed.
Le Signal · body.signal-sauvegarder
Human-authored transmission with machine-assisted provenance. Gold titles, amber and copper warm structure, green SYSOUT captions, paper body prose.
À Propos · body.apropos-provenance
Provenance and institutional context. Maroon primary accent, silver institutional plates, amber warmth, green for confirmed provenance facts.
> 03 / Components
Components
> RECORDS (24)
.fi-caption-box + .fi-prompt-marker · green SYSOUT label: counts, statuses, declarations — never prose
.oeuvre-ticker-plate · shadow-box plate with a green SYSOUT label over a scrolling row of shelf entries
.directory-grid.plate-card-grid · the route's primary navigation instrument: large label + one right-aligned SYSOUT plate per card
Primary link — blueprint cyan, underlined, turns green on hover.
a · color --blueprint, hover --fi-green
focus state · tab here for the 3px --focus (cyan) outline shared by every interactive element
> 04 / Heuristics
Heuristics
- Dark archive field first: a black --fi-bg background under a faint fixed scan-grid and scanline. High contrast, hard-edged offset shadows, no rounded corners.
- Space Mono is the default system voice. Old Standard TT and Courier Prime carry human and authored warmth; IBM Plex Sans carries report body copy.
- Color is role-based: cyan is structure, green is SYSOUT machine output, magenta is prompt syntax used sparingly, gold / amber / copper are human and provenance warmth, maroon and silver are the institutional register.
- Structure is shared across sibling routes; only the color temperature changes, set by a body class per route family.
- Sentence case for prose; Title Case for labels, headings, and menu items. Years and machine output stay uppercase mono.
- Caption boxes are machine output — labels, counts, statuses, declarations. Never use them for prose.
- Accessibility: a skip link, a 3px cyan focus outline on every interactive element, and prefers-reduced-motion to disable the animated mark sheen.
- Bilingual register: French route names (L'Œuvre, Le Signal, À Propos) paired with English and SYSOUT captions.
A thing documented is a thing not yet lost.