# Metalab · Design system migration spec

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

> A masterclass in using dramatic typography and abstract imagery to create a premium, high-impact agency presence without relying on color.

## 1. Identity DNA

The system is conceived as a high-end digital design studio, a space defined by sophisticated darkness and bold, confident expression. Its identity is built on the contrast between immersive shadow and sharp, typographic light.

**One-liner:** A premium design agency site combining high-contrast editorial typography with abstract, glossy 3D visuals.
**Keywords:** premium · bold · editorial · sophisticated
**Analogy:** A high-end design studio's digital portfolio.

## 2. Color

The palette is a study in high contrast, built on a deep, near-black foundation that allows pure white text to command maximum legibility. A single vibrant purple accent is reserved for emphasis, creating focal points within the otherwise monochromatic field.

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

**Color principle:** High-contrast monochrome base with subtle gray accents, allowing the dramatic imagery to take center stage.

This approach prioritizes legibility and focus, using a dark canvas to make content and interaction the primary visual events.

## 3. Typography

The typographic voice is split between two distinct roles: a high-contrast transitional serif for impactful, elegant headlines and a clean humanist sans-serif for clear, readable body copy.

- **Display:** didone-serif
- **Body:** grotesque-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 88px | 1.1 | 240 | -1.76px | Main hero headline |
| body | 16px | 1.4 | 400 | -0.16px | Body text and navigation |

## 4. Spacing

All spatial relationships are governed by a consistent 4px base grid, establishing a precise and orderly rhythm throughout the interface.

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

## 5. Surfaces

Surfaces are defined by depth through absence rather than decoration. Separation is achieved with thin, subtle borders, often as a single horizontal rule, maintaining a sharp, geometric aesthetic.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Borders:** 1px solid rgba(255, 255, 255, 0.1)

## 6. Layout

The structural skeleton is asymmetric, anchored by a dominant, left-aligned navigation column. This vertical anchor balances against a central, full-bleed content area designed for immersive visual presentation.

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

**Skeleton:** Asymmetric, editorial layout with floating navigation elements.

## 7. Motion & Interaction

Motion is intended to be smooth, subtle, and purposeful. Transitions for hover states and navigation are refined, enhancing the premium feel without introducing distraction.

- **Durations:** micro 200ms · small 300ms · medium 400ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - subtle opacity transitions on hover
  - smooth background color changes

- **Hover:** Subtle opacity changes on navigation elements.
- **Click:** Standard link navigation.
- **Transition:** Smooth transitions for opacity, background-color, and color properties.
- **Keyboard:** Standard tab navigation.

## 8. Voice & Don'ts

The editorial voice is confident, professional, and authoritative, yet remains approachable. Language is bold and declarative, mirroring the system's visual directness.

- **Tone:** Confident, authoritative, and concise.
- **Headline style:** Large, elegant, and minimal.
- **CTA style:** Subtle and integrated into the navigation structure.
- **Avoid:** Cluttered interfaces / Loud or primary color accents / Overly technical jargon

### Don'ts
- ❌ Don't use bright or saturated accent colors — screenshot shows a strictly monochromatic palette.
- ❌ Don't use rounded geometric sans-serif fonts for display — screenshot shows a sharp, high-contrast serif for headlines.
- ❌ Don't create a dense, grid-heavy layout — screenshot shows an open, asymmetric composition.
- ❌ Don't use solid, opaque background colors for buttons — screenshot shows semi-transparent dark pills.
- ❌ Don't use large drop shadows or 3D extrusions on UI elements — screenshot shows flat, translucent surfaces.
- ❌ Don't use a standard top-aligned navigation bar — screenshot shows a floating menu pill in the top-left corner.

The system deliberately avoids cluttered layouts, low-contrast text, and generic imagery in favor of a focused, high-quality presentation.

## System Prompt (paste into AI tool)

```
Design DNA for Metalab, a premium design agency. The site uses a high-contrast monochromatic palette with a pure black background (#000000) and white text (#FFFFFF), accented by subtle grays (#C7C7C7). Typography is defined by a large, elegant didone-serif for display headlines and a clean grotesque-sans for body text. The layout is open and editorial, prioritizing dramatic visual impact. Critical constraints: Do not introduce any bright accent colors; keep the palette strictly monochromatic. Do not use rounded, friendly sans-serif fonts for headlines; maintain the sharp serif contrast. Avoid dense, complex grids; preserve the spacious, asymmetric composition.
```
