DESIGN.md — charlieosborne.co

1. Visual Theme & Atmosphere

Charlie Osborne’s portfolio is a study in disciplined whitespace and Inter Display’s geometric precision. The design philosophy is “quiet confidence” — a developer/designer portfolio that communicates taste without performance. The near-white background, compressed heading line-height, and tight negative letter-spacing on h1 create a layout that feels editorial without being theatrical. The atmosphere is calm, contemporary, and personal.

2. Color Palette & Roles

The orange-red accent (rgb(236, 75, 34)) is used sparingly — likely for hover states, active markers, or a signature personal element. Its warmth contrasts effectively with the cool white base.

3. Typography Rules

Typefaces: Inter Display for large headings; Inter for body and supporting text — the correct split between display-optimized and body-optimized optical variants.

• Compressed line-height on h1 (41.86px at 46px font-size): lines overlap slightly — creates dense, tightly-packed display blocks. This is a deliberate typographic signature.
• h1 letter-spacing: -0.46px — 1% negative tracking tightens Inter Display letterforms into an engineered block.
• h4 at 11.5px with +0.115px tracking — micro-labels with gentle positive tracking for legibility at small scale.
• The Inter Display / Inter split at different sizes is the correct OpenType strategy.
• What’s absent: no serif fonts, no ultra-bold weights, no variable font features.

4. Component Stylings

• Glass surface 1: rgba(255,255,255,0.17) — light overlay panels on image sections.
• Glass surface 2: rgba(214,214,214,0.5) — silver-glass panels, more opaque.
• Orange accent: rgb(236,75,34) — on headings and interactive elements.
• Borders: warm pale gray (rgb(207,203,201)) — barely-there dividers.
• No border-radius tokens detected — component-level or framework-defined.
• No shadows — depth through glass and color only.

5. Layout Principles

• Whitespace drives the layout — sections breathe with deliberate empty space.
• The compressed h1 line-height creates dense text blocks that contrast with surrounding air.
• Micro-labels (h4 at 11.5px) categorize content without adding visual weight.
• Framer-based layout uses fixed-grid with responsive column drops.

6. Depth & Elevation

Two glass surfaces provide depth:

• rgba(255,255,255,0.17) for light image overlays
• rgba(214,214,214,0.5) for more substantial floating panels

The warm-gray border and glass panels together suggest a layered card-over-white pattern. No box shadows — elevation is purely through transparency and color.

7. Do’s and Don’ts

Do:

• Use Inter Display for headings above 32px — the optical adjustments matter.
• Apply the compressed line-height (0.91x of font-size) on h1 — it’s the signature gesture.
• Reserve the orange-red for one deliberate moment per section.
• Use h4 at 11.5px with +0.115px tracking as the label/category style.

Don’t:

• Use Inter (body) at display sizes — Inter Display exists for this reason.
• Increase h1 line-height to match font-size — the compression is intentional.
• Apply the orange-red to body text or navigation.
• Add shadows — glass transparency is the elevation model.

8. Responsive Behavior

• 46px h1 with -0.46px tracking will need scaling to ~28–32px on mobile.
• Compressed line-height (below font-size) can break on mobile if not capped — requires line-height: 1 or min-height handling.
• Micro h4 at 11.5px is at the readable limit — mobile browsers may auto-scale.
• Glass panels need backdrop-filter for the frosted effect — include fallback.

9. Agent Prompt Guide

Build a personal portfolio in the style of Charlie Osborne: white background, near-black text (rgb(10,10,10)), Inter Display at 46px/600 weight with compressed line-height (41.86px) and -0.46px letter-spacing, Inter for body text, orange-red accent (rgb(236,75,34)) used once per section, glass panels (rgba(255,255,255,0.17), rgba(214,214,214,0.5)), micro-labels at 11.5px with +0.115px tracking. No shadows, no border-radius tokens.

Generated by Sparkbites — extracted from live CSS analysis