---
name: Hoefler&Co
description: "This site exemplifies how typography itself can be the primary design element, with the foundry's own typefaces serving as both content and interface."
version: alpha

colors:
  background: "#232323"
  primary: "#333333"
  secondary: "#86888B"
  tertiary: "#4DAFFF"
  neutral: "#A5A7A9"
  bg-soft: "#F5F5F5"
  bg-quiet: "#333333"
  line: "rgba(134, 136, 139, 0.2)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-1px"
  heading:
    fontFamily: humanist-sans
    fontSize: 21px
    lineHeight: 1.28
    fontWeight: 400
    letterSpacing: "-0.3px"
  body:
    fontFamily: humanist-sans
    fontSize: 15px
    lineHeight: 1.47
    fontWeight: 400
    letterSpacing: "-0.14px"
  caption:
    fontFamily: humanist-sans
    fontSize: 10px
    lineHeight: 1.3
    fontWeight: 400
    letterSpacing: "0px"

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

Premium type foundry presenting typefaces through editorial storytelling and elegant specimen displays.

*A high-end design atelier and editorial showcase for typefaces*

## Colors

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

- **Background (`#232323`)** — uses `bg` token
- **Primary text (`#333333`)** — uses `ink` token
- **Secondary text (`#86888B`)** — uses `ink-soft` token
- **Accent (`#4DAFFF`)** — uses `accent` token
- **Muted (`#A5A7A9`)** — uses `muted` token
- **Borders (`rgba(134, 136, 139, 0.2)`)** — uses `line` token

## Typography

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

- 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

## Layout

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

*Rhythm:* Consistent 4px base with generous padding in content areas to create breathing room for typography

## Elevation & Depth

- rgba(255, 255, 255, 0.15) 0px 1px 0px 0px
- Borders: Minimal use of borders; relies on background contrast and spacing for separation

## Shapes

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

## Components

- **button:** Minimal styling, primarily text-based with subtle hover transitions
- **card:** Full-bleed image blocks with overlaid text or clean separation between visual and content areas
- **chip:** Not prominently featured; interface relies on clean navigation links
- **input:** Minimal underline-only input fields with subtle placeholder text
- **hero:** Large typography specimens filling the viewport with bold visual impact

## Do's and Don'ts

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

---

## System Prompt (paste into AI agent)

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