# Commercial Type · Design system migration spec

> Source: https://commercialtype.com  ·  Curated by OpenDesign  ·  en

> An excellent reference for high-end typographic presentation and gallery-style UI layouts.

## 1. Identity DNA

Commercial Type's design system operates as a curated gallery of typography, where each typeface is given the room and context of an exhibition piece. The system prioritizes specimen presentation and historical context, treating the website as a functional library rather than a conventional commercial interface.

**One-liner:** A premium type foundry specializing in historical roots and modern craftsmanship.
**Keywords:** Type · Foundry · Library · Specimen
**Analogy:** A curated gallery of typography

## 2. Color

The color palette is built around high-contrast section backgrounds—deep purples, warm reds, and bright teals—that serve as frames for typographic specimens. These saturated blocks create clear visual separation between foundry offerings and establish a rhythm of color and type.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#E4CAEF` | card background |
| `--bg-quiet` | `#323232` | quiet area |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#00283B` | secondary text |
| `--muted` | `#47FF5B` | placeholder |
| `--accent` | `#FF4B6C` | single accent |
| `--line` | `rgba(0,0,0,0.1)` | divider |

**Color principle:** High-contrast typography with bold, saturated section backgrounds.

Color functions primarily as a contextual backdrop for type, never as decorative embellishment.

## 3. Typography

Hero text employs transitional serif families like Canela, establishing a voice of historical authority and modern refinement. Body text is set in Styrene UI, a functional sans-serif that maintains clarity without competing with the displayed typefaces.

- **Display:** transitional-serif
- **Body:** grotesque-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 199px | 1.0 | 400 | -2px | Hero headlines |
| heading | 21px | 1.4 | 400 | 0px | Section titles |
| body | 15px | 1.4 | 400 | 0px | Main text |

**Type rules:**
- Hero text uses specific type families like Canela.
- Text casing is strictly mixed case, with rare uppercase for specific labels.
- Body text is set in Styrene UI.

## 4. Spacing

An 8px-based rhythm governs vertical spacing, creating consistent optical alignment between typographic elements and generous whitespace for specimen presentation.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** 8px based rhythm for vertical spacing.

## 5. Surfaces

Surfaces are defined by subtle depth cues—a single shadow value for elevation and thin borders that delineate content areas without visual weight. The design avoids material effects in favor of clear, typographic hierarchy.

- **Radius:** sm 0px · md 0px · lg 0px · pill 0px
- **Shadows:**
  - rgba(0, 0, 0, 0.35) 2px 2px 7px 0px
- **Borders:** 1px solid rgba(0,0,0,0.1)

## 6. Layout

The layout skeleton consists of full-width sections that transition between different specimen presentations. Within these sections, horizontal card grids organize typeface families, using consistent borders and spacing to maintain visual order.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 3 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Full-width sections with horizontal grid-based card layouts.

## 7. Motion & Interaction

Motion is treated as a functional enhancement rather than a decorative element. Transitions are kept brief and smooth, with hover states providing subtle feedback through color shifts and opacity changes.

- **Durations:** micro 150ms · small 300ms · medium 500ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1.0)`
- **Patterns:**
  - Subtle background-color transitions on hover.
  - Opacity transitions for UI elements.

- **Hover:** Subtle color shifts or background changes.
- **Click:** Instant response with no heavy animation.
- **Transition:** All transitions are kept smooth and brief.
- **Keyboard:** Standard focus rings and tab navigation.

## 8. Voice & Don'ts

The editorial voice is expert, minimal, and authoritative—speaking directly to type professionals without marketing embellishment. Headlines function as type-centric statements that let the specimen speak for itself.

- **Tone:** Expert, minimal, and authoritative.
- **Headline style:** Bold, type-centric statements that let the font speak.
- **CTA style:** Understated and functional.
- **Avoid:** Marketing fluff / Overly decorative UI / Complex animations / Rounded corners / Bright gradients

### Don'ts
- ❌ Don't use rounded corners — screenshot shows sharp, rectangular edges.
- ❌ Don't use gradients — screenshot shows flat, solid background blocks.
- ❌ Don't use drop shadows excessively — screenshot shows flat UI elements.
- ❌ Don't use sans-serif for display — screenshot shows transitional-serif for headlines.
- ❌ Don't use vibrant accent colors everywhere — screenshot uses them only for specific specimens.
- ❌ Don't use heavy padding — screenshot shows tight, efficient spacing.

The system deliberately excludes rounded corners, gradients, complex animations, and decorative UI elements to maintain focus on typographic content.

## System Prompt (paste into AI tool)

```
Commercial Type is a premium type foundry with a minimalist, typography-focused design. The layout uses large, bold specimens (transitional-serif like Canela) set against solid, high-contrast background blocks (#E4CAEF, #500000, #78FFF0). The UI is a clean, functional grid (Styrene UI) with sharp corners and no gradients. Key colors include deep purple (#480078), hot pink (#FF4B6C), and bright green (#47FF5B). Critical donts: never use rounded corners, avoid gradients, and ensure display text remains strictly serif-based. The overall feel is an editorial gallery of type.
```