# Milieu Grotesque · Design system migration spec

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

> This site is worth including as a masterclass in professional typography-driven design, balancing bold creative expression with functional e-commerce.

## 1. Identity DNA

The Milieu Grotesque design system operates with the focused curation of a high-end gallery for type designers. Every component, from the broad layout to the subtle shadow, is selected to frame the typography and the foundry's work, not to compete with it. The result is an interface that feels both authoritative and cleanly functional.

**One-liner:** A curated platform for premium typefaces and design foundries.
**Keywords:** Typography · Foundry · Design · Fonts · Curation
**Analogy:** A high-end gallery for type designers.

## 2. Color

The palette is deliberately restrained, built on deep ink neutrals and crisp white for maximum contrast and legibility. A single, focused blue accent marks all interactive elements, creating a clear and consistent visual pathway through the content.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F4F4F4` | card background |
| `--ink` | `#1E242C` | body text |
| `--ink-soft` | `#576579` | secondary text |
| `--muted` | `#313945` | placeholder |
| `--accent` | `#1A73E8` | single accent |
| `--line` | `rgba(30,36,44,1.0)` | divider |

**Color principle:** High contrast dark text on clean light surfaces, with a strong blue accent for interactive elements.

The principle is disciplined simplicity: a high-contrast foundation that allows the featured typefaces and foundry work to command attention.

## 3. Typography

The typographic voice is built from **grotesque and humanist sans-serif** categories, selected for their professional clarity and modern aesthetic. The scale is used primarily for bold, clean, and often oversized headlines that showcase the fonts, set against a default body for sustained reading.

- **Display:** grotesque-sans
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 500 | -1px | Primary brand heading |
| heading | 26px | 1.2 | 400 | normal | Section headings |
| body | 13px | 1.2 | 400 | normal | Default body text |

## 4. Spacing

Spacing follows a strict musical rhythm, built on consistent multiples of 4px to create a predictable and breathable structure across all components and layouts.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent use of multiples of 4px for padding and margins.

## 5. Surfaces

Depth is handled with extreme restraint, using two specific shadow levels primarily for subtle elevation on key elements like cards. Borders are thin, solid, and consistently rendered in the primary ink color, defining edges without visual noise.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - rgba(0, 0, 0, 0.06) 0px 1px 6px 0px
  - rgba(0, 0, 0, 0.16) 0px 2px 32px 0px
- **Borders:** Solid 1px borders using the primary ink color.

## 6. Layout

The structural skeleton begins with full-width, dramatic photographic heroes that establish scale and mood. This transitions into structured grid layouts for content cards, maintaining generous whitespace to let the imagery and typography breathe.

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

**Skeleton:** Full-width hero sections transitioning into structured grid layouts for content cards.

## 7. Motion & Interaction

Motion philosophy favors smooth, understated transitions that guide focus rather than distract. Broad 0.5s durations are applied to major layout shifts, while interactive elements receive immediate, subtle feedback through color or opacity changes on hover.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Smooth transitions on all interactive elements
  - 0.5s duration for broader layout shifts

- **Hover:** Subtle color shifts or opacity changes on interactive elements.
- **Click:** Immediate feedback with no significant scale transform.
- **Transition:** Smooth 0.5s transitions applied broadly across the UI.
- **Keyboard:** Standard focus states for navigation.

## 8. Voice & Don'ts

The editorial voice is professional, authoritative, and creatively sophisticated, with headlines that are bold and clean. Direct, action-oriented CTAs use strong color contrast, while the overall tone avoids playful whimsy and unnecessary jargon.

- **Tone:** Professional, authoritative, and creatively sophisticated.
- **Headline style:** Bold, clean, and often oversized to showcase the typefaces.
- **CTA style:** Direct and action-oriented, using strong color contrast.
- **Avoid:** Playful or whimsical language / Overly complex jargon / Cluttered layouts / Unnecessary decorative elements

### Don'ts
- ❌ don't use rounded, friendly icons — screenshot shows sharp, geometric UI elements
- ❌ don't apply drop shadows everywhere — screenshot shows mostly flat, clean surfaces
- ❌ don't use a multi-color rainbow palette — screenshot shows a disciplined blue-and-dark-neutral scheme
- ❌ don't use script or decorative fonts for UI — screenshot shows strictly functional sans-serifs
- ❌ don't use low-contrast gray text — screenshot shows high-contrast dark ink for readability
- ❌ don't use cluttered backgrounds behind text — screenshot shows clean white or solid dark sections

The system deliberately avoids decorative clutter, whimsical icons, and multi-color palettes to maintain its focused, gallery-like presentation.

## System Prompt (paste into AI tool)

```
A sophisticated type foundry marketplace with a clean, editorial aesthetic. Key colors are ink #1E242C on white #FFFFFF with a blue accent #1A73E8. Typography utilizes grotesque and humanist sans-serif categories. Critical donts: avoid whimsical icons, minimize drop shadows, avoid multi-color palettes, strictly use functional sans-serifs, ensure high-contrast text, and maintain clean backgrounds for legibility.
```
