---
version: alpha
name: "Commercial Type"
description: "Black-and-white type foundry authority — Control Italic at cinematic scale, Styrene UI at functional restraint, and specimen slides as rotating editorial canvas"

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#000000"
  surface-elevated: "#f2f2f2"

  # Text / ink
  ink: "#000000"
  ink-muted: "#888888"
  on-background: "#000000"
  on-surface: "#ffffff"

  # Brand accent — none: the system is achromatic; accent function served by ink itself
  primary: "#323232"
  on-primary: "#ffffff"
  primary-container: "#f2f2f2"

  # State / interaction
  text-hover: "#000000"
  focus-tint: "#e2f2ff"  # was rgba — light blue focus tint observed in logo zone
  focus-ring: "#38a4fa"  # was rgb(56,164,250) — browser focus indicator on email input

  # Borders
  border: "#888888"   # was rgb(136,136,136) — horizontal section rules
  border-dark: "#000000"

  # Shadow tints
  shadow-soft: "#404040"  # was rgba(0,0,0,0.25/0.35) flattened to approximate opaque midtone

typography:
  display-hero:
    fontFamily: "Control Italic, Times New Roman, serif"
    fontSize: 265px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  display:
    fontFamily: "Control, Times New Roman, serif"
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.5px
  heading-section:
    fontFamily: "Styrene UI A, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: 0px
  heading-sub:
    fontFamily: "Styrene UI A, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  body-large:
    fontFamily: "Frame, Times New Roman, serif"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body:
    fontFamily: "Styrene UI B, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  nav-link:
    fontFamily: "Styrene UI B, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0px
  button-ui:
    fontFamily: "Styrene UI B, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0px
  label-upper:
    fontFamily: "Styrene UI A, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.05em
  caption:
    fontFamily: "Styrene UI B, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 10px
  md: 22px
  lg: 43px
  xl: 87px
  2xl: 130px
  3xl: 174px

rounded:
  none: 0px
  pill: 22px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 8px 14px
  button-primary-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 8px 14px
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 8px 14px
  button-secondary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-surface}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 8px 14px
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 22px
  card-dark:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.none}"
    padding: 22px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 4px 5px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.focus-ring}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 4px 5px
  badge:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 4px 10px
  tag-specimen:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.label-upper}"
    rounded: "{rounded.none}"
    padding: 4px 10px
  nav-item:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 6px 0px
  nav-item-hover:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 6px 0px
---

# Commercial Type Design System

## Overview

Commercial Type arrives on screen with no apology and no preamble: the viewport fills with a single letter form, rendered in Control Italic at somewhere north of 265 pixels, cycling through typeface specimens in silence. The page background is `{colors.background}` — pure, unmodulated white — and the typographic mass sits against it at full bleed, consuming the viewport entirely. This is a foundry whose product is letterforms, and its website makes the letterform the product. No illustration, no photography, no gradient. Just type, shown at the scale it deserves.

The Styrene UI family handles all chrome: navigation, labels, UI controls, and the small-print metadata that organises the catalogue. Styrene is a Commercial Type typeface itself — a rationalist grotesk cut with optically corrected variants (A for text, B for display/UI). Its use here is pointed: even the website's utility layer is sold by being used. Frame, a slab serif with humanist proportions, appears for longer editorial passages and specimen descriptions, providing warmth and reading comfort against the Styrene's functional regularity. And Control, the variable display family deployed for the rotating hero, shows all three optical variants (Upright, Italic, Cursive) in the same slide sequence — a live specimen running at cinematic scale.

The chromatic system is essentially binary. Ink is `{colors.ink}` — pure black — and the canvas is `{colors.background}` — pure white. The one anomaly is the slide carousel, where specimen pages arrive with their own brand colours: a deep maroon for one cut, a candy purple for another, mint green for a third. These are not the foundry's colours; they are the typefaces' colours, demonstrated in context. The site's own UI never introduces a hue. The single focus-indicator blue (`{colors.focus-ring}`) is a browser affordance, not a brand choice. Everything else resolves to black or white, with mid-grays (`{colors.ink-muted}`, `{colors.border}`) serving only as structural dividers and secondary text.

**Key Characteristics:**
- Control Italic at ~265px as a full-viewport rotating hero — the typeface specimen IS the homepage
- Strict two-family system: Styrene UI (A for headings/labels, B for UI/nav) handles all chrome; Frame handles editorial body
- Achromatic palette — `{colors.ink}` and `{colors.background}` only; specimen slides carry their own demonstration colors
- Zero border-radius on all UI elements — hard rectangular corners throughout, with a single pill exception on subscription labels
- Horizontal rule dividers via top-only `1px solid {colors.border}` borders — the sole structural ornament
- Shadow system limited to a subtle drop shadow on the floating specimen viewer: `{colors.shadow-soft}` at 2px offset
- Uppercase labels via CSS transform (not OpenType small-caps) for section headings and taxonomy markers
- Section-break rhythm driven by the foundry's own unit: the body text font-size (22px) as spacing base
- Navigation that doubles as a live type sample: set in Styrene UI B at 15px, reversed white-on-black for the "Commercial Type" wordmark button
- All interactive transitions at 0.3s ease — unhurried, confident, foundry-time rather than SaaS-time

## Colors

### Primary
- **Paper White** (`{colors.background}`): The sole page canvas. Every section, every panel, every card resolves to this white. Specimen slides override it with demonstration color — but that color belongs to the typeface, not the site.
- **Foundry Black** (`{colors.ink}`): Primary text, wordmark, navigation, all structural elements. The dominant pixel across every page. Pure black without the warmth lift that Pentagram uses — Commercial Type makes no concession to softness.

### Brand Accent
- **Dark Neutral** (`{colors.primary}`): The button background for the floating "Commercial Type" navigation pill — a slightly lifted dark neutral (`#323232`) that reads as black in context. Applied to the single interactive control that sits outside the main navigation grid.

### Text States
- **Muted Gray** (`{colors.ink-muted}`): Secondary text, catalog metadata, specimen sub-labels. Applied to de-emphasized information that contextualises rather than headlines.
- **Section Divider** (`{colors.border}`): The `1px solid` top-border gray applied to section separators. Not structural enough to be black, present enough to be architectural.

### Focus / Interaction
- **Input Focus Blue** (`{colors.focus-ring}`): Browser-surfaced focus color on the newsletter email input (`rgb(56, 164, 250)`). Not a designed brand color — a utility affordance that passes WCAG contrast on white.
- **Logo Zone Tint** (`{colors.focus-tint}`): The `#e2f2ff` background behind the logo in the footer — a trace of cool light that lifts the wordmark from the page without introducing a hue strong enough to count as brand color.

### Shadows
- **Specimen Shadow** (`{colors.shadow-soft}`): The drop shadow on the floating specimen viewer — `rgba(0,0,0,0.25)` to `rgba(0,0,0,0.35)` at 2.2px offset, 7.3px blur, flattened here to approximate opaque `#404040`. Present only on the viewer overlay, nowhere else.

## Typography

### Font Family
- **Display / Specimen**: `Control Italic` (variable, Web woff2) — the primary face for hero type specimens; also deployed in Upright and Cursive variants. Fallback: `Times New Roman, serif`
- **Headings / Labels**: `Styrene UI A` — the text-optimised optical variant, used for headings, uppercase section markers, and mid-size labels. Fallback: `Arial, sans-serif`
- **UI / Navigation**: `Styrene UI B` — the display-optimised variant, used for navigation links, button labels, small UI text. Fallback: `Arial, sans-serif`
- **Editorial Body**: `Frame` — a slab serif for longer reading passages and specimen descriptions. Fallback: `Times New Roman, serif`
- All fonts are self-hosted: `ControlUpright-VF-Web.woff2`, `ControlItalic-VF-Web.woff2`, `ControlCursive-VF-Web.woff2`, `StyreneUIA-Regular-Cy-Web.woff`, `StyreneUIB-Regular-Cy-Web.woff`, `StyreneUIB-RegularItalic-Cy-Web.woff`

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Control Italic at 265px — the rotating homepage specimen carousel |
| `display` | Large specimen headings and typeface name callouts |
| `heading-section` | Section-level labels in Styrene A, often uppercase via text-transform |
| `heading-sub` | Sub-section headings, catalog category names |
| `body-large` | Frame editorial text — specimen descriptions and curatorial copy |
| `body` | Styrene B UI text — metadata, small labels, filter options |
| `nav-link` | Styrene B navigation links — 15px, weight 400, restrained |
| `button-ui` | Button labels — matches nav-link treatment exactly |
| `label-upper` | Uppercase section markers with loose tracking |
| `caption` | Smallest metadata tier — specimen technical specs |

### Principles
- The type hierarchy is a live demonstration: Styrene UI on this page sells Styrene UI; Control on this page sells Control. Every typographic choice is also an advertisement.
- Weight 400 at all sizes — no bold weight is deployed anywhere in the UI. Authority comes from scale and proportion, not stroke weight.
- Uppercase section labels via CSS `text-transform: uppercase` — a structural device that creates taxonomy tiers without introducing a separate typeface.
- Frame serves as the humanist complement to Styrene's rationalist grid — wherever text needs to be read (not scanned), Frame appears.
- The 22px body size is the spacing base: margins, gaps, and rhythm intervals derive from multiples of this base unit.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 22px (the body text size).

The system is typographically derived rather than grid-derived. Spacing intervals map to line-height multiples of the 22px body size — a convention from traditional typesetting where the leading IS the measure. This produces a slightly irregular-looking scale compared to 8px grids, but one that feels inherently book-like in rhythm.

### Grid & Container
- Max content width: approximately 1440px centered, with full-bleed breakouts for the specimen carousel hero
- Catalog grid: 2–4 column type specimen grid with generous inter-card gutter
- Navigation: full-width sticky strip; left = wordmark; right = catalog links in Styrene B
- Specimen viewer: centered overlay at ~600px wide, shadowed, floating above page content

### Whitespace Philosophy
- **Type needs room**: Commercial Type's catalog pages give each typeface specimen substantial space — wide margins, generous section breaks. The whitespace mirrors the foundry's editorial seriousness.
- **Section boundaries are ruled, not margined**: Horizontal rules (`1px solid {colors.border}`) separate sections rather than vertical gaps alone. The rule is a typographic convention borrowed from print.
- **Hero consumes everything**: The specimen carousel takes the full viewport on load — no utility navigation competes. The typeface speaks first.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | All page surfaces, cards, navigation |
| Specimen Viewer (Level 1) | `{colors.shadow-soft} 2px 2px 7px 0px` | Floating specimen viewer overlay |
| Focus Ring | `1px solid {colors.focus-ring}` | Email input focus state |

**Shadow Philosophy**: The site is essentially shadowless. One shadow exists: the drop shadow on the floating specimen viewer (`rgba(0,0,0,0.25)` and `rgba(0,0,0,0.35)` at 2.2px offset). Its presence is functional rather than decorative — it lifts the specimen panel above the page content to communicate that you are inside a focused viewing mode. No other UI element carries elevation. This restraint aligns with the achromatic philosophy: shadow is a tool, not an atmosphere.

## Shapes

The complete radius scale is in the `rounded:` token block above. The system uses:

| Token | Value | Use |
|---|---|---|
| `none` | 0px | All UI surfaces — buttons, cards, inputs, navigation, containers |
| `pill` | 22px | Newsletter subscription label chip — the single departure from rectangular forms |

The system is overwhelmingly square. Every card, button, input, and container runs at `0px` radius — corners are sharp, architectural, and typographically grounded. The 22px pill appears only on the subscription tag that floats alongside the email input, echoing the body text size and creating a lone soft moment in an otherwise rigid vocabulary.

## Components

### Button variants

- **`button-primary`** — Dark neutral background (`{colors.primary}`), white text, zero radius. Used for the floating "Commercial Type" nav wordmark button in the hero scroll state.
- **`button-secondary`** — White background, black text, 1px black border (implied by context), zero radius. Secondary CTAs in the catalog.
- **`button-primary-hover`** and **`button-secondary-hover`** — Color inversion: foreground and background swap at 0.3s ease. The signature interaction across all links and buttons.

### Cards

Type specimen cards present the typeface name in the specimen face at scale, with Styrene B metadata below. No card border — items are separated by top-rule only or white space. Zero radius, no shadow, no background fill differentiating the card from the page.

### Inputs

The newsletter email input sits on a white background with a full `1px solid {colors.border-dark}` border, zero radius, minimal padding. Focus state transitions the border to `{colors.focus-ring}` blue. The submit action adjacent uses the standard button treatment.

### Badges / Tags

Specimen classification tags use the `tag-specimen` component — the label-upper typography with uppercase text-transform, on white background, no border. The subscription pill uses `{rounded.pill}` as the single rounded exception in the system.

### Navigation

Sticky full-width header: white background, `{colors.ink}` text, Styrene B at 15px. The wordmark button ("Commercial Type") reverses to white-on-dark. On scroll, the header compresses; the wordmark button becomes the persistent navigation anchor. No dropdown menus, no megamenu — the catalog is a page, not a panel.

## Do's and Don'ts

### Do
- Use `{typography.display-hero}` (Control Italic) only for specimen hero moments — it is a demonstration, not a heading style
- Set all UI chrome in Styrene UI B; reserve Styrene UI A for headings and labeled section markers
- Use Frame (`{typography.body-large}`) for any passage of more than two sentences — editorial density requires the serif
- Apply `0px` border-radius universally: buttons, cards, inputs, containers. The sharp corner is non-negotiable.
- Use `{colors.border}` top-only rules to separate sections — a `border-top: 1px solid` is the system's only ornamental device
- Honor the 0.3s ease transition on all interactive elements — the foundry's pace is deliberate, not urgent
- Let specimen slides carry demonstration colors — those colors belong to the typefaces, not the UI; never migrate them into chrome
- Maintain weight 400 across all type sizes — the system never introduces bold or heavy weights in UI contexts

### Don't
- Don't introduce any color into the site's own chrome — `{colors.ink}`, `{colors.background}`, and their grays are the complete palette
- Don't round buttons, cards, or inputs — the single pill exception (`{rounded.pill}`) belongs only to the subscription tag
- Don't use Styrene A and Styrene B interchangeably — A is text-optimised (headings), B is display-optimised (UI/nav); mixing them flattens the optical hierarchy
- Don't increase font weights to create emphasis — use size, case, or spacing instead
- Don't add shadows to cards or navigation — the specimen viewer shadow is the only shadow in the system
- Don't compress the specimen hero — Control Italic needs the full viewport to communicate its scale
- Don't use the focus-ring blue (`{colors.focus-ring}`) decoratively — it is a browser affordance for the email input only
- Don't introduce horizontal or vertical gradients — the palette is flat by design and by philosophy

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <640px | Single column, specimen hero scales down, nav collapses |
| Mobile | 641–768px | Single column, hamburger nav, specimen at reduced scale |
| Tablet | 769–1024px | Two-column catalog grid, nav expands |
| Desktop | 1025–1280px | Three-column catalog, full nav, specimen at full scale |
| Large Desktop | >1280px | Maximum layout width, specimen carousel at cinematic scale |

### Touch Targets
- Navigation links: Styrene B 15px with adequate surrounding area — estimated 44px tap height
- Catalog type specimen cards: large by nature — the typeface name display functions as the touch target
- Email input and submit: standard 44px height minimum

### Collapsing Strategy
- **Navigation**: Full horizontal type-specimen nav collapses to hamburger or icon row at mobile; the wordmark button persists
- **Specimen hero**: Control Italic scales proportionally — 265px desktop becomes approximately 80–120px on mobile, maintaining viewport fill
- **Catalog grid**: 4-column → 2-column → 1-column across desktop → tablet → mobile
- **Section spacing**: 130–174px macro gaps reduce to 64–87px on tablet and 43px on mobile

### Image Behavior
- Specimen slides maintain full-bleed at all breakpoints; type scales rather than crops
- No raster photography to manage — specimens are type-on-color, fully vector-safe at any scale
- The specimen viewer overlay panel adapts from fixed 600px width to full-width on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}`
- Text: `{colors.ink}`
- Brand accent: `{colors.primary}` (dark neutral for the nav wordmark button only)
- Secondary text: `{colors.ink-muted}`
- Border / divider: `{colors.border}`
- CTA: `{colors.primary}` (inverts to `{colors.surface}` / `{colors.on-surface}` on hover)

### Example Component Prompts

- "Create a full-viewport type specimen hero on a white (`{colors.background}`) canvas. Center a single letterform or word-pair set in Control Italic, 265px, weight 400, line-height 1.4, `{colors.ink}` — or in the typeface's own demonstration color if presenting a colored specimen. No padding, no border, no overlay. Below the specimen, a single line of Styrene UI B 15px metadata in `{colors.ink-muted}`. Transition between slides at 0.3s ease."

- "Design a typeface catalog card on white (`{colors.background}`): no border-radius, no shadow, no card background. Top edge only: `border-top: 1px solid {colors.border}`. Typeface name set in the specimen typeface at approximately 64px, weight 400, `{colors.ink}`. Below: foundry classification in Styrene UI A 15px uppercase with `letter-spacing: 0.05em`, `{colors.ink-muted}`. Sub-info in Styrene UI B 13px, `{colors.ink-muted}`. Padding: 22px top, 43px bottom."

- "Build a navigation header on white (`{colors.background}`), sticky, no shadow. Left: 'Commercial Type' wordmark in Styrene UI B 15px, set as a button with `{colors.primary}` background and white text, `0px` border-radius, `8px 14px` padding. Right: navigation links in Styrene UI B 15px weight 400, `{colors.ink}`, no underline, 22px gap between items. On hover, links shift to `{colors.ink-muted}` at 0.3s ease. Full viewport width, white background."

- "Design an email newsletter input row on white: input with `1px solid {colors.border-dark}` border, `0px` border-radius, `4px 5px` padding, Styrene UI B 15px, black text, white background. Focus: border shifts to `{colors.focus-ring}` at `0.15s ease`. Adjacent submit button: `{colors.primary}` background, white Styrene B text, `0px` radius, `8px 14px` padding. To the right of the input group, a subscription label pill: `{colors.primary-container}` background, `{colors.ink}` text, Styrene B 13px, `{rounded.pill}` radius, `4px 10px` padding."

- "Create a specimen viewer overlay: centered panel at 600px width on a white page. Shadow: `{colors.shadow-soft} 2px 2px 7px 0px`. Zero border-radius. Inside: the typeface specimen displayed at large scale on the panel's own background color (drawn from the specimen's demonstration palette). Below the specimen: type name in Styrene UI A 22px uppercase, `{colors.ink}`. Metadata row in Styrene UI B 13px, `{colors.ink-muted}`. A 'Try font' button: `{colors.primary}` background, white Styrene B text, `0px` radius."

### Iteration Guide

1. Start with `{colors.background}` as the universal canvas — only the specimen carousel introduces other colors, and those belong to the typefaces, not the UI
2. Choose the typeface register before writing any text: Styrene B for navigation/UI/buttons, Styrene A for headings and uppercase labels, Frame for any multi-sentence reading passage, Control for specimen display only
3. Weight 400 everywhere — if you're reaching for bold, use uppercase via `text-transform` or increase size instead
4. Every corner is `{rounded.none}` unless you are the subscription pill specifically
5. Horizontal rules separate sections: `border-top: 1px solid {colors.border}` — this is the only decorative line in the system
6. All transitions: `0.3s ease` on `background-color` and `box-shadow` for links; `0.15s ease` for buttons
7. The specimen shadow (`{colors.shadow-soft} 2px 2px 7px`) belongs only to overlays; flat surfaces carry no shadow

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Commercial Type. Brand names and trademarks belong to their respective owners.