Style guide
The live type scale, color tokens, and spacing system pulled from globals.css — how the site looks. The editorial guide at the end documents how it reads. This page is the system's self-documentation and a visual-regression reference.
Headings
Display emphasis
Two families ship: Lyon sets the voice — Lyon Display announces, Lyon Text carries the standfirst — and IBM Plex Sans does labels and reading. Inside .h1–.h3 the one emphasis available is strong → Plex, and a headline gets at most one; Lyon Display ships here as a single weight with no italic, so there is nothing else to reach for. Thatstrong is set at 0.951emso its cap matches Lyon’s — the only line where the two faces meet. .h4–.h6 are flat Plex labels and do not swap. The earlier em → PP Pangaia and u → Sharp Roman swaps were retired in mutation #54.
Subheads
Body copy
Body copy is IBM Plex Sans 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
Every value below is read out of the :root block in globals.css when the page builds, so this table cannot drift from the stylesheet it documents. Click any swatch to copy the variable. Contrast ratios are measured against --white (#fefefe).
Palette — what the value is
Kyle's five values, still the SSOT. Nothing outside the role tier should consume these directly.
Functional
Already role-named, and outside both tiers. The first three are rewritten on :root at runtime per case study.
Role — what the value is for
What components actually consume (mutation #53). A plain alias points at a palette value; an -rgborphan is an off-palette ink that only ever appears at partial alpha, so it's stored as a channel triple and used as rgb(var(--token) / N%). Orphans are named, never snapped onto the nearest palette value — merging them would change pixels.
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.