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

# Chelsea · Design System

> Cinematic work, clear type, confident restraint.

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

Chelsea pairs full-bleed moving imagery with oversized typography and a restrained black-and-blue palette. Its homepage presents a filmmaker roster, selected work, and office contacts in a compact editorial flow.

## North star

Let cinematic media and oversized typography dominate, while using black space and Signal Blue links to keep navigation clear.

## Overview

The page is anchored by a near-total black canvas, letting full-bleed video and oversized off-white lettering carry the opening impression. Signal Blue (#4490ff) is used for roster links, small location labels, and circular controls, while warm off-white (#f4efe9) appears in the navigation and large wordmark against imagery. Neue Haas Unica Pro keeps the typography clean and direct: large, regular-weight display text contrasts with compact captions and practical contact details. The structure moves from immersive media to a two-column director roster, then a tightly arranged strip of work thumbnails and a concise contact footer. Wide black intervals separate these blocks without adding decorative panels. Thin light rules define the navigation and section boundaries. Keep imagery richly cinematic and allow its colors to vary; the measured palette and screenshot indicate that photographic colors are content, not the brand system.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Signal Blue | `#4490ff` | `--color-signal-blue` | brand | Primary link and accent color for roster names, location labels, and small circular controls. |
| Deep Canvas | `#000000` | `--color-deep-canvas` | surface | Near-universal page canvas and the background around roster, work, and footer content. |
| Warm Porcelain | `#f4efe9` | `--color-warm-porcelain` | neutral | Light navigation text, thin dividers, and oversized wordmark lettering over video. |
| Slate Trace | `#1f2937` | `--color-slate-trace` | semantic | Rare measured link color; not a defining visual color in the screenshots. |

### Semantic aliases

`--color-canvas` → `#000000` (Deep Canvas) · `--color-text` → `#4490ff` (Signal Blue) · `--color-border` → `#f4efe9` (Warm Porcelain) · `--color-accent` → `#4490ff` (Signal Blue) · `--color-on-accent` → `#000000` (Deep Canvas)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#4490ff` | `#000000` | 6.68:1 | AA |
| `#4490ff` | `#000000` | 6.68:1 | AA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Neue Haas Unica Pro | `--font-body` | webfont | 400, 700 | All page typography, from navigation and oversized display lettering to roster links and tiny project captions. | Inter |

- **Neue Haas Unica Pro:** Use regular weight for most text; reserve bold for occasional emphasis. Case is mixed and natural, with no systematic tracking.

### Type scale — Custom (ratio ≈ 1.852, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48px | 400 | 1 | 0 | — | Neue Haas Unica Pro | Oversized wordmark or lead display text over the opening media. |
| h2 | 32px | 400 | 1.12 | 0 | — | Neue Haas Unica Pro | Section-level display headings and large editorial statements. |
| body | 14px | 400 | 1.43 | 0 | — | Neue Haas Unica Pro | Director roster, office details, and general supporting content. |
| caption | 12px | 400 | 1.1 | 0 | — | Neue Haas Unica Pro | Compact project labels and secondary footer information. |
| button | 32px | 400 | 1.12 | 0 | — | Neue Haas Unica Pro | Large, plain-text action or location control. |
| nav | 32px | 400 | 1.12 | 0 | — | Neue Haas Unica Pro | Large top-level navigation labels over the hero. |
| link | 48px | 400 | 1 | 0 | — | Neue Haas Unica Pro | Prominent blue director names and other primary text links. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 8, 12, 16, 32, 64, 80, 96 px.
- Section rhythm 32px · element gap 16px · card padding — · max content width 1376px.

The opening viewport is a full-bleed video stage with navigation overlaid along its top edge and the wordmark anchored over the footage. Subsequent content sits on a black canvas with a measured page max width of 1376px. The roster uses two columns; selected work is arranged as a dense, multi-column thumbnail strip. A single-column footer gathers social links, office contacts, and legal details. Spacing moves between compact internal groupings and generous black section intervals, with thin rules marking transitions.

## Shape & elevation

- Radius: button `50%`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s cubic-bezier(0.57, 0.06, 0.05, 0.95)` on interactive elements.

The interface is predominantly flat: the black canvas separates content rather than cards, and measured data reports no shadows. Use thin light rules for navigation and section boundaries. Place navigation and display type directly over video when needed, with contrast coming from the footage and lettering rather than elevated containers.

## Imagery

Use full-bleed, cinematic video for the opening, with active scenes and natural motion rather than a static product render. The selected-work area uses a horizontal-feeling strip of film and campaign thumbnails with tiny captions. Imagery is edge-to-edge or tightly cropped; its warm, varied photographic colors are content rather than additions to the measured brand palette.

## Components

### Overlay navigation

Large, regular-weight light labels sit across the top of the full-bleed hero; a thin warm off-white rule separates navigation from the footage.

### Roster links

Prominent Signal Blue (#4490ff) names form the main content column, balanced by a compact US/INT'L location selector.

### Circular accent control

Small blue circular controls punctuate media and footer areas; measured buttons use a 50% radius.

### Selected-work strip

A dense row of campaign thumbnails with small blue project and filmmaker captions, set directly on black.

### Contact footer

A compact, multi-column directory groups social links, regional representation, office details, and legal links above a fine divider.

### Oversized wordmark

Large warm off-white lettering overlays the hero footage, cropped and stacked as a bold image-led brand signature.

### Measured component styles

- **Primary button** (“IG”): background #4490ff · text #000000 · border 1px solid · radius 9999px · padding 0px · 400 16px Neue Haas Unica Pro
- **Link** (“Glenn F. Clements.”): transparent background · text #4490ff · radius 0px · padding 0px · 400 48px Neue Haas Unica Pro
- **Navigation item** (“Roster”): transparent background · text #ffffff · radius 0px · padding 0px · 400 32px Neue Haas Unica Pro

## Do

- Use black as the dominant page canvas.
- Let full-bleed video lead the opening.
- Set key display text large and regular-weight.
- Use Signal Blue (#4490ff) for prominent links.
- Separate sections with generous black space and fine rules.
- Keep project captions compact and secondary.

## Don't

- Do not add card shadows or decorative gradients.
- Do not introduce unmeasured brand colors.
- Do not box every roster link into a card.
- Do not make the page feel like a conventional SaaS dashboard.
- Do not let captions compete with the main imagery.
- Do not add dense ornament around the wordmark.

## Agent prompt

Build a new creative-agency page in Chelsea’s cinematic editorial style. Use Deep Canvas (#000000) as the dominant background, Signal Blue (#4490ff) for prominent links and small accents, and Warm Porcelain (#f4efe9) for light navigation and display lettering. Set all text in Neue Haas Unica Pro, or use Inter as a free substitute; favor regular weight and strong changes in scale. Lead with full-bleed moving imagery and restrained overlay navigation. Follow it with an open roster or editorial content block, a compact image-led work gallery, and a practical multi-column contact footer. Keep content directly on the canvas, use thin rules sparingly, and leave generous black intervals between sections. Avoid card-heavy UI, shadows, gradients, and invented palette colors.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed video fills the opening viewport; navigation overlays the top and the stacked wordmark sits over footage. | persistent top navigation, brand-led entry | full-bleed video, light text overlay, oversized wordmark, circular blue control |
| 2 | team | Open black two-column section: compact location selector alongside a larger block of blue director links. | region selection, browse director links | blue text links, two-column layout, open canvas |
| 3 | gallery | Work heading above a dense multi-column strip of campaign thumbnails with compact captions. | browse selected work, open project links | image thumbnails, small blue captions, fine section divider |
| 4 | footer | Compact single-section footer with social links, regional office columns, contact details, and a lower legal line. | social navigation, office contact, legal links | multi-column directory, small text, thin dividers |

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