---
name: Production Type
description: "The site exemplifies how typography can be the primary design element, using scale and negative space to create a premium, gallery-like experience for font discovery."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  secondary: "#757575"
  tertiary: "#ED0000"
  neutral: "#999999"
  bg-soft: "#F2F2F2"
  line: "rgba(0,0,0,0.1)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 72px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-2.9px"
  h1:
    fontFamily: humanist-sans
    fontSize: 40px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "-0.6px"
  body:
    fontFamily: humanist-sans
    fontSize: 15px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  small:
    fontFamily: humanist-sans
    fontSize: 11px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 5px
  md: 6px
  lg: 12px
  pill: 9999px

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

---

## Overview

A refined, white-space-dominant type foundry site focused on large typographic showcases and curated font collections.

*A digital gallery for premium typefaces, blending editorial presentation with functional tooling.*

## Colors

High-contrast monochromatic base with a single, aggressive red accent for primary actions and branding.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#757575`)** — uses `ink-soft` token
- **Accent (`#ED0000`)** — uses `accent` token
- **Muted (`#999999`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.1)`)** — uses `line` token

## Typography

- **Display:** grotesque-sans
- **Body:** humanist-sans

- Display type uses tight negative tracking for visual impact.
- Body text uses generous line-height for readability.
- Primary brand type is a grotesque sans-serif, used consistently across all UI elements.
- Special typeface showcases use the actual font being sold, often in display scale.

## Layout

Asymmetric grid with a wide main content area for font showcases and a sidebar for navigation, using large image cards and tight typography blocks.

*Rhythm:* Generous, breathing rhythm with large vertical gaps between sections to emphasize content hierarchy.

## Elevation & Depth

- Borders: 1px solid rgba(0,0,0,0.1) for subtle dividers; pill-shaped borders for buttons and tags.

## Shapes

- `sm`: 5px
- `md`: 6px
- `lg`: 12px
- `pill`: 9999px

## Components

- **button:** Pill-shaped (9999px radius) with black fill and white text, or ghost buttons with borders.
- **card:** Clean white cards with large image headers and minimal text, used for font collections and playlists.
- **chip:** Small pill-shaped tags for font styles (e.g., 'P' for production) or categories.
- **input:** Minimal text input fields with thin bottom borders and subtle rounded corners.
- **hero:** Massive typographic hero sections showcasing a single font at display scale against a clean background.

## Do's and Don'ts

**Don't:**
- don't use a dark background for the main UI — screenshot shows predominantly white backgrounds with black text.
- don't use multiple accent colors — screenshot shows only red (#ED0000) as a consistent accent against black and white.
- don't use rounded rectangles for primary buttons — screenshot shows pill-shaped (fully rounded) buttons instead.
- don't use heavy drop shadows — screenshot shows flat design with minimal to no shadow usage.
- don't use decorative or script fonts for UI elements — screenshot uses a consistent grotesque sans-serif for all interface text.
- don't clutter the layout with many elements — screenshot shows generous white space and a clear, focused hierarchy.

---

## System Prompt (paste into AI agent)

```
This is a premium type foundry website focusing on font presentation and discovery. The design uses a high-contrast monochromatic base (white #FFFFFF, black #000000) with a single aggressive red accent (#ED0000) for branding and primary actions. Typography is paramount, featuring a grotesque sans-serif for UI and massive display type for font showcases. Critical don'ts: never use dark backgrounds for the main UI, never introduce multiple accent colors, and never use heavy shadows. The layout emphasizes generous white space and clean card-based organization for font collections and playlists. The voice is authoritative and expert, using direct, descriptive headlines.
```