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

# Channel Studio · Design System

> A quiet black canvas for vivid ideas.

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

Channel Studio pairs oversized, restrained typography with immersive project imagery on a continuous black canvas. Soft gray interface text and coral project titles provide the page’s only consistent color accents.

## North star

Keep the interface nearly invisible so oversized type and immersive project media lead on a continuous black canvas.

## Overview

The page is built around a pure black canvas (#000000), allowing full-bleed media and long vertical project sequences to feel like one uninterrupted portfolio. Lausanne is used throughout in a light, unembellished sans-serif voice: the hero statement is exceptionally large and tightly tracked, while navigation and captions remain small and quiet. Most interface text is soft gray (#cacaca); project names switch to coral (#ff7777), giving the otherwise monochrome presentation a recognizable editorial accent. A muted gray (#727272) appears in fine footer rules and subdued details rather than as a broad surface color. The opening uses atmospheric grayscale motion imagery, followed by client marks and a small abstract media moment. Project entries are image-led, stacked in a single column, with titles and concise project links close to each frame. The overall rhythm is spacious and deliberate, with minimal chrome, no decorative cards, and a simple signup footer.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Studio Black | `#000000` | `--color-studio-black` | brand | Continuous page canvas behind the hero, project list, and footer; preserves the uninterrupted portfolio feel. |
| Soft Silver | `#cacaca` | `--color-soft-silver` | neutral | Primary text for navigation, hero copy, project links, and the large all-projects link. |
| Quiet Graphite | `#727272` | `--color-quiet-graphite` | semantic | Subdued footer detail and thin separator rules; keep it secondary to the main text. |
| Coral Signal | `#ff7777` | `--color-coral-signal` | accent | Project-title text throughout the portfolio, the page’s recurring warm accent rather than a filled CTA color. |

### Semantic aliases

`--color-canvas` → `#000000` (Studio Black) · `--color-text` → `#cacaca` (Soft Silver) · `--color-text-muted` → `#727272` (Quiet Graphite) · `--color-border` → `#727272` (Quiet Graphite) · `--color-accent` → `#ff7777` (Coral Signal)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#cacaca` | `#000000` | 12.81:1 | AAA |
| `#727272` | `#000000` | 4.37:1 | AA-large |
| `#ff7777` | `#000000` | 8.16:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Lausanne | `--font-body` | webfont | 400 | All page typography, from the hero statement and project titles to navigation, links, and footer details. | DM Sans |

- **Lausanne:** Use regular weight throughout; display copy is large with tight negative tracking, while navigation and captions stay understated.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 75px | 400 | 0.9 | -0.02em | — | Lausanne | Oversized hero statement and the prominent all-projects link. |
| body | 18px | 400 | normal | 0 | — | Lausanne | Introductory company statement and general supporting copy. |
| caption | 13px | 400 | 1.19 | 0 | — | Lausanne | Small client labels, project context, and footer details. |
| nav | 16px | 400 | 0.9 | 0 | — | Lausanne | Compact primary navigation beside the studio mark. |
| link | 18px | 400 | normal | 0 | — | Lausanne | Project titles and associated project navigation links. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 8, 9, 10, 13, 16, 19, 20, 40, 57, 64, 94, 192 px.
- Section rhythm 57px · element gap — · card padding — · max content width 1402px.

Use a single-column, vertically scrolling composition with full-bleed media inside a measured maximum content width of 1402px. Align copy and project titles to the start edge; keep navigation compact near the upper-left. The page alternates a media-led opening and short studio introduction with a long sequence of image-dominant project entries. Section spacing follows a comfortable, deliberate rhythm rather than a dense grid. Keep the footer low-key and separated from the final project by generous black space.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.25s ease-in-out` on interactive elements.

Keep the interface flat: measured data shows no shadows, gradients, or rounded card system. The black canvas itself separates sections, and thin muted-gray footer rules provide the clearest interface boundary. Media supplies depth through its own lighting, color, and motion; avoid adding overlays, raised panels, or ornamental borders.

## Imagery

Treat imagery and video as the dominant visual material: the opening is soft-focus grayscale motion, while project frames range from sculpture and architecture to landscapes and technology. Preserve each asset’s distinct color and tonal character rather than forcing a uniform filter. Frame projects as wide, near-full-width images, with small titles and links immediately adjacent. Abstract particles and client marks appear as supporting media, not as interface decoration.

## Components

### Compact header

Place the studio mark and a small, soft-gray navigation group near the upper-left; keep the header visually subordinate to the hero.

### Hero statement

Set the company positioning as oversized, regular-weight Lausanne text over full-bleed atmospheric media.

### Client and studio introduction

Pair a large gray statement with a small client label, client marks, and supporting video or abstract media on black.

### Project entry

Stack a coral project title and a small gray project link with a wide, image-led project frame.

### All-projects link

Use a large soft-gray text link and a simple arrow as the transition after the featured work.

### Signup footer

Keep the email signup, understated divider, copyright, and social links compact and quiet against black.

### Measured component styles

- **Link** (“New Museum”): transparent background · text #cacaca · radius 0px · padding 0px · 400 18px Lausanne
- **Input**: transparent background · text #cacaca · radius 0px · padding 0px · 400 45px Lausanne
- **Navigation item** (“Home Projects About Careers”): transparent background · text #cacaca · radius 0px · padding 0px · 400 16px Lausanne

## Do

- Use Studio Black as the uninterrupted page canvas.
- Set typography in Lausanne or a close, clean sans-serif substitute.
- Reserve Coral Signal for project-title emphasis.
- Let project imagery occupy most of each portfolio entry.
- Keep navigation and supporting labels visually quiet.
- Use generous vertical breathing room between page moments.

## Don't

- Do not introduce bright filled buttons or extra accent colors.
- Do not place project imagery in rounded cards.
- Do not add shadows, gradients, or decorative elevation.
- Do not turn the single-column portfolio into a dense grid.
- Do not apply a uniform color filter to varied project media.
- Do not let footer details compete with the work.

## Agent prompt

Build a new creative-studio page using the Channel Studio visual language. Keep a continuous Studio Black (#000000) canvas, with Soft Silver (#cacaca) for navigation, body copy, and links. Use Coral Signal (#ff7777) sparingly for project titles, and Quiet Graphite (#727272) only for subdued rules or secondary details. Set everything in Lausanne, or a close alternative such as DM Sans, using regular weight and restrained, tightly tracked display typography. Favor a single-column flow, full-width project imagery, large editorial statements, and generous vertical pauses. Keep controls flat and understated: no cards, shadows, gradients, or rounded decoration. Make media the expressive layer, with interface elements remaining minimal and legible.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed opening media with an upper-left logo, compact navigation, and large left-aligned statement. | Immediate brand positioning, Navigation access | Grayscale motion background, Oversized soft-gray type, Compact header |
| 2 | logo-cloud | Single-column black section combining a large statement, small client label and marks, and supporting media. | Studio introduction, Client credibility | Soft-gray display copy, Small client marks, Abstract video |
| 3 | product-showcase | Project title and small link above a wide, full-bleed image in the single-column portfolio. | Project discovery, Direct project link | Coral title, Wide image frame, Quiet link |
| 4 | product-showcase | Repeat the single-column project pattern with title and link adjacent to a wide image. | Sequential browsing, Direct project link | Coral title, Wide media, Black canvas |
| 5 | product-showcase | Single-column project feature with a prominent title, small link, and wide image. | Sequential browsing, Direct project link | Coral title, Editorial image, Minimal chrome |
| 6 | product-showcase | Stacked project title and link above a full-width architectural image. | Sequential browsing, Direct project link | Coral title, Wide photography, Flat presentation |
| 7 | product-showcase | Continue the single-column project sequence with title and link aligned around a wide media frame. | Sequential browsing, Direct project link | Coral title, Immersive media, Black separation |
| 8 | product-showcase | Final wide project image followed by a large all-projects link. | Explore final project, Continue to full portfolio | Coral project title, Large gray arrow link, Full-bleed media |
| 9 | footer | Compact single-column signup and footer details on black. | Email signup, Social navigation | Understated input, Thin gray rule, Small footer text |

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