The craft
Colophon
Notes on the typography, libraries, and references that shape Res — and a working reference for the design styles in use.
Design
A reference for the look
The recurring styles and motifs that shape every page. Treat this as a living style guide — when in doubt, defer to what's here.
Typography
- Sans · Geist
- Default for UI and body text. Quietly modern.
- Mono · Geist Mono
- Time labels, tabular numbers, and class strings.
- Serif · System (ui-serif)
- Reserved for the philosophical voice — pull-quotes and Latin etymology.
Type scale
- Hero wordmark
- text-6xl md:text-7xl font-light leading-none tracking-tight
- Page title
- text-5xl md:text-6xl font-light leading-[1.05] tracking-tight
- Section title
- text-2xl md:text-3xl font-light tracking-tight
- Lead
- text-base md:text-lg leading-relaxed
- Body
- text-[15px] leading-7
- Small
- text-sm leading-relaxed
- Eyebrow
- text-xs uppercase tracking-[0.3em]
- Index
- text-[10px] uppercase tracking-widest
Res
Aa
Aa
Lead text reads larger.
Body text reads like this.
Small body text.
Eyebrow
01
Palette
Strict neutrals via shadcn theme tokens. No project-specific colours yet — every accent is a shade of foreground or muted at an opacity step.
Background
--backgroundForeground
--foregroundMuted
--mutedMuted foreground
--muted-foregroundCard
--cardBorder
--borderVisual signatures
- Roman numerals
- I, II, III, IV — used for treatise sections (Foundations, A model for man).
- Arabic ordinals
- 01–05 — used for hierarchy items (Beliefs through Actions).
- Section dividers
- A 12px vertical hairline between major sections — mx-auto h-12 w-px bg-border.
- Dashed orthogonals
- Dashed dot + dashed top border for orthogonal concepts (Areas, Time & Space, Data) — visually distinct from the layered hierarchy.
- Small-caps eyebrows
- Tracked uppercase muted text above titles — establishes section context. Tracking ranges from 0.3em (sections) to 0.35em (page titles).
- Italic serif
- Reserved for the philosophical voice — pull-quotes, Latin etymology, propositions in the model for man.
- Floating pill nav
- Sticky top-4 glass-blur capsule. Compact on desktop; collapses to Res + Open on mobile.
- Concentric rings
- Five nested circles for the structure diagram, with cross-axes for a celestial / compass feel.
- Marble bust slot
- 4:5 portrait card with subtle marble texture and a serif initial — placeholder for philosopher images until real busts are added.
Influences
Where the look comes from
Three traditions sit behind the page — the treatise, the designed page, and the classical figure. None is decorative; each is load- bearing.
- Treatise form
- Wittgenstein's Tractatus, Spinoza's Ethics, Marcus Aurelius's Meditations — numbered propositions, axiom-and-derivation structure, short discrete entries that make the architecture of an argument visible.
- Information design
- Edward Tufte and Robert Bringhurst — restraint, classical typography, the page treated as a designed object rather than a container for content.
- Classical aesthetic
- Roman inscriptional typography, Ptolemaic and celestial diagrams, sacred geometry — how rigorous thinking has been visually structured for two millennia.