---
name: Typotheque
description: "This site is a perfect example of a modern typography foundry, blending editorial photography with bold, functional UI elements to showcase global language support."
version: alpha

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

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 40px
    lineHeight: 1.1
    fontWeight: 700
    letterSpacing: "0px"
  headline:
    fontFamily: humanist-sans
    fontSize: 20px
    lineHeight: 1.3
    fontWeight: 400
    letterSpacing: "0px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "0.275px"

rounded:
  sm: 4px
  md: 8px
  lg: 24px
  pill: 9999px

spacing:
  xs: 4px
  sm: 8px
  md: 10px
  lg: 16px
  xl: 20px
  2xl: 24px
  3xl: 30px

---

## Overview

A premium type foundry showcasing global font systems and editorial projects with a clean, image-rich interface.

*A digital exhibition of typographic craftsmanship and linguistic diversity*

## Colors

High-contrast black and white foundations punctuated by vibrant, saturated accent blocks

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

## Typography

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

- Body text uses a standard 16px base size with a 1.0 line-height
- Headings use a bold 40px size with a relaxed 1.1 line-height
- UI labels and secondary text use a slightly smaller 13px size
- Letter-spacing is slightly increased for small caps or labels

## Layout

A multi-column grid for browsing font collections, featuring a full-width hero image above and large, vibrant card blocks below

*Rhythm:* Generous whitespace around major sections and a consistent 20px padding for standard content blocks

## Elevation & Depth

- Borders: Thin 1px borders in subtle grays, primarily used for structural separation

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 24px
- `pill`: 9999px

## Components

- **button:** Pill-shaped with a 9999px border-radius, featuring both solid and transparent styles
- **card:** Large rectangular blocks with rounded corners (24px radius) and bold, saturated background colors
- **chip:** Tall, vertical text labels used within data visualization grids
- **input:** Minimalist search interface represented by a simple magnifying glass icon
- **hero:** A full-width, high-resolution photographic landscape with a subtle dark gradient overlay at the bottom for text legibility

## Do's and Don'ts

**Don't:**
- Don't use generic sans-serif fonts — screenshot shows a distinct humanist sans with specific character
- Don't use a rigid 8px grid — screenshot shows flexible spacing using values like 10, 20, 30, and 80px
- Don't make buttons rectangular — screenshot shows consistently pill-shaped buttons with a 9999px radius
- Don't use large drop shadows — screenshot shows completely flat surfaces with no shadow depth
- Don't use small, dense text — screenshot shows generous line-heights (1.0 to 1.3) and clear font sizing
- Don't rely on just one background color — screenshot shows a mix of pure white, pure black, and vibrant saturated blocks

---

## System Prompt (paste into AI agent)

```
Positioning: A premium type foundry and editorial platform focusing on global language support and inclusive design. Key colors: #FFFFFF for main backgrounds, #000000 for primary text and deep sections, #F26522 for high-energy accents and cards. Font categories: Clean humanist-sans for all UI and body copy. Critical don'ts: Don't use rectangular buttons (they are always pill-shaped); Don't apply drop shadows to cards (the layout is flat and relies on solid colors); Don't use a rigid grid system (spacing is generous and flexible with varied padding and gaps).
```