# Frere-Jones Type · Design system migration spec

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

> This site is a masterclass in 'less is more' design, proving that a single, well-executed typeface can serve as the entire visual identity.

## 1. Identity DNA

Frere-Jones Type operates as a refined, old-world craft studio, where the digital interface becomes a clean workshop surface for the examination of letterforms. The system’s identity is defined entirely by the clarity and beauty of the typefaces it presents, allowing the craft itself to be the primary visual language.

**One-liner:** A premium independent type foundry showcasing original typefaces through a stark, editorial design.
**Keywords:** type design · foundry · custom typefaces · retail fonts · independent
**Analogy:** A refined, old-world craft studio that prioritizes the clarity and beauty of letterforms.

## 2. Color

The color system is a disciplined, high-contrast monochrome, with black and white providing the stark foundation for legibility. A single, dusty blue accent is reserved exclusively for featured type specimens, acting as a quiet highlight within the otherwise severe palette.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--ink` | `#000000` | body text |
| `--muted` | `#E6E6E6` | placeholder |
| `--accent` | `#87ADE0` | single accent |
| `--line` | `rgba(0,0,0,1)` | divider |

**Color principle:** High-contrast monochrome with a single, dusty blue accent for featured specimens.

Color is used with restraint, functioning as a functional marker rather than a decorative layer, to keep visual focus anchored to the typography.

## 3. Typography

The typographic voice is split between two distinct roles: bold transitional serifs command attention in large display contexts to showcase font detail, while a clean humanist sans-serif handles all functional UI and body copy with understated clarity.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 86px | 1.0 | 700 | -0.86px | Hero font specimens |
| h1 | 56px | 1.1 | 700 | -0.5px | Major headlines |
| body | 16px | 1.5 | 400 | 0 | General reading text |
| caption | 12px | 1.5 | 400 | 0 | Navigation, metadata, and secondary info |

**Type rules:**
- Use transitional serif for large display type to showcase font details
- Use humanist sans for all functional UI and body copy

## 4. Spacing

A strict 4px baseline grid underpins the system’s rhythm, establishing a consistent vertical measure for all elements.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous whitespace with a strict 4px baseline grid.

## 5. Surfaces

Surfaces are flat and unadorned, rejecting shadows and depth effects in favor of clean separation. Minimal 1px solid black borders are used sparingly to define buttons and subtle separators.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Borders:** 1px solid black for subtle separators and buttons.

## 6. Layout

The layout skeleton is a clean, generous grid structured into distinct sections for hero specimens, about information, blog posts, and custom work. This spatial organization prioritizes large, full-bleed typography blocks as the primary content vessels.

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

**Skeleton:** Clean grid with distinct sections for hero, about, blog, and custom work.

## 7. Motion & Interaction

Motion philosophy favors subtlety and calm, designed to support rather than distract from the act of reading type. The primary interaction is a slow, elegant crossfade between specimens in the hero carousel, maintaining the site’s focused atmosphere.

- **Durations:** micro 100ms · small 250ms · medium 500ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Subtle crossfades between font specimens in the hero carousel

- **Hover:** Subtle color change or underline appears on text links and buttons.
- **Click:** Immediate transition to the next state or page.
- **Transition:** All elements have a 'transition: all' applied for smooth state changes.
- **Keyboard:** Standard browser focus rings with high-contrast black borders.

## 8. Voice & Don'ts

The editorial voice is authoritative, refined, and understated, often using the name of the typeface itself as the headline. Calls to action are quiet text links, letting the work speak without graphical persuasion.

- **Tone:** Authoritative, refined, and understated.
- **Headline style:** Short, direct, and often the name of the typeface itself.
- **CTA style:** Quiet text links like 'More About Us' or 'Read Post →', rarely large buttons.
- **Avoid:** Avoid overly expressive or decorative elements / Avoid bright, neon, or clashing colors / Avoid rounded corners on primary UI elements

### Don'ts
- ❌ Don't use rounded corners on buttons or cards — screenshot shows sharp, 90-degree angles.
- ❌ Don't use drop shadows on UI elements — screenshot shows completely flat surfaces.
- ❌ Don't use a wide, colorful palette — screenshot shows a strict black, white, and single accent palette.
- ❌ Don't use decorative sans-serifs for large displays — screenshot shows bold transitional serifs for specimens.
- ❌ Don't use heavy, chunky borders — screenshot shows very fine, 1px borders or none at all.
- ❌ Don't clutter the interface with icons — screenshot relies almost entirely on text and typography.

The system deliberately avoids decorative excess—forgoing icons, vibrant palettes, and rounded corners—to ensure the letterforms remain the sole protagonists.

## System Prompt (paste into AI tool)

```
This is a premium, editorial-style independent type foundry website. It uses a strict high-contrast monochrome palette (black #000000 and white #FFFFFF) with a single, dusty blue accent (#87ADE0) used specifically for large font specimens. The typography features bold transitional serifs for display text and clean humanist sans-serifs for body copy and UI. The layout is spacious and grid-based, prioritizing the font specimens themselves as the primary visual focus. Key constraints: do not use rounded corners on UI elements; keep borders minimal (1px solid black); avoid drop shadows; and never use more than one accent color at a time. Maintain a highly refined, understated voice that lets the letterforms do the talking.
```
