# Channel Studio · Design system migration spec

> Source: https://channel.studio  ·  Curated by OpenDesign  ·  en

> This site is a masterclass in restrained, high-end design studio branding that prioritizes project work over UI decoration.

## 1. Identity DNA

Channel Studio's design system functions as a minimalist architectural blueprint for a creative studio. Every decision serves the same purpose as a structural beam or a load-bearing wall: to create a clear, unobstructed framework for presenting high-end project work.

**One-liner:** A premium brand and user experience innovation studio showcasing high-end project case studies
**Keywords:** brand innovation · user experience · design studio · premium agency
**Analogy:** A minimalist architectural blueprint for a creative studio

## 2. Color

The palette is a strict monochrome, a high-contrast conversation between a deep black ground and crisp white text, with muted gray tones for secondary information. This chromatic restraint ensures that the portfolio's imagery provides all necessary color and visual weight.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--bg-soft` | `#111111` | card background |
| `--ink` | `#CACACA` | body text |
| `--ink-soft` | `#727272` | secondary text |
| `--muted` | `#727272` | placeholder |
| `--line` | `rgba(202,202,202,0.2)` | divider |

**Color principle:** Strict monochrome with high-contrast typography on dark grounds

The guiding principle is to eliminate decorative color, allowing content to define the visual experience.

## 3. Typography

Type is set in a clean geometric sans-serif, used at massive scales with tight letter-spacing to create bold, architectural statements. A consistent 400 weight across all sizes produces a refined uniformity, with left-aligned text establishing strong vertical axes.

- **Display:** geometric-sans
- **Body:** geometric-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 75px | 0.9 | 400 | -1.5px | Primary hero statements and case study titles |
| heading | 18px | 1.2 | 400 | 0px | Navigation and secondary labels |

**Type rules:**
- Tight letter-spacing for display text to enhance impact
- Consistent 400 weight throughout for a refined, uniform look
- Left-aligned typography creates a strong vertical axis

## 4. Spacing

Rhythm is established through asymmetric padding, where generous bottom offsets create full-viewport sections that feel like individual rooms in a gallery.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Asymmetric padding with large bottom offsets to create full-viewport sections

## 5. Surfaces

Depth is implied, not declared. There are no visible borders or drop shadows; boundaries are defined solely by the meeting of color blocks and large-scale imagery.

- **Radius:** sm 0px · md 0px · lg 0px · pill 0px
- **Borders:** No visible borders; boundaries defined by color blocks and large imagery

## 6. Layout

The layout skeleton is a series of full-bleed sections, alternating between dark fields with massive text and immersive project photography. This creates a cinematic, linear narrative for each case study.

- **Container max:** 1440px
- **Paragraph max:** 800px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Full-bleed sections alternating between dark backgrounds with text and large-scale project imagery

## 7. Motion & Interaction

Motion is used with the precision of stage lighting, focusing on smooth opacity transitions for text and navigation. The philosophy is one of sequential revelation, where page sections appear deliberately during scroll rather than through flashy animation.

- **Durations:** micro 250ms · small 500ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Smooth opacity transitions for text and navigation elements
  - Sequential appearance of page sections during scroll

- **Hover:** Subtle color shifts on text links
- **Click:** Immediate visual response via opacity changes
- **Transition:** Consistent 0.25s ease-in-out for color and visibility states
- **Keyboard:** Standard focus states for interactive elements

## 8. Voice & Don'ts

The editorial voice is authoritative and direct, matching the visual austerity with declarative headlines and understated, functional text links. It prioritizes clarity and substance over decoration or persuasive flourish.

- **Tone:** Authoritative, direct, and sophisticated
- **Headline style:** Declarative, high-impact statements using large-scale typography
- **CTA style:** Understated, functional text links that prioritize clarity over visual noise
- **Avoid:** Avoid cluttered layouts or excessive UI elements / Avoid decorative gradients or complex shadows / Avoid decorative icons or illustrations

### Don'ts
- ❌ don't use vibrant accent colors — screenshot shows a strict monochromatic palette with white and gray
- ❌ don't use heavy borders or cards — screenshot shows full-bleed sections without visible containers
- ❌ don't use multi-column grids for small text — screenshot shows generous whitespace and left-aligned blocks
- ❌ don't use playful or rounded typography — screenshot shows a structured, geometric sans-serif
- ❌ don't use cluttered navigation menus — screenshot shows a simple, vertically stacked text list
- ❌ don't use drop shadows for depth — screenshot relies on large imagery and high-contrast text

The system deliberately omits vibrant accents, complex UI components, and decorative elements to maintain its focus as a pure vessel for project work.

## System Prompt (paste into AI tool)

```
Channel Studio is a premium brand and user experience innovation agency. The visual language is defined by a strict monochromatic palette featuring a deep black background, crisp white text, and muted gray tones for secondary elements. Typography uses a clean geometric sans-serif category, presented in massive scales with tight tracking to create a bold, architectural feel. The layout is highly asymmetric, relying on full-bleed sections and oversized imagery to showcase project case studies. Critical constraints include avoiding any vibrant accent colors, removing decorative UI elements like cards or borders, and maintaining generous negative space. Transitions should be smooth and understated, focusing on opacity and subtle color shifts rather than flashy animations.
```
