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

# Extract Studio · Design System

> Clarity, expressed through bold type and thoughtful work.

**Theme:** light · **Industry:** design · **Source:** https://www.extract.studio/ · **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._

Extract Studio’s homepage pairs oversized editorial typography with a restrained black-and-white framework and a pale-green news and contact area. Large, image-led project work supplies the colour and texture, while generous white space keeps the page calm and legible.

## North star

Let monumental editorial type and real project imagery lead, keeping the interface itself flat, monochrome, and spacious.

## Overview

The visual strategy is built on a crisp monochrome foundation: white canvas and near-black text, headings, and fine dividers. The opening wordmark is exceptionally large and heavy, balanced by a refined serif statement beneath it. ABC Diatype carries navigation, project labels, and supporting copy in a straightforward sans-serif voice; Feature Deck brings a more expressive editorial quality to prominent display and heading text. Layouts are broad and spacious, with an unusually prominent full-width video near the top, followed by an image-rich project gallery and a short studio statement. The pale green #e7feda background distinguishes the news and contact portion without disrupting the restrained palette. Most saturated colours belong to project imagery and video rather than the brand system. Project images are presented cleanly, with captions close by; borders and surfaces remain flat and shadows are absent. The overall effect relies on scale, contrast, and rhythm instead of decorative UI.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Studio Ink | `#070707` | `--color-studio-ink` | neutral | Near-black wordmark, headings, body text, navigation, links, fine dividers, and the dark contact panel. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas and white interface surfaces, including the small navigation panel shown over video. |
| Fresh Lime | `#e7feda` | `--color-fresh-lime` | brand | Full-width news and footer background, marking the closing content area. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#e7feda` (Fresh Lime) · `--color-surface-2` → `#070707` (Studio Ink) · `--color-text` → `#070707` (Studio Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-border` → `#070707` (Studio Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#070707` | `#ffffff` | 20.14:1 | AAA |
| `#070707` | `#e7feda` | 18.79:1 | AAA |
| `#ffffff` | `#e7feda` | 1.07:1 | fail |
| `#ffffff` | `#070707` | 20.14:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| ABC Diatype | `--font-body` | webfont | 400, 700 | Navigation, body copy, project labels, and link text. | Inter |
| Feature Deck | `--font-display` | webfont | 400 | Editorial display text and prominent statement headings. | Bodoni Moda |

- **ABC Diatype:** Use regular weight for navigation and copy; keep casing natural and avoid decorative tracking.
- **Feature Deck:** Use regular weight for a refined, high-contrast serif voice; preserve generous scale and natural casing.

### Type scale — Custom (ratio ≈ 1.794, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 104px | 400 | 1.5 | 0 | — | Feature Deck | Oversized opening wordmark and major editorial display moments. |
| h1 | 44.5px | 400 | 1.25 | 0 | — | Feature Deck | Large serif statement headings and featured editorial copy. |
| h2 | 33.5px | 400 | 1.25 | 0 | — | ABC Diatype | Section headings, including project and news introductions. |
| body | 18px | 400 | 1.5 | 0 | — | ABC Diatype | Studio descriptions, news summaries, and supporting copy. |
| nav | 18px | 400 | 1.5 | 0 | — | ABC Diatype | Primary page navigation and compact menu labels. |
| link | 21px | 400 | 1.5 | 0 | — | ABC Diatype | Project titles, calls to action, and “View all” links. |

## Spacing & layout

- Base unit **1px**, density **spacious**.
- Scale (most used values): 9, 12, 14, 16, 19, 23, 25, 28, 32, 37, 65, 74, 93, 111 px.
- Section rhythm 111px · element gap 37px · card padding — · max content width 1320px.

A spacious single-page flow sits within a measured 1320px maximum-width framework. The opening wordmark spans most of the canvas, with its serif introduction aligned to the left beneath it. A full-bleed video anchors the hero; projects then form a visual gallery, followed by a standalone studio statement. The news block switches to pale green and uses three columns, with the contact and newsletter content arranged below. Section spacing is generous, while the overall content density remains low.

## Shape & elevation

- Radius: input `5px` · media `9px` · xs `5px` · sm `9px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s ease-in-out` on interactive elements.

The interface is predominantly flat: no measured shadows or gradients define its surfaces. Thin near-black borders and dividers provide structure, while occasional softly rounded media and input edges add restraint. A white navigation panel layers directly over the hero video; the dark contact panel sits within the pale-green footer region.

## Imagery

Large project photography and video show finished brand applications in real environments, including signage, screens, and campaign work. Gallery imagery is rectangular and cleanly framed, with concise captions placed nearby. Project visuals can be vivid and varied, but those colours belong to the work rather than the site palette. News cards use smaller image crops; the page avoids decorative illustration as interface ornament.

## Components

### Oversized wordmark

A dominant near-black sans-serif brand mark fills the opening canvas, followed by a smaller serif studio statement.

### Floating video navigation

A compact white horizontal navigation panel overlays the full-bleed hero video, with dark sans-serif labels.

### Project gallery

Image-led work is arranged as a broad gallery with short project-title links and minimal interface framing.

### Studio statement

A standalone serif statement and understated “About us” link create a quiet transition between work and news.

### News cards

Three image-led editorial cards sit on the #e7feda section background, each with a concise heading and supporting text.

### Newsletter and contact panel

A dark panel contains the email field, studio contact details, social links, and oversized serif contact invitation.

### Measured component styles

- **Primary button**: transparent background · text #ffffff · border 1px solid #ffffff · radius 0px · padding 0px · 400 17.9697px ABC Diatype
- **Link** (“Sport 24 — World Cup broadcast identity”): transparent background · text #070707 · radius 0px · padding 0px · 400 18.5455px ABC Diatype
- **Input**: transparent background · text #ffffff · border 1px solid #ffffff · radius 4.63636px · padding 9.3px 18.5px · 400 17.9697px ABC Diatype
- **Navigation item** (“Projects”): transparent background · text #070707 · radius 0px · padding 13.9px 18.5px · 400 17.9697px ABC Diatype

## Do

- Use #ffffff as the principal canvas.
- Set core text and dividers in #070707.
- Reserve #e7feda for the news and closing contact region.
- Make editorial display typography the dominant visual anchor.
- Let authentic project media provide most colour variation.
- Keep gallery captions close to their corresponding images.

## Don't

- Do not add colours outside the measured palette to interface surfaces.
- Do not treat vivid project-image colours as brand accents.
- Do not crowd the page with dense UI or repeated card chrome.
- Do not add decorative shadows or gradients.
- Do not replace the editorial serif contrast with uniformly generic typography.
- Do not make the imagery feel like small decorative thumbnails.

## Agent prompt

Build a new page in the Extract Studio visual language. Use Gallery White (#ffffff) as the dominant canvas and Studio Ink (#070707) for typography, links, and fine borders. Introduce Fresh Lime (#e7feda) as a clearly bounded section background, not as a general accent. Pair oversized, expressive editorial serif headlines with clean sans-serif navigation and supporting text. Create a spacious, left-aligned flow with a strong media-led feature, broad project imagery, restrained captions, and a distinct closing contact or newsletter area. Let photography and video carry their own colour; keep interface decoration minimal, flat, and high contrast. Use subtle media rounding only, no shadows, and keep spacing generous so each block has room to breathe.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Large wordmark across the white canvas, with a left-aligned serif introduction below. | Brand introduction, Scroll-led entry | Oversized wordmark, Serif statement, Monochrome canvas |
| 2 | video | A full-bleed video feature follows the intro, with compact navigation displayed over the media. | Video-led showcase, Persistent navigation | Full-width media, Floating white menu, Project imagery |
| 3 | gallery | A spacious project gallery uses large image tiles and nearby captions on white. | Browse selected work, Open project links | Image-led grid, Compact captions, Fine section divider |
| 4 | feature-split | A brief, left-aligned editorial statement occupies a quiet white transition block. | Studio introduction, About link | Serif statement, Understated text link, Open whitespace |
| 5 | content-feed | Three news columns sit together on a full-width pale-green section. | Browse updates, View all news | Three-column cards, Editorial images, Pale-green band |
| 6 | footer | A dark inset contact panel sits inside the pale-green closing section, with contact details above a large invitation. | Newsletter signup, Contact studio, Social links | Dark panel, Email input, Oversized serif CTA |

## Source CSS custom properties (selected)

```css
--swiper-theme-color: #007aff;
```

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