# Quentinhocde · Design system migration spec

> Source: https://quentinhocde.com  ·  Curated by OpenDesign  ·  en

> This site is a perfect example of brutalist, typography-driven design where the layout and font choices carry all the visual weight.

## 1. Identity DNA

This design system operates as a modern, brutalist poster for a creative technologist, where typography alone constructs the entire visual hierarchy. Like a well-designed building, its structure is exposed—the massive letterforms and stark contrast are the architecture itself, not applied decoration.

**One-liner:** A high-contrast, typography-led portfolio site for an interactive developer.
**Keywords:** minimal · typographic · craft-focused · developer · interactive
**Analogy:** A digital portfolio that acts as a modern, brutalist poster for a creative technologist.

## 2. Color

The palette is a deliberate absence, using only pure black and pure white to create maximum contrast. This strict monochrome approach forces the typographic scale and weight to do all the work of establishing visual hierarchy.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--ink` | `#FFFFFF` | body text |
| `--muted` | `#FFFFFF` | placeholder |
| `--line` | `rgba(255,255,255,1.0)` | divider |

**Color principle:** Strict monochrome with no accent colors, relying entirely on typography scale and weight for hierarchy.

The principle is clarity through restriction: when color is removed, form and weight become the primary communicators.

## 3. Typography

The typographic voice is bold and structural, built on a geometric sans-serif for display and a clean grotesque-sans for body text. The category choices are deliberate—these are typefaces of construction, not ornamentation.

- **Display:** geometric-sans
- **Body:** grotesque-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display-xl | 144px | 1.04 | 700 | -4.32px | Main hero title and primary statements |
| display-lg | 97px | 1.04 | 700 | -2.916px | Secondary hero lines and large typographic elements |
| body | 16px | 1.2 | 400 | normal | Body text, navigation, and supporting details |
| caption | 10px | 1.15 | 400 | normal | Small utility text and micro-labels |

**Type rules:**
- Use tight, negative letter-spacing for large display text to create a compact, impactful look.
- Uppercase is used extensively for display text and navigation links to maintain a structured, brutalist feel.
- Body text should remain at a standard 16px for legibility against the complex background.

## 4. Spacing

Spacing follows a strict 4px base rhythm, creating a tight, mechanical cadence throughout the layout.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 20 / 24 / 32 / 48 / 64 px
- **Rhythm:** A 4px base scale is used for all spacing, with 12px and 20px acting as primary gutters for internal component padding.

## 5. Surfaces

Surfaces are defined by absence, not addition. Separation is achieved entirely through spatial positioning and typographic scale, with no visible borders or shadows to interrupt the immersive field.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Borders:** No visible borders; separation is achieved through spatial positioning and typography.

## 6. Layout

The layout skeleton is a full-viewport immersive field, dominated by a massive, single-column typographic block that overlaps a complex textured background. A fixed top navigation bar provides the only structural anchor within the flexible, bleeding grid.

- **Grid:** 4 columns, gutter 20px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** A full-bleed immersive layout with a complex background, featuring a fixed top navigation bar and content distributed across a flexible grid.

## 7. Motion & Interaction

Motion is treated as a professional refinement, not a spectacle. All interactive feedback uses a consistent 0.3s cubic-bezier curve, creating smooth, predictable transitions on text transforms and background shifts.

- **Durations:** micro 0ms · small 300ms · medium 800ms
- **Easing:** `cubic-bezier(0.645, 0.045, 0.355, 1)`
- **Patterns:**
  - Transform and background-size transitions with slight delays are applied to interactive elements and background components.
  - Subtle, continuous motion is implied by the shifting nature of the background texture across different states.

- **Hover:** Interactive elements use 'cursor: pointer' to indicate clickability, with transform transitions providing subtle feedback.
- **Click:** Standard pointer events with immediate visual state changes via CSS transitions.
- **Transition:** All interactive transitions use a 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) curve for a smooth, professional feel.
- **Keyboard:** Standard focus states are expected but not explicitly shown in the provided static screenshot.

## 8. Voice & Don'ts

The editorial voice is direct and confident, focusing on craft and technical precision. Headlines are large, uppercase, and heavily weighted statements; navigation is handled through simple, unadorned text links.

- **Tone:** Professional, direct, and confident, focusing on craft and technical skill.
- **Headline style:** Large, uppercase, heavily weighted typographic statements that serve as the primary focal point.
- **CTA style:** Simple, unadorned text links, often using external link icons to denote navigation away from the current page.
- **Avoid:** Avoid using colored accents or gradients. / Avoid using decorative or script typefaces. / Avoid traditional card-based UI components with borders or shadows. / Avoid using large amounts of padding or whitespace that breaks the immersive feel. / Avoid using standard button components with background fills. / Avoid using small, understated typography for primary statements.

### Don'ts
- ❌ Don't introduce a third color for accents — screenshot shows a strictly monochrome white-on-black palette.
- ❌ Don't use wide letter-spacing on large text — screenshot shows tight, negative letter-spacing for a dense, brutalist look.
- ❌ Don't use a serif or script typeface for display text — screenshot shows a geometric sans-serif for all major headings.
- ❌ Don't apply borders, shadows, or background colors to interactive elements — screenshot shows plain text links.
- ❌ Don't use traditional button components — screenshot shows uppercase text links with pointer cursors instead.
- ❌ Don't use a multi-column grid for the main hero statement — screenshot shows a massive, single-column typographic block.

The system deliberately rejects accent colors, decorative typography, and traditional UI components like bordered buttons or shadowed cards.

## System Prompt (paste into AI tool)

```
A portfolio site for an interactive developer using a strict monochrome palette (#000000 background, #FFFFFF text) and bold, brutalist typography. The design relies on a massive, uppercase display font (categorized as geometric-sans) paired with a clean grotesque-sans for body text. The layout is immersive and full-bleed, avoiding traditional UI components like cards or colored buttons. Interaction feedback is provided through smooth 0.3s cubic-bezier transitions. Critical constraints: never use accent colors, never use wide letter-spacing on large text, and never use traditional bordered buttons.
```