---
title: "Metalab design system"
variant: extended
source: https://www.metalab.com/
captured_at: 2026-10-12
theme: light
industry: agency
generator: Design DNA (https://four.wiralomi.com/style/metalab-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Metalab · Design System

> Quiet typography against a cinematic dark canvas.

**Theme:** light · **Industry:** agency · **Source:** https://www.metalab.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Metalab opens with a full-bleed, dark cinematic image, placing a refined serif headline over the visual. Compact navigation and client-name pills sit around the edges, keeping the page expressive while its controls remain understated.

## North star

Let one immersive dark image carry the atmosphere, then keep typography and controls crisp, sparse, and secondary.

## Overview

The page is anchored by a black canvas (#000000), with white (#ffffff) typography providing crisp contrast rather than relying on a broad colour palette. The image introduces vivid violet and cool highlights, but these belong to the cinematic hero artwork rather than the measured brand palette. A large, high-contrast PP Eiko serif headline is the focal point; Basis Grotesque Pro handles the compact navigation, client labels, and supporting copy. The layout uses a full-bleed visual as one continuous field, with small controls aligned to the perimeter and a short supporting paragraph placed in the upper-right area. A vertical list of rounded client links runs down the left, balancing the centered-lower headline. Dark charcoal (#252525) is reserved for pill controls, keeping interface elements legible without competing with the image. The result depends on restrained UI, strong typographic contrast, and generous visual openness.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Headlines, navigation, client labels, and supporting copy over the dark hero. |
| Midnight Canvas | `#000000` | `--color-midnight-canvas` | surface | Primary page canvas and dark field behind the full-bleed hero visual. |
| Soft Charcoal | `#252525` | `--color-soft-charcoal` | surface | Rounded dark pill backgrounds for client links and menu controls. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#000000` (Midnight Canvas) · `--color-surface-2` → `#252525` (Soft Charcoal) · `--color-text` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#252525` | 15.33:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Basis Grotesque Pro | `--font-body` | webfont | 400, 350 | Navigation, client-name pills, and supporting body copy. | Inter |
| PP Eiko | `--font-display` | webfont | 240 | Oversized hero headline. | Cormorant Garamond |

- **Basis Grotesque Pro:** Use restrained regular or light weights, compact sizing, slightly tight tracking, and sentence case.
- **PP Eiko:** Use a delicate, high-contrast serif with tight tracking and a light display weight.

### Type scale — Custom (ratio ≈ 5.5, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 88px | 240 | 1 | -0.02em | — | PP Eiko | Large two-line hero statement, centered in the lower portion. |
| body | 16px | 400 | 1.4 | -0.01em | — | Basis Grotesque Pro | Short introductory paragraph positioned in the upper-right. |
| caption | 12px | 350 | 1.2 | -0.01em | — | Basis Grotesque Pro | Compact utility or metadata text where needed. |
| nav | 12px | 350 | 1.2 | -0.01em | — | Basis Grotesque Pro | Small menu label and discreet top-edge navigation. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 3, 8, 16, 24 px.
- Section rhythm — · element gap 8px · card padding — · max content width —.

Treat the hero as a single full-bleed canvas rather than a conventional content container. Place compact navigation near the upper corners, the brand mark at top center, and the short introduction in the upper-right quadrant. A vertical stack of pill-shaped client links hugs the left edge. Position the large two-line display headline near the lower center. Preserve ample negative space between these elements; measurements do not establish a fixed page width or section gap.

## Shape & elevation

- Radius: button `9999px` · nav `9999px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s ease` on interactive elements.

Keep the UI mostly flat: the measured palette shows no shadows or gradients, and no reliable border colour. Separate controls from the image with solid charcoal pill fills and white labels. The artwork itself supplies depth through highlights, reflections, and dark negative space rather than interface layering.

## Imagery

Use immersive, full-bleed abstract imagery with a glossy, sculptural feel and dramatic black, violet, and cool highlights. Frame it edge to edge as the hero’s atmosphere, allowing the headline and interface labels to sit directly over it. Treat violet tones as image content, not as measured interface colours.

## Components

### Top menu pill

A compact rounded dark control near the top-left, with a small white Basis Grotesque Pro label.

### Client link stack

A vertical list of rounded charcoal pills on the left, using white client names and restrained spacing.

### Brand mark

A small white Metalab wordmark centered along the top edge.

### Hero headline

A large, delicate PP Eiko serif statement split across two lines and placed over the lower-central image.

### Introductory copy

A short white paragraph in a compact sans-serif, positioned in the upper-right portion of the hero.

### Utility status

Small location or time text at the top-right, paired with a discreet circular icon control.

### Measured component styles

- **Primary button** (“Robinhood”): background #252525 · text #ffffff · border 1px solid · radius 50px · padding 0px 16px · 350 16px Basis Grotesque Pro
- **Navigation item** (“Menu”): transparent background · text #ffffff · radius 0px · padding 0px · 350 12px Basis Grotesque Pro

## Do

- Use black as the dominant page canvas.
- Keep the hero visual edge-to-edge.
- Reserve the serif display face for the main statement.
- Use compact sans-serif text for interface labels.
- Place controls around the hero perimeter.
- Keep client links as rounded dark pills.

## Don't

- Do not introduce unmeasured brand accent colours.
- Do not turn image violet into an interface colour.
- Do not crowd the headline with supporting content.
- Do not add prominent shadows or decorative borders.
- Do not replace the hero with a card-based layout.
- Do not make navigation visually louder than the headline.

## Agent prompt

Build a new page using Metalab’s cinematic, editorial visual language. Use Midnight Canvas (#000000) for the dominant background and Gallery White (#ffffff) for text; reserve Soft Charcoal (#252525) for discreet pill controls. Create one immersive full-bleed image area, with any violet or reflective hues contained in the artwork rather than used as interface accents. Set the main statement in a refined, high-contrast serif similar to PP Eiko, and use a clean grotesque sans-serif similar to Basis Grotesque Pro for navigation and supporting copy. Keep the headline prominent but surrounded by negative space. Position compact utility navigation at the edges, and use small rounded client or category links. Avoid heavy borders, shadows, dense grids, and decorative UI that competes with the image.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed dark hero with edge-positioned navigation, left-side client pills, upper-right copy, and lower-centered headline. | perimeter navigation, client work shortcuts, brand identification | full-bleed imagery, serif display headline, rounded charcoal pills, high-contrast white text |

## Source CSS custom properties (selected)

```css
--border-radius: 0.8rem;
--border-radius-lg: 1.6rem;
--video-icon-color: #bababa;
--fg: #fff;
--fg-invert: #000;
--text-bold: #fff;
--text-bold-invert: #000;
--text-regular: #cac5ca;
--text-regular-invert: #313033;
--text-subtle: #79767a;
--text-subtle-invert: #605d62;
--text-error: #ff6060;
--text-error-invert: #b60000;
--border-bold: #fff;
--border-bold-invert: #000;
--border-highlight: #584dff;
--border-highlight-invert: #584dff;
--border-subtle: #313033;
--border-subtle-invert: #c7c7c7;
--border-error: #ff6060;
--border-error-invert: #b60000;
--button-bg: hsla(0,0%,73%,.2);
--button-bg-invert: hsla(0,0%,73%,.2);
--bg: #000;
--bg-subtle: #171717;
--bg-subtle-invert: #edf1f5;
--bg-invert: #fff;
--bg-highlight: #584dff;
--bg-highlight-invert: #584dff;
--swiper-theme-color: #007aff;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/metalab-com