maximeheckel.com — Design System Reference

1. Visual Theme & Atmosphere

Dark scholarly elegance with typographic sophistication. This is a site where typeface choices tell the full story: Instrument Serif for display (warmth, literary authority), iA Writer Quattro V for longform reading (monospace clarity, writer’s tool), and Inter for UI. The palette operates in perceptually uniform oklch — a deep near-black background with cool muted blue-gray hues. The inset shadow on interactive elements (white glow top + dark shadow bottom) creates a tactile pressed-glass effect unique to this site.

2. Color Palette & Roles

• background: oklch(0.1292 0.005 262.04) — deep cool near-black
• surface: oklch(0.1468 0.01 262.04) — slightly lighter near-black for cards
• surfaceRaised: oklch(0.2484 0.018 262.04) — raised surface
• textMuted: oklch(0.7716 0.028 262.04) — muted blue-gray text
• textPrimary: oklch(0.9366 0.027 262.04) — near-white primary text
• fontDisplay: custom var

Notably absent: Colour accents

3. Typography Rules

Typeface(s): Instrument Serif (display/h1–h4), inter (UI/body), iAWriterQuattroV (longform prose/p)

Tech stack fonts hint: Next.js

• h1: 44px/52.8px Instrument Serif 400, −1.2px tracking
• h2: 44px/70.4px Instrument Serif 400, −0.5px tracking (looser for subheads)
• h3: 32px Instrument Serif 400, +0.3px tracking
• body: 16px/20.6px inter 400
• prose: 8px iAWriterQuattroV (actual scale larger — likely a measured artefact)
• links: 14px inter 560, −0.25px

Philosophy: Each size level reinforces hierarchy without relying on colour.

4. Component Stylings

Border Radius: None detected

Shadows: rgba(255,255,255,0.3) inset top + rgba(0,0,0,0.3) inset bottom — pressed-glass tactile button shadow; rgba(0,0,0,0.1) 3px 6px — soft card lift

Gradients: None recorded

Components lean on spacing and typography for distinction rather than decorative chrome. Buttons likely use filled + ghost variants in the primary colour.

5. Layout Principles

Built on Next.js. Layouts follow a content-first grid — wide gutters, deliberate whitespace rhythm. Section breaks use background-colour contrast rather than divider lines.

6. Depth & Elevation

Elevation system: rgba(255,255,255,0.3) inset top + rgba(0,0,0,0.3) inset bottom — pressed-glass tactile button shadow; rgba(0,0,0,0.1) 3px 6px — soft card lift. Depth is used purposefully, not decoratively.

7. Do’s and Don’ts

Do:

• Use the exact colour roles as defined — each serves a specific semantic purpose
• Respect the typeface role boundaries (each font has one job)
• Preserve generous whitespace — crowding breaks the design language
• Keep interactions restrained: hover opacity or colour-shift, not complex transforms

Don’t:

• Introduce colours outside the defined palette
• Mix typefaces beyond the established pairing
• Add drop shadows where the design is intentionally flat
• Use gradients unless the site already employs them
• Add Colour accents
• Add light mode

8. Responsive Behavior

Next.js; oklch palette and fluid type adapts cleanly

On mobile, the core design language holds — the reduction is spatial (tighter gutters, stacked columns) not stylistic. Colour, typography, and component styles remain unchanged.

9. Agent Prompt Guide

Use this as a one-paragraph brief when prompting an AI to build in this design language:

“Dark Next.js blog: oklch deep-black bg, Instrument Serif headings, inter UI, iA Writer Quattro prose, cool muted blue-gray tones, pressed-glass inset button shadows (white top + dark bottom), no colour accents”

Generated by Sparkbites — extracted from live CSS analysis