Style guide
The live type scale, color tokens, and spacing system pulled from globals.css — how the site looks. The editorial guideat the end documents how it reads. This page is the system's self-documentation and a visual-regression reference.
Headings
Display font swaps
Inside .h1–.h3 only: strong → Hauss, em → PP Pangaia, u → Sharp Roman. .h4–.h6 are flat Hauss labels and do not swap.
Subheads
Body copy
Body copy is Inter at a fluid size. Inline strong, emphasis, and links inherit the running color with an underline-color shift on hover.
Small print — captions, footnotes, secondary detail.
Spacing scale
All spacing derives from --base: clamp(4px, 0.5vw, 16px). Multiply by a fixed factor. At 1440px viewport, base ≈ 7.2px.
Class naming: .padding--80 = base×10, .margin-top--24 = base×3. The number is the pixel value at 1920px (where base = 9.6px), not the multiplier.
Color tokens
Click any swatch to copy the CSS variable. Contrast ratios measured against --white (#fefefe).
Interaction states
Global transition timing: --transition: 0.15s. All interactive elements carry cursor: pointer and a color/opacity shift on hover.
Default link — resting underline uses --light; hover and focus deepen it to --gray. Text color stays inherited; only the underline shifts.
Editorial guide
The system above governs how the site looks. This governs how it reads. Every article and case study is written to one philosophy and passed through one audit before it ships.
Elegance first, selling second. Writing here is editorial — considered prose that positions the work, not fast-food content chasing clicks. Reader experience and taste lead; SEO growth-hacking and CTA-pushing never drive a piece.
No skimmer tactics.The aggressive-skimmer playbook — bolding whole phrases into a “skeleton,” keyword-stuffed headers, clickbait titles — is deliberately rejected. When a readability convention conflicts with elegance, elegance wins.
- No wall paragraphs. Target two to four sentences, one idea each. Five or more is a wall — split it at its natural beat.
- Section on real turns. A header marks a shift in phase, question, or time — not decoration. A short essay wants three to six, not ten.
- One emphasis per section. A single bold line on the thesis stays scannable; bolding everything makes nothing stand out.
- Assets earn their place.A figure goes in when it shows what prose can't. Two or three strong visuals beat six decorative ones.
- Lists over inline runs. Three or more parallel items become a list, not a buried sentence.
The test: skim at reading speed. If your eye slides off a gray block, split it; if a header or image hits every screen, pull some back.
This portfolio was built as a design-engineering exercise, which means the writing and the code were treated as one system rather than two separate jobs, and every article is passed through the same reading-friendliness audit before it ships, because a strong argument buried in a wall of gray text still loses the reader, and the goal here is an editorial experience a busy recruiter can read top to bottom without effort, so paragraphs stay short, sections mark real turns in the argument, and visuals appear only when they show something the prose cannot.
This portfolio was built as a design-engineering exercise — the writing and the code are one system, not two separate jobs.
So every article passes through the same reading-friendliness audit before it ships. A strong argument buried in gray text still loses the reader.
The goal is an editorial experience a busy recruiter can read top to bottom: short paragraphs, sections that mark real turns, visuals only when they show what prose can't.