# Hoefler&Co · Design system migration spec

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

> This site exemplifies how typography itself can be the primary design element, with the foundry's own typefaces serving as both content and interface.

## 1. Identity DNA

The system models itself as a high-end design atelier, where typography is both product and protagonist. Every interface decision defers to the letterform, letting typefaces serve as the primary visual element across both content and structure.

**One-liner:** Premium type foundry presenting typefaces through editorial storytelling and elegant specimen displays.
**Keywords:** typography · foundry · editorial · premium · editorial design
**Analogy:** A high-end design atelier and editorial showcase for typefaces

## 2. Color

A stark, high-contrast scheme divides the canvas between deep interface backgrounds and luminous content panels. A functional bright blue acts as the single chromatic accent, reserved strictly for interactive elements and links.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#232323` | main background |
| `--bg-soft` | `#F5F5F5` | card background |
| `--bg-quiet` | `#333333` | quiet area |
| `--ink` | `#333333` | body text |
| `--ink-soft` | `#86888B` | secondary text |
| `--muted` | `#A5A7A9` | placeholder |
| `--accent` | `#4DAFFF` | single accent |
| `--line` | `rgba(134, 136, 139, 0.2)` | divider |

**Color principle:** High contrast between dark interfaces and light content areas, using a bright blue as a functional accent for links and UI elements.

Color is used structurally to define zones, never decoratively, ensuring the interface recedes completely behind the typographic specimen.

## 3. Typography

The typographic hierarchy relies on a strict pairing of transitional-serif for display headlines and humanist-sans for functional body copy. This combination bridges the gap between classic editorial gravity and modern interface clarity.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 400 | -1px | Large display typography and specimen showcases |
| heading | 21px | 1.28 | 400 | -0.3px | Section headings and article titles |
| body | 15px | 1.47 | 400 | -0.14px | Main body copy and descriptions |
| caption | 10px | 1.3 | 400 | 0px | UI labels, navigation, and small metadata |

**Type rules:**
- Use transitional-serif for display and headline typography to evoke editorial elegance
- Use humanist-sans for body text and UI elements for readability and modern feel
- Maintain tight letter-spacing on display text for a refined, crafted appearance

## 4. Spacing

A consistent 4px baseline grid underpins the rhythm, amplified by generous padding that provides ample breathing room for dense typographic specimens.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px base with generous padding in content areas to create breathing room for typography

## 5. Surfaces

Surfaces are defined by absolute flatness, relying on background contrast rather than depth cues like shadows to separate planes. Minimal borders and sharp, unrounded corners reinforce the austere, crafted aesthetic.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Shadows:**
  - rgba(255, 255, 255, 0.15) 0px 1px 0px 0px
- **Borders:** Minimal use of borders; relies on background contrast and spacing for separation

## 6. Layout

The layout skeleton is engineered to accommodate large-scale typography specimens and expansive visual blocks. A rigid grid enforces a clear hierarchy, prioritizing reading order and specimen visibility over decorative arrangement.

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

**Skeleton:** Grid-based layout with large visual areas for typography specimens and clear content hierarchy

## 7. Motion & Interaction

Motion is treated as functional feedback rather than ornament, limited to smooth fill transitions and opacity fades that guide the eye without distraction. These interactions operate on varied durations, subtly signaling the weight and importance of the interface element.

- **Durations:** micro 150ms · small 200ms · medium 500ms
- **Easing:** `cubic-bezier(0.12, 0.91, 0.65, 1)`
- **Patterns:**
  - Smooth fill transitions on interactive elements
  - Color transitions on hover states
  - Opacity fades for content reveals

- **Hover:** Subtle color changes and fill transitions on interactive elements
- **Click:** Immediate response with smooth transition feedback
- **Transition:** All transitions apply universally with varied durations based on element importance
- **Keyboard:** Standard focus navigation supported throughout the interface

## 8. Voice & Don'ts

The editorial voice is knowledgeable and authoritative, speaking about design with refined confidence rather than casual enthusiasm. Headlines function as bold statements and specimens, while calls to action remain understated, inviting exploration over conversion.

- **Tone:** Knowledgeable, refined, and editorial; speaks with authority about typography and design
- **Headline style:** Bold, confident statements that showcase typographic specimens and design philosophy
- **CTA style:** Understated and elegant; invites exploration rather than aggressive conversion
- **Avoid:** Overly casual or trendy language / Aggressive sales messaging / Complex technical jargon without context

### Don'ts
- ❌ Don't use rounded corners on content blocks — screenshot shows sharp, clean edges on all containers
- ❌ Don't add drop shadows to cards or content areas — screenshot shows flat, borderless design
- ❌ Don't use bold weights for body text — screenshot shows consistent 400 weight throughout
- ❌ Don't clutter the interface with decorative elements — screenshot shows restraint with ample white space
- ❌ Don't use sans-serif for display headlines — screenshot shows transitional-serif for prominent typography
- ❌ Don't apply heavy borders to separate sections — screenshot relies on background color contrast instead

They deliberately forgo decorative flourishes, aggressive sales language, and complex jargon, stripping the interface down to its essential typographic function.

## System Prompt (paste into AI tool)

```
Hoefler&Co (typography.com) is a premium type foundry presenting typefaces through editorial storytelling and elegant specimen displays. The design features a dark interface (#232323) with light content areas (#F5F5F5), using transitional-serif for display typography and humanist-sans for body text. A bright blue accent (#4DAFFF) provides functional highlights for links and UI elements. The layout emphasizes large typography specimens with generous spacing and minimal decorative elements. Key constraints: maintain sharp corners on all containers, avoid drop shadows, keep body text at 400 weight, and ensure ample breathing room between content blocks. The voice should be knowledgeable and refined, speaking with authority about typography while avoiding casual language or aggressive sales messaging.
```
