---
name: Frere-Jones Type
description: "This site is a masterclass in 'less is more' design, proving that a single, well-executed typeface can serve as the entire visual identity."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  tertiary: "#87ADE0"
  neutral: "#E6E6E6"
  line: "rgba(0,0,0,1)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 86px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-0.86px"
  h1:
    fontFamily: humanist-sans
    fontSize: 56px
    lineHeight: 1.1
    fontWeight: 700
    letterSpacing: "-0.5px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"
  caption:
    fontFamily: humanist-sans
    fontSize: 12px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"

rounded:
  sm: 0px
  md: 0px
  lg: 0px
  pill: 999px

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

---

## Overview

A premium independent type foundry showcasing original typefaces through a stark, editorial design.

*A refined, old-world craft studio that prioritizes the clarity and beauty of letterforms.*

## Colors

High-contrast monochrome with a single, dusty blue accent for featured specimens.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Accent (`#87ADE0`)** — uses `accent` token
- **Muted (`#E6E6E6`)** — uses `muted` token
- **Borders (`rgba(0,0,0,1)`)** — uses `line` token

## Typography

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

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

## Layout

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

*Rhythm:* Generous whitespace with a strict 4px baseline grid.

## Elevation & Depth

- Borders: 1px solid black for subtle separators and buttons.

## Shapes

- `sm`: 0px
- `md`: 0px
- `lg`: 0px
- `pill`: 999px

## Components

- **button:** Simple text with underline or a black background with white text; no rounded corners.
- **card:** Full-width sections or bold grid blocks for custom work, typically black with white text.
- **chip:** Simple underlined text tags like 'Releases'.
- **input:** Minimalist, borderless search bar.
- **hero:** Massive, full-bleed typography specimens in black or blue, designed to showcase the font.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```