---
version: alpha
name: "Colophon Foundry"
description: "Token-first design system reference for Colophon Foundry, a London and Los Angeles type foundry known for Apercu, Mabry, and CF Basis."

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#f5f5f5"
  surface-dark: "#000000"

  # Text / ink
  ink: "#000000"
  ink-secondary: "#444444"
  on-background: "#000000"
  on-surface: "#000000"

  # Brand accent — Colophon signature yellow
  primary: "#ffee3b"
  on-primary: "#000000"
  primary-container: "#fff8a0"   # lightened tint of the yellow

  # Interaction states
  text-hover: "#2a2a2a"          # was rgb(42,42,42) — subtle dark shift on hover
  link-hover: "#1883fd"          # Element Plus UI default focus blue — used sparingly
  focus-ring: "#000000"

  # Borders
  border: "#d1d1d1"
  border-subtle: "#b2b2b2"

  # Shadow tints
  shadow-soft: "#c7c5c7"         # from rgb(199,197,199) extracted shadow value

typography:
  display-hero:
    fontFamily: "CF Basis, Helvetica Neue, Arial, sans-serif"
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: -1px
  display:
    fontFamily: "CF Basis, Helvetica Neue, Arial, sans-serif"
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.5px
  heading-section:
    fontFamily: "CF Basis, Helvetica Neue, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0px
  heading-sub:
    fontFamily: "CF Basis, Helvetica Neue, Arial, sans-serif"
    fontSize: 21px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0px
  body-large:
    fontFamily: "CF Basis, Helvetica Neue, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: 0px
  body:
    fontFamily: "CF Basis, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  nav-link:
    fontFamily: "CF Basis, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 2.64
    letterSpacing: 0.14px
  button-ui:
    fontFamily: "CF Basis, Helvetica Neue, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0px
  caption:
    fontFamily: "CF Basis, Helvetica Neue, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.13px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 48px
  3xl: 64px

rounded:
  none: 0px
  sm: 2px
  md: 3px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.background}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 15px 30px
    border: 1px solid {colors.border-subtle}
  button-primary-hover:
    backgroundColor: "{colors.text-hover}"
    textColor: "{colors.background}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 15px 30px
  button-secondary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 15px 30px
  button-secondary-hover:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 15px 30px
  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 15px 30px
    border: 1px solid {colors.border}
  button-ghost-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 15px 30px
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 24px
  card-hover:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 24px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 10px 12px
    border: 1px solid {colors.border}
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.focus-ring}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 10px 12px
  badge:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 10px
  badge-neutral:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 10px
  nav:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.nav-link}"
    padding: 10px 20px
---

# Colophon Foundry Design System

## Overview

Colophon Foundry's website is a type specimen that doubles as a storefront — stripped back enough to let the typefaces breathe, but opinionated enough to signal London-LA studio refinement. The canvas is white, almost aggressively so, but the moment you hit the navigation bar the signature appears: a flood of `{colors.primary}` acid yellow, sharp and warm like fluorescent card stock. That yellow is not a web accent color deployed tastefully across CTAs. It is a material — the equivalent of the foundry's own printed ephemera, the yellow envelope fonts ship in, the highlight pressed through a risograph. Everything else defers to it.

The type system is disciplined to a single family: CF Basis, Colophon's own grotesque, self-hosted as a woff2 and applied everywhere from navigation labels at 14px to display headlines exceeding 36px. Using your own typeface as the interface face is both a proof of concept and a claim — this is what good type can do in a product context. CF Basis sits somewhere between Helvetica's neutrality and a warmer, slightly humanist grotesque; it has enough optical personality to hold large sizes without a weight increase. The nearest Google Font equivalent is DM Sans or Plus Jakarta Sans, though neither captures its precise geometry.

Shape is almost entirely absent. The system uses a 2px border-radius as its primary curve, so close to square that most users would call it flat. Pill buttons — 50px radius — are the one dramatic exception, reserved for primary CTAs. This binary between "nearly square" and "fully round" is characteristic of European type foundry aesthetics: a Bauhaus austerity that permits exactly one expressive flourish. Depth is achieved the same way: hairline borders at `{colors.border}`, no drop shadows on the page surface, only a very soft inset glow on cookie and modal overlays.

**Key Characteristics:**
- Acid yellow (`{colors.primary}`) navigation bar makes an immediate brand statement — not a hover state or an accent, but the primary chrome surface
- CF Basis at every size and weight — the site is a live specimen for Colophon's own typeface
- Near-binary shape system: `{rounded.sm}` (2px) for UI details, `{rounded.pill}` for CTAs — nothing in between
- Monochrome ink with zero brand saturation in body content — `{colors.ink}` black on white throughout
- Large body text (24px) for product descriptions — editorial generosity, not interface density
- Black pill buttons with white text as primary CTAs; the yellow secondary is equally valid
- Minimal spacing rhythm based on a 8px unit, with 48px section gaps at scale
- Link hover states use `{colors.link-hover}` utility blue (Element Plus framework default), not the brand yellow — one of the few raw utility colors in the system
- No gradient, no photography background, no hero image — whitespace does structural work
- Hairline borders at `{colors.border}` and `{colors.border-subtle}` replace elevation throughout

## Colors

### Primary
- **White** (`{colors.background}`): The page canvas and card backgrounds. Pure white, no warm offset.
- **Near Black** (`{colors.ink}`): All body text, headings, UI labels, and the default button fill.

### Brand Accent
- **Colophon Yellow** (`{colors.primary}`): The navigation bar background, badge fills, and secondary button variant. This is Colophon's most visible brand mark — a hot, clean yellow that reads as print-influenced.
- **Yellow Tint** (`{colors.primary-container}`): A lighter derivative used for hover states on yellow elements and low-emphasis chips.

### Text States
- **Dark Hover** (`{colors.text-hover}`): The subtle dark shift on the "Speak to sales" CTA hover — almost imperceptible at `#2a2a2a` vs `#000000` but intentional.
- **Link Blue** (`{colors.link-hover}`): Element Plus utility blue surfacing on link hover and some focus states. Not a brand color; it arrives from the framework layer.
- **Black Focus Ring** (`{colors.focus-ring}`): Keyboard focus uses a solid black outline, consistent with the monochrome system.

### Borders & Surfaces
- **Standard Border** (`{colors.border}`): `1px` hairlines on inputs and cards.
- **Muted Border** (`{colors.border-subtle}`): Button outlines on the dark primary CTA variant.
- **Light Surface** (`{colors.surface}`): `#f5f5f5` tint for card backgrounds and hover surfaces.
- **Dark Surface** (`{colors.surface-dark}`): The black fill used on primary CTA buttons.

### Shadow
- **Shadow Soft** (`{colors.shadow-soft}`): The only shadow in the system appears on the cookie consent modal — a very soft ambient glow (`rgb(199,197,199) 0px 0px 12px 2px`). The page itself is shadow-free.

## Typography

### Font Family
- **Primary**: `CF Basis`, self-hosted (`CFBasis-Regular.woff2`). Fallbacks: `Helvetica Neue, Arial, sans-serif`
- **CF Basis** is Colophon's own grotesque typeface. It combines the neutrality of Helvetica with a warmer, slightly humanist skeleton — visible in its rounded apertures and gentle ink traps. For external implementations, `DM Sans` or `Plus Jakarta Sans` are the closest Google Fonts substitutes.
- No monospace. No serif. A single-family system.
- **OpenType Features**: Default settings. No stylistic alternates or ligature activations were detected. The face's intrinsic character carries the design work.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Campaign headlines, type specimen hero text |
| `display` | Section headers, large promotional copy |
| `heading-section` | Typeface family names in the catalog, page section titles |
| `heading-sub` | Sub-family names, product group labels |
| `body-large` | Long-form typeface descriptions, featured copy at 24px |
| `body` | Standard UI text, footer copy, form labels |
| `nav-link` | Navigation bar links at 14px with generous line-height |
| `button-ui` | CTA buttons at 24px — unusually large for a UI button, aligns with body-large scale |
| `caption` | License type labels, format indicators, small metadata |

### Principles
- **One family, all contexts**: CF Basis is the system typeface, the product, and the brand. The decision to use the foundry's own face throughout is a coherent proof of capability.
- **Large body text signals editorial intent**: At 24px for descriptive copy, the site reads like a type magazine page, not a SaaS feature list.
- **Weight variation is restrained**: 400 for body and display, 500–600 for subheadings, 700 for compact UI labels. No display at heavy weight — CF Basis at 400 is visually confident at scale.
- **Tracking near zero throughout**: CF Basis does not require optical tracking corrections. Letterspace is 0 or near-0 except at small UI sizes where 0.13–0.14px opens the face slightly.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 8px.

The system favors mid-range values — 20px, 24px, 48px — appearing most frequently in section padding and component gutters. The yellow navigation bar carries 10px vertical padding, giving it a compact, confident stature. Section breaks between content areas use 48–64px of vertical whitespace, which reinforces the editorial pacing rather than a feature-list density.

### Grid & Container
- Max content width: approximately 1200px with generous side padding
- Type specimen pages: single-column centered layout, type at full width
- Font catalog pages: flexible card grid, typically 3–4 columns on desktop
- Breakpoints run from 400px to 1024px across 13 defined steps — closely spaced for precise layout control, suggesting the site responds to narrow browser windows as much as mobile devices

### Whitespace Philosophy
- Generous, not sparse: whitespace is structural, holding specimens apart so each typeface can be evaluated independently
- No decorative empty sections — gaps exist at section transitions, not as aesthetic padding
- The yellow navigation bar anchors the top; the rest of the page is unmaterialized until content begins

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, no border | Page canvas, type specimen backgrounds |
| Hairline (Level 1) | `1px solid {colors.border}` | Input fields, card frames, divider lines |
| Subtle Border (Level 2) | `1px solid {colors.border-subtle}` | Button outlines, focused inputs |
| Inset Glow (Level 3) | `rgb(199,197,199) 0px 0px 12px 2px` | Cookie modal ambient shadow |
| Focus Ring | `2px solid {colors.focus-ring}` (black outline) | Keyboard navigation |

**Shadow Philosophy**: Colophon's surface is flat in the typographic sense — like good print design, depth is declared by hierarchy and weight, not by simulated light. The page has no drop shadows on cards or buttons. The single shadow in the system (the modal ambient glow) uses a neutral grey at near-zero spread, closer to a soft edge definition than elevation. This restraint matches the foundry's print sensibility: ink on paper has no shadow.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Hard rectangular frames, section dividers, specimen containers |
| `sm` | 2px | Buttons in default/secondary contexts, input fields, tab indicators |
| `md` | 3px | Tab panels, dividers — minimal softening |
| `pill` | 9999px | Primary CTA buttons ("Speak to sales"), filter chips, cookie consent actions |

The radius philosophy is binary: the working UI is nearly square (2px is so subtle it reads as flat), and the CTA is fully pill. There is nothing in the 8–24px range — no "modern rounding," no friendly card corners. This mirrors how quality type foundry materials often look: mechanically precise with exactly one calculated curve.

## Components

The complete component spec lives in the `components:` token block above.

### Button variants

- **`button-primary`** — Black pill button on white. The signature CTA style: `{colors.surface-dark}` fill, white text, `{rounded.pill}` radius, 15px×30px padding, 24px CF Basis. Used for high-intent actions like "Speak to sales" and "Buy license."
- **`button-secondary`** — Yellow pill button. Applies `{colors.primary}` fill with `{colors.on-primary}` black text. Equally prominent, used for catalog CTAs and secondary purchase paths.
- **`button-ghost`** — Transparent with hairline border. Appropriate for filter and navigation controls where the yellow or black fill would be distracting.

### Cards

Type specimen cards carry no surface elevation — they sit on `{colors.surface}` (`#f5f5f5`) with no border-radius and no shadow. The typeface itself is the object; the card is a neutral mount. On hover, the background can shift to white to create a faint lift through tint contrast alone.

### Inputs

Standard inputs use `{rounded.sm}` (2px), a hairline `{colors.border}` border, and generous vertical padding. Focus shifts the border to `{colors.focus-ring}` (solid black). No glow ring, no colored focus treatment — the black outline is clean against the white surface.

### Badges / Tags

Format and license tags use `{rounded.pill}` with either the yellow fill (for featured or active states) or the neutral `{colors.surface}` grey. Font is `{typography.caption}` at 13px. Colophon uses these to label font formats (OTF, WOFF2), license types (Desktop, Web), and family categories.

### Navigation

The navigation bar is the yellow flood. Background: `{colors.primary}`. Text: `{colors.on-primary}` black. CF Basis at 14px, line-height 2.64 (producing a tall, airy bar). The bar is sticky on scroll. On mobile, the yellow bar collapses to a compact header with a hamburger trigger. The yellow never disappears — it anchors the site's brand identity at every scroll position.

## Do's and Don'ts

### Do
- Use `{colors.primary}` yellow as the navigation surface — it is the brand's defining mark, not an accent
- Apply `{rounded.pill}` exclusively for primary CTA buttons — keep all other UI at `{rounded.sm}` (2px)
- Set body descriptions and featured copy at `{typography.body-large}` (24px) for editorial breathing room
- Use CF Basis (or DM Sans/Plus Jakarta Sans as substitutes) for the entire type system — do not mix serif or mono into the interface
- Use hairline `1px solid {colors.border}` framing on all cards and inputs — no drop shadows
- Keep the page canvas pure white (`{colors.background}`) — no off-white or warm tints
- Rely on `{colors.ink}` and `{colors.ink-secondary}` for all text hierarchy — no mid-grey scale beyond these two
- Apply the yellow badge (`{components.badge}`) for "active" and "featured" state markers

### Don't
- Don't use `{colors.primary}` yellow as a page background below the nav — it belongs in chrome, not content
- Don't introduce mid-range border-radius (4–20px) — the system has no rounding between 3px and 9999px
- Don't use drop shadows on cards or section containers — depth is hairlines only
- Don't reduce button text below 20px on primary CTAs — the 24px pill button scale is deliberate
- Don't use `{colors.link-hover}` blue as a brand color — it is a framework default, not a Colophon color
- Don't add weight-heavy type (700+) at display sizes — CF Basis at 400 is the confident voice at scale
- Don't use color fills or photographic backgrounds behind type specimens — white isolation is the standard
- Don't introduce additional brand colors; the system is yellow + black + white

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <425px | Single-column layout, nav collapses to hamburger |
| Mobile | 425–600px | Stacked catalog cards, compact spacing |
| Tablet | 600–768px | 2-column card grid, reduced side padding |
| Desktop | 768–1024px | 3-column catalog grid, full navigation bar visible |
| Large Desktop | >1024px | 4-column catalog grid, full specimen display |

### Touch Targets
- Pill CTA buttons: 54px+ touch height (15px padding + 24px font) — comfortable
- Navigation links: 44px tap height via line-height 2.64 at 14px
- Filter chips: minimum 36px height on mobile with expanded padding

### Collapsing Strategy
- Navigation bar stays yellow and sticky at every breakpoint; only the link list collapses on mobile
- Type catalog grid collapses from 4 → 2 → 1 columns
- Display text scales down 1 step at tablet and mobile (display-hero → display → heading-section)
- Specimen containers drop to full-width single column for maximum legibility

### Image Behavior
- Type specimen images are vector or high-res PNG — they scale fluidly without quality loss
- No art-direction swaps detected; the same specimen assets render across breakpoints
- Specimen backgrounds stay white regardless of viewport — no responsive dark mode switching

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}` (#ffffff)
- Text: `{colors.ink}` (#000000)
- Brand accent: `{colors.primary}` (#ffee3b, yellow)
- Secondary text: `{colors.ink-secondary}` (#444444)
- Border: `{colors.border}` (#d1d1d1)
- CTA button: `{colors.surface-dark}` (#000000) on white, or `{colors.primary}` on dark
- Nav surface: `{colors.primary}` (#ffee3b)

### Example Component Prompts

- "Create a navigation bar with `{colors.primary}` (#ffee3b) background, `{colors.on-primary}` (#000000) text, CF Basis (or DM Sans) 14px with line-height 2.64. All nav links in black, no hover underline. Sticky on scroll. On mobile, collapse to hamburger preserving the yellow bar."
- "Design a primary CTA button: `{colors.surface-dark}` (#000000) background, white text, CF Basis 24px weight 400, `{rounded.pill}` (50px radius), 15px 30px padding. Hover shifts background to `{colors.text-hover}` (#2a2a2a). No icon, sentence case."
- "Build a type specimen card on `{colors.surface}` (#f5f5f5), zero border-radius, no shadow. Typeface name in `{typography.heading-section}` (24px weight 500), specimen string displayed at `{typography.display-hero}` (64px weight 400) in `{colors.ink}`. Below: format badges using `{components.badge}` in `{colors.primary}` yellow."
- "Create a font detail page hero: pure white background (`{colors.background}`), typeface name at `{typography.display-hero}` (64px, weight 400, CF Basis), a sample pangram below at `{typography.body-large}` (24px), and a black pill CTA using `{components.button-primary}`. No imagery, no gradient — type is the visual."
- "Design a filter chip row: chips use `{components.badge-neutral}` (surface grey background, black text, pill radius, 4px 10px padding) for inactive state. Active chip switches to `{components.badge}` (yellow background, black text). Typography: `{typography.caption}` at 13px."

### Iteration Guide

1. Start with pure white (`{colors.background}`) and a `{colors.primary}` yellow sticky nav — these two establish the Colophon identity before any content is placed
2. Yellow belongs in chrome only: nav, active badges, secondary CTAs — never as page background or body surface
3. Use CF Basis (or DM Sans fallback) at 400 weight for all display type; 500–600 for subheadings; the face is strong enough at 400 that bold display weight is never needed
4. Shape is binary: 2px (`{rounded.sm}`) for UI, pill (`{rounded.pill}`) for CTAs — nothing between
5. Depth is borders: `1px solid {colors.border}` replaces all elevation on cards and containers
6. Text hierarchy uses `{colors.ink}` → `{colors.ink-secondary}` — two tones only; no grey scale beyond these
7. Body text at 24px (`{typography.body-large}`) for type descriptions; 16px (`{typography.body}`) for UI copy

---

## 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 Colophon Foundry. Brand names and trademarks belong to their respective owners.