# Bastienallard · Design system migration spec

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

> This site is worth including as a prime example of a minimalist, typography-driven portfolio that prioritizes content and clarity over visual noise.

## 1. Identity DNA

This design system functions as a carefully constructed editorial layout, where every element exists to showcase work rather than itself. The identity is defined by restraint: a monochromatic palette and geometric typography create a clean, high-contrast framework where content becomes the sole visual variable.

**One-liner:** A minimalist personal portfolio for a Senior Art Director, featuring a monochromatic palette and strong typographic presence.
**Keywords:** Minimalist · Logical · Beautiful · Effortless · Studio
**Analogy:** A clean, high-contrast editorial layout designed to showcase digital design expertise.

## 2. Color

Color operates as a non-entity, a strict monochrome system of black, white, and a single muted gray that forces visual hierarchy onto typography and photography alone. The absence of accent colors is the system's core principle, ensuring no hue competes with the portfolio's imagery.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `rgba(0,0,0,0.8)` | secondary text |
| `--muted` | `#7F7F7F` | placeholder |
| `--line` | `rgba(0,0,0,0.8)` | divider |

**Color principle:** Extreme high-contrast monochrome with no accent colors, relying on typography and photography for visual hierarchy.

The principle is absolute: color serves only as a neutral field for content, never as a decorative or emphatic element.

## 3. Typography

The typographic voice is confident and geometric, built entirely on Diatype Variable for its clean, architectural lines. The scale is direct, using tight letter-spacing on display sizes to create a sense of focused, editorial impact rather than decorative flair.

- **Display:** geometric-sans
- **Body:** geometric-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 540 | -1px | Large project titles |
| body | 16px | 1.5 | 540 | -0.03px | General text and navigation |

**Type rules:**
- Use Diatype Variable for all UI text
- Maintain tight letter-spacing on headlines
- Use system fonts as fallbacks only

## 4. Spacing

Rhythm is established through a strict 4px baseline grid and generous white space, creating a deliberate, unhurried pace across the interface.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous white space with a strict 4px baseline grid.

## 5. Surfaces

Depth is communicated through structure rather than illusion. Flat surfaces are separated by subtle 1px borders, a deliberate choice that maintains the design's sharp, architectural integrity.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Borders:** Subtle 1px borders using rgba(0,0,0,0.8) for separation.

## 6. Layout

The skeletal structure is a spacious, editorial column with a clear three-column footer for organizational clarity. The wide main container provides a generous stage for project presentations, with layout serving content legibility above all.

- **Container max:** 1440px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** A clean three-column footer layout with a wide, spacious main content area.

## 7. Motion & Interaction

Motion philosophy is one of quiet efficiency: smooth, consistent transitions on all interactive elements maintain an effortless flow. The system deliberately avoids complex animations, using subtle opacity changes and cursor feedback to signal interactivity without drawing attention to itself.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Smooth transitions on all interactive elements
  - Subtle cursor changes on hover

- **Hover:** Subtle opacity changes or color inversions on links.
- **Click:** Immediate feedback with no heavy animation.
- **Transition:** Consistent 'all' transitions across all elements.
- **Keyboard:** Standard focus states for accessibility.

## 8. Voice & Don'ts

The editorial voice is professional and understated, with headlines that are bold and direct, and calls-to-action that guide with subtlety. This is a system that communicates expertise through clarity and confident restraint, not through volume.

- **Tone:** Professional, confident, and understated.
- **Headline style:** Bold, direct, and highly legible.
- **CTA style:** Subtle text links that guide rather than shout.
- **Avoid:** Excessive decoration / Loud colors / Complex animations

### Don'ts
- ❌ Don't use a dark mode — the screenshot shows a pure white background.
- ❌ Don't add bright accent colors — the palette is strictly monochrome.
- ❌ Don't use decorative serif fonts — the screenshot shows a geometric sans-serif throughout.
- ❌ Don't add heavy drop shadows — the surfaces are flat and rely on borders or typography for depth.
- ❌ Don't clutter the UI with many colors — it uses a strict black, white, and gray palette.
- ❌ Don't use rounded corners on everything — the design is sharp and architectural.

The design deliberately excludes dark mode, bright accent colors, decorative serifs, and heavy shadows, committing fully to its minimalist, typographic core.

## System Prompt (paste into AI tool)

```
This is a minimalist portfolio for a Senior Art Director, featuring a monochromatic palette (black ink #000000, white background #FFFFFF, muted gray #7F7F7F). The typography is a geometric sans-serif (Diatype Variable) with tight letter-spacing on display sizes. The layout is spacious with generous white space and a clear editorial feel. Critical don'ts: Don't introduce bright accent colors, don't use decorative serifs, and don't clutter the interface with heavy shadows or complex UI components. The design relies on strong photography and bold typography to create impact.
```