---
name: Fonts In Use
description: "A perfect example of functional curation, where the interface intentionally recedes to let the typography specimens provide all the visual personality."
version: alpha

colors:
  background: "#F0F0F0"
  primary: "#000000"
  neutral: "#999999"
  bg-soft: "#FFFFFF"
  muted-soft: "#DDDDDD"
  line: "rgba(0,0,0,1.0)"

typography:
  display:
    fontFamily: condensed-sans
    fontSize: 36px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "normal"
  h2:
    fontFamily: humanist-sans
    fontSize: 18px
    lineHeight: 1.6
    fontWeight: 700
    letterSpacing: "normal"
  body:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.6
    fontWeight: 400
    letterSpacing: "normal"
  caption:
    fontFamily: humanist-sans
    fontSize: 10px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "normal"

rounded:
  sm: 2px
  md: 3px
  lg: 0px
  pill: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  2xl: 24px
  3xl: 32px

---

## Overview

An independent archive of typography showcasing real-world usage.

*A meticulously curated museum exhibition for type specimens.*

## Colors

A strictly utilitarian palette that prioritizes content readability and lets the typography examples provide all visual color.

- **Background (`#F0F0F0`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Muted (`#999999`)** — uses `muted` token
- **Borders (`rgba(0,0,0,1.0)`)** — uses `line` token

## Typography

- **Display:** condensed-sans
- **Body:** humanist-sans
- **Mono:** geometric-sans

## Layout

A dense, image-heavy 4-column masonry grid with minimal margins between items.

*Rhythm:* Strict 4px base grid with utilitarian padding and margins.

## Elevation & Depth

- Borders: Solid black borders (1px) define primary structural elements, with 7px borders occasionally used for heavy visual separation.

## Shapes

- `sm`: 2px
- `md`: 3px
- `lg`: 0px
- `pill`: 0px

## Components

- **button:** Minimal, text-based links with no background, relying on bold weight or underline for affordance.
- **card:** A stark image-text combination with a clear typographic hierarchy, lacking any padding, shadows, or background.
- **chip:** Plain text-based filters separated by a solid forward slash.
- **input:** A minimal, single-line search box with a gray border and a top-aligned label.
- **hero:** A large, condensed typographic logo paired with a concise descriptive tagline.

## Do's and Don'ts

**Don't:**
- don't use shadows — screenshot shows flat images with no drop shadows
- don't use rounded corners — screenshot shows sharp, 0px or 2px radius corners
- don't use gradients — screenshot shows flat, solid background colors
- don't use decorative fonts — screenshot shows strictly functional sans-serif typography for the UI
- don't add excessive padding — screenshot shows a dense layout with minimal whitespace between grid items
- don't use background colors for cards — screenshot shows images sitting directly on the background

---

## System Prompt (paste into AI agent)

```
Fonts In Use is an independent, scholarly archive of typography. The UI is strictly utilitarian, featuring a dense 4-column masonry grid of real-world typography examples. The palette is entirely monochromatic: #F0F0F0 backgrounds, #000000 text, and #999999 accents. Typography relies on a condensed sans-serif for branding and a humanist sans-serif for body text. Critical don'ts: 1. Never use decorative backgrounds or gradients. 2. Avoid soft card shadows or rounded corners. 3. Do not add excessive padding that breaks the dense archival feel.
```