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

# Numbered · Design System

> A quiet dark canvas for expressive creative work.

**Theme:** dark · **Industry:** agency · **Source:** https://numbered.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._

Numbered presents its creative agency through concise statements, expansive dark sections, and a scrolling portfolio of campaign imagery. Restrained typography and a small palette let the photography carry most of the visual impact.

## North star

Keep the interface quiet and spacious so oversized white statements and campaign photography command attention.

## Overview

The page is built on a near-black canvas (#0e0e0e), with white type (#ffffff) providing clear contrast and a muted gray (#4f4f4f) reserved for fine footer rules. A warm muted brown (#bc9873) appears as a large, restrained color field near the end of the page; the colorful campaign imagery remains photographic content rather than a broader interface palette. Aktiv Web sans-serif gives headings a clean, contemporary voice, while uppercase labels and navigation provide compact editorial details. Large centered statements alternate with full-width campaign photographs and image tiles, creating a portfolio rhythm rather than a conventional service-card layout. Generous dark intervals separate content groups, and image captions sit directly over or beside the work in small white type. The page stays visually flat: no visible shadows, rounded cards, or decorative gradients. A large wordmark anchors the footer and adds a distinctive typographic finish.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Headings, navigation, captions, and footer text on the dark canvas. |
| Studio Black | `#0e0e0e` | `--color-studio-black` | brand | Dominant page canvas and the background for statement-led sections. |
| Graphite Line | `#4f4f4f` | `--color-graphite-line` | semantic | Subtle footer hairline; keep it secondary to white text. |
| Muted Ochre | `#bc9873` | `--color-muted-ochre` | accent | Broad warm section field near the footer, not a general-purpose button color. |

### Semantic aliases

`--color-canvas` → `#0e0e0e` (Studio Black) · `--color-surface` → `#bc9873` (Muted Ochre) · `--color-text` → `#ffffff` (Gallery White) · `--color-border` → `#4f4f4f` (Graphite Line) · `--color-accent` → `#bc9873` (Muted Ochre)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#0e0e0e` | 19.3:1 | AAA |
| `#ffffff` | `#bc9873` | 2.67:1 | fail |
| `#bc9873` | `#0e0e0e` | 7.24:1 | AAA |

### Gradients

- `linear-gradient(90deg, rgb(255, 255, 255) 0px, rgb(255, 255, 255))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| aktiv-web | `--font-body` | webfont | 400, 700 | Page-wide sans-serif for display statements, section headings, labels, navigation, and body copy. | Inter |

- **aktiv-web:** Use regular-weight sentence-case display copy; small navigation and captions are uppercase, with occasional bold contact emphasis.

### Type scale — Custom (ratio ≈ 1.915, base 15px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 55px | 400 | 1 | 0 | — | aktiv-web | Large opening statement and prominent editorial copy. |
| h2 | 25px | 400 | 1.2 | 0 | uppercase | aktiv-web | Uppercase section headings, including the case-studies label. |
| body | 15px | 400 | 1.5 | 0 | uppercase | aktiv-web | Uppercase service, project, and supporting copy. |
| caption | 13px | 400 | 2 | 0 | uppercase | aktiv-web | Small uppercase project labels and compact footer details. |
| nav | 13px | 400 | 2 | 0 | uppercase | aktiv-web | Uppercase navigation and contact links. |

## Spacing & layout

- Base unit **1px**, density **spacious**.
- Scale (most used values): 3, 20, 35, 50, 60, 80, 120, 180 px.
- Section rhythm 180px · element gap — · card padding — · max content width —.

Use broad full-width bands on a dark page, alternating centered text blocks with expansive portfolio imagery. The portfolio includes paired side-by-side images and larger single-image moments; captions stay close to their relevant work. Keep content alignment varied but deliberate: centered statements contrast with small left-aligned labels. The measured spacing scale is spacious, with substantial vertical pauses between major blocks. Avoid imposing a fixed card grid or max-width value not established by the reference.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.6s cubic-bezier(0.77, 0, 0.175, 1)` on interactive elements.

Keep surfaces flat and avoid drop shadows, rounded cards, or floating UI. Separation comes from generous dark space, changes in image content, and occasional full-width color fields. Use the measured graphite only for subtle footer hairlines; do not add decorative borders around portfolio images.

## Imagery

Use polished campaign photography as the main visual content, including fashion, lifestyle, product, and brand work. Images appear as large edge-to-edge panels or paired tiles with tight crops and natural photographic color. Place small white uppercase project names and service descriptors over image corners. Some sections have very little visible imagery, preserving long stretches of dark canvas.

## Components

### Contact navigation

Compact uppercase white contact links sit against the dark canvas; one contact treatment is visibly heavier than the surrounding navigation.

### Editorial statement

Large regular sans-serif copy forms centered or left-aligned blocks, with deliberate line breaks and ample dark space around it.

### Project image tile

Use large photographic crops, sometimes paired side by side, with compact uppercase white project and service labels near the image edge.

### Case-studies heading

A concise uppercase heading introduces the portfolio, with a small view-all link positioned separately.

### Warm color band

A broad muted-ochre (#bc9873) section creates a rare color interruption before the dark footer.

### Footer wordmark

A very large white Numbered wordmark dominates the footer, above compact navigation, contact, and subscription details.

### Measured component styles

- **Link** (“VACHERON CONSTANTIN CAMPAIGN GENEVA”): transparent background · text #ffffff · radius 0px · padding 0px · 400 1px aktiv-web
- **Navigation item** (“CONTACT@NUMBERED.COM”): transparent background · text #ffffff · radius 0px · padding 0px 0px 3px 0px · 400 13px aktiv-web · uppercase

## Do

- Use #0e0e0e as the dominant canvas.
- Set primary text and project labels in #ffffff.
- Let large campaign photography define portfolio sections.
- Separate content with generous dark intervals.
- Keep project captions compact and uppercase.
- Reserve #bc9873 for a deliberate broad section field.

## Don't

- Do not introduce a bright multi-color interface palette.
- Do not turn portfolio work into rounded cards.
- Do not add shadows or gradients for depth.
- Do not crowd the page with persistent UI controls.
- Do not apply the warm accent to every link or button.
- Do not treat colors inside campaign photographs as interface tokens.

## Agent prompt

Build a new agency page with Numbered’s restrained editorial character. Use Studio Black (#0e0e0e) as the dominant canvas and Gallery White (#ffffff) for clear, high-contrast typography. Set the page in a clean Aktiv Web-like sans-serif, using generous regular-weight statements and compact uppercase navigation, captions, and project labels. Structure the page as broad sections with spacious pauses, alternating concise text blocks and large campaign photographs; use paired image tiles where useful, with captions close to the images. Keep surfaces flat, without shadows or rounded cards. Graphite Line (#4f4f4f) may appear as a subtle footer divider. Reserve Muted Ochre (#bc9873) for one intentional large color field rather than repeated controls. Let the imagery, not interface decoration, provide visual richness.

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