# 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*