---
version: alpha
name: MetaLab
description: Studio-grade editorial minimalism — near-black ink on warm off-white paper, oversized tight-tracked display headlines, restrained monochrome chrome with a single confident accent, and gallery-level whitespace that lets the work do the talking.
colors:
  # Canvas + ink
  background: "#f4f2ee"
  surface: "#ffffff"
  surface-dark: "#0e0e0e"
  ink: "#111111"
  ink-pure: "#000000"
  ink-secondary: "#5c5a55"
  ink-muted: "#8c8a84"
  on-dark: "#f4f2ee"

  # Accent
  primary: "#111111"
  accent: "#ff4d2e"
  accent-soft: "#ffe4dc"

  # Neutral scale
  gray-900: "#1a1a1a"
  gray-700: "#3d3b37"
  gray-500: "#6b6963"
  gray-300: "#c9c6c0"
  gray-200: "#e2dfd9"
  gray-100: "#ebe9e4"

  # Lines + borders
  border: "#dcd9d2"
  border-strong: "#111111"

  # On-color
  on-primary: "#f4f2ee"
  on-accent: "#ffffff"

typography:
  display-hero:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 72px
    fontWeight: 500
    lineHeight: 1.02
    letterSpacing: -2.88px
  display:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 56px
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: -2.24px
  section-heading:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 500
    lineHeight: 1.10
    letterSpacing: -1.6px
  sub-heading:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 500
    lineHeight: 1.20
    letterSpacing: -0.84px
  card-title:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 500
    lineHeight: 1.27
    letterSpacing: -0.66px
  body-large:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: -0.2px
  body:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: -0.17px
  body-small:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0px
  eyebrow:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0.78px
  caption:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 40px
  3xl: 64px
  4xl: 96px
  5xl: 144px

rounded:
  none: 0px
  xs: 4px
  sm: 6px
  md: 10px
  lg: 16px
  xl: 24px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.on-accent}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.border-strong}"
  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.border}"
  badge:
    backgroundColor: "{colors.accent-soft}"
    textColor: "{colors.accent}"
    typography: "{typography.eyebrow}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 32px
    borderColor: "{colors.border}"
  card-work:
    backgroundColor: "{colors.gray-100}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 0px
    borderColor: "{colors.border}"
  card-dark:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    rounded: "{rounded.lg}"
    padding: 32px
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    borderColor: "{colors.ink}"
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 20px 32px
    borderColor: "{colors.border}"
  eyebrow-label:
    textColor: "{colors.ink-secondary}"
    typography: "{typography.eyebrow}"
---

# MetaLab Design System

## Overview

MetaLab presents itself the way a great design studio should — with the confidence to remove almost everything. The site is built on a warm, paper-like off-white canvas (`{colors.background}`) rather than the clinical pure white of most tech sites, giving the whole experience an editorial, printed-page warmth. Against that paper, near-black ink (`{colors.ink}`) carries oversized display headlines that are tracked tight and set in a clean grotesque sans. The result reads less like a SaaS landing page and more like the cover of a serious design quarterly.

The typographic move is the identity. Headlines run very large (up to 72px) with aggressive negative letter-spacing, so the words feel set, deliberate, and architectural. Body copy relaxes into a comfortable 17px reading size with a generous 1.6 line-height. There is a strict three-weight discipline — 400 for reading, 500 for headlines and interactive UI — and a near-total absence of bold. The studio lets size and whitespace, not weight, create hierarchy.

Color is held in reserve. The palette is overwhelmingly monochrome — paper, ink, and a graduated set of warm grays — punctuated by a single hot accent (`{colors.accent}`, a confident red-orange) that appears only on hover states, small badges, and the occasional emphasis. Because the accent is rationed so carefully, every appearance of it feels intentional. Chrome stays quiet so the case-study imagery and product work can be the loudest thing on the page.

**Key Characteristics:**
- Warm paper off-white canvas (`{colors.background}`) instead of pure white — editorial, not clinical
- Oversized display headlines (up to 72px) with aggressive negative tracking (-2.88px)
- Strict two-weight system: 400 (reading) and 500 (display + UI), almost no bold
- Monochrome warm-gray palette with a single rationed red-orange accent (`{colors.accent}`)
- Pill-shaped buttons that flip to the accent on hover
- Gallery-level whitespace — sections separated by air, not boxes
- Hairline warm borders (`{colors.border}`) instead of heavy dividers
- Dark surface panels (`{colors.surface-dark}`) for dramatic editorial contrast

## Colors

### Primary
- **Ink** (`{colors.ink}`): Primary text, headlines, primary buttons. Near-black, slightly soft.
- **Paper** (`{colors.background}`): The signature warm off-white canvas.
- **Surface White** (`{colors.surface}`): Cards and panels that need to lift off the paper.
- **Pure Black** (`{colors.ink-pure}`): Reserved for maximum-contrast moments.

### Accent
- **Studio Red** (`{colors.accent}`): The single brand accent — hover states, badges, emphasis. Rationed.
- **Accent Soft** (`{colors.accent-soft}`): Tinted background for badges and accent pills.

### Text
- **Ink Secondary** (`{colors.ink-secondary}`): Supporting copy, captions, eyebrow labels.
- **Ink Muted** (`{colors.ink-muted}`): Metadata, disabled, least-emphasis text.

### Neutral Scale
- **Gray 900** (`{colors.gray-900}`): Deep ink for high-contrast headings.
- **Gray 700** (`{colors.gray-700}`): Secondary headings, strong body.
- **Gray 500** (`{colors.gray-500}`): Muted descriptive copy.
- **Gray 300** (`{colors.gray-300}`): Subtle dividers, placeholder.
- **Gray 200** (`{colors.gray-200}`): Soft fills.
- **Gray 100** (`{colors.gray-100}`): Work-card surface tint.

### Lines & Borders
- **Border** (`{colors.border}`): Hairline warm dividers and card outlines.
- **Border Strong** (`{colors.border-strong}`): Ink outline for secondary buttons.

## Typography

### Font Family
- **Primary**: `Inter`, with fallbacks: `Helvetica Neue, Arial, sans-serif` — a clean neo-grotesque carrying the entire system.
- **Principle**: One family, two weights, size-driven hierarchy.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`, etc.).

| Token | Use |
|---|---|
| `display-hero` | 72px hero — maximum editorial impact |
| `display` | 56px secondary hero |
| `section-heading` | 40px section titles |
| `sub-heading` | 28px sub-sections |
| `card-title` | 22px work / feature card titles |
| `body-large` | 20px lead paragraphs |
| `body` | 17px standard reading text |
| `body-small` | 15px dense UI text |
| `button-ui` | 15px buttons and nav links |
| `eyebrow` | 13px tracked-out section labels |
| `caption` | 13px metadata |

### Principles
- **Size over weight**: Hierarchy comes from scale and whitespace, not heavy fonts. 500 is the max for display.
- **Compressed display**: Headlines use heavy negative tracking (-2.88px at 72px), relaxing toward 0 at body sizes.
- **Tracked-out eyebrows**: Small labels invert the logic — positive 0.78px tracking, uppercase-feel.
- **Generous reading**: Body copy at 1.6 line-height keeps long-form case studies comfortable.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, with an editorial jump to `{spacing.5xl}` (144px) for section breathing room.

### Grid & Container
- Max content width: approximately 1280px
- Hero: left-aligned or centered single column with very large top padding
- Work grid: 2-column case-study cards with full-bleed imagery
- Generous gutters; content rarely runs edge-to-edge except imagery

### Whitespace Philosophy
- **Gallery emptiness**: Sections separated by `{spacing.4xl}`–`{spacing.5xl}` of vertical air.
- **Air as structure**: Dividers are mostly whitespace; hairline `{colors.border}` lines appear only where truly needed.
- **Imagery leads**: Chrome recedes so case-study visuals dominate.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Page background, text blocks |
| Hairline (Level 1) | `1px solid {colors.border}` | Card outlines, dividers |
| Lift (Level 2) | Soft shadow on `{colors.surface}` | Floating cards, modals |
| Inversion | `{colors.surface-dark}` panel | Dramatic editorial dark sections |

**Shadow Philosophy**: Depth is minimal and earned. The system prefers contrast — paper vs. white surface, paper vs. dark panel — over stacked shadows. When shadows appear they are soft and low-opacity, never the load-bearing structure.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed imagery, dividers |
| `xs` | 4px | Tags, small chips |
| `sm` | 6px | Inputs, small controls |
| `md` | 10px | Standard cards |
| `lg` | 16px | Work cards, panels |
| `xl` | 24px | Large feature containers |
| `pill` | 9999px | Buttons, badges |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`).

### Buttons
- **`button-primary`** — Ink fill, paper text, full pill. Flips to `{colors.accent}` on hover.
- **`button-secondary`** — Paper surface, ink text, ink outline.
- **`button-ghost`** — Paper surface with hairline border for low-emphasis actions.

### Pills & Badges
- **`badge`** — Soft accent background, accent text, tracked eyebrow type.

### Cards
- **`card`** — White surface lifting off the paper, hairline border, generous 32px padding.
- **`card-work`** — Case-study card with tinted gray surface and full-bleed imagery (0 padding).
- **`card-dark`** — Inverted dark panel for editorial contrast.

### Inputs
- **`input`** — White surface, hairline border, ink focus outline.

### Navigation
- **`nav-bar`** — Paper background, ink links at 15px weight 500, hairline bottom border. Minimal and quiet.

### Distinctive Components
- **Work Grid**: 2-column case-study cards, full-bleed imagery, title + client eyebrow below.
- **Dark Editorial Panels**: Full-width `{colors.surface-dark}` sections that invert the palette for emphasis.
- **Accent-on-Hover Buttons**: The single moment the brand red appears interactively.

## Do's and Don'ts

### Do
- Use the warm paper canvas (`{colors.background}`) — never clinical pure white for the page
- Set display type very large with heavy negative tracking
- Hold weight at 500 maximum for headlines
- Ration the accent (`{colors.accent}`) — hover, badges, emphasis only
- Let whitespace carry the structure
- Use hairline warm borders instead of heavy dividers
- Use dark inverted panels for editorial drama

### Don't
- Don't introduce a second accent color — one red-orange is the whole story
- Don't use bold (700) on display or body
- Don't fill the page with boxes and shadows — air is the system
- Don't put the accent on large surfaces — it is a spark, not a wash
- Don't tighten tracking on body copy — only display compresses
- Don't use pure white as the page canvas

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, hero scales down, stacked work cards |
| Tablet | 600–1024px | 2-column work grid begins, padding expands |
| Desktop | 1024–1280px | Full layout, maximum content width |
| Large Desktop | >1280px | Centered, generous side margins |

### Touch Targets
- Pill buttons use 14px vertical / 28px horizontal padding — comfortable taps
- Nav links at 15px with adequate spacing
- Badges use 4px/12px padding

### Collapsing Strategy
- Hero: 72px → scales down, maintains proportional negative tracking
- Navigation: horizontal links → minimal menu toggle
- Work grid: 2-column → single column full-bleed
- Section spacing: 144px → ~64px on mobile

### Image Behavior
- Case-study imagery stays full-bleed at all sizes
- Dark panels maintain inversion on mobile
- Work cards keep aspect ratio, stack vertically

---

## Agent Prompt Guide

### Quick Color Reference
- Page background: Paper `{colors.background}`
- Primary CTA: Ink `{colors.ink}` (hover → `{colors.accent}`)
- Heading text: Ink `{colors.ink}`
- Body text: Ink Secondary `{colors.ink-secondary}`
- Accent: Studio Red `{colors.accent}`
- Border: hairline `{colors.border}`

### Example Component Prompts
- "Create a hero on warm paper (`{colors.background}`). Headline at 72px Inter weight 500, line-height 1.02, letter-spacing -2.88px, color `{colors.ink}`. Lead paragraph at 20px weight 400, `{colors.ink-secondary}`. Pill CTA: ink fill, paper text, hover flips to `{colors.accent}`."
- "Design a work card: tinted gray surface (`{colors.gray-100}`), full-bleed image top, 16px radius, title at 22px weight 500 letter-spacing -0.66px, client eyebrow at 13px tracked 0.78px in `{colors.ink-secondary}`."
- "Build a badge: `{colors.accent-soft}` background, `{colors.accent}` text, full pill, 4px/12px padding, 13px weight 500."
- "Create a dark editorial panel: `{colors.surface-dark}` full-width section, `{colors.on-dark}` text, 56px display heading."

### Iteration Guide
1. Start from paper, not white — warmth is the brand
2. Push display type bigger and tighter than feels comfortable
3. One accent, rationed — if red appears twice in a viewport, remove one
4. Hierarchy = size + air, never weight
5. Borders are hairlines; depth comes from paper/white/dark contrast

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by MetaLab. Brand names and trademarks belong to their respective owners.