---
name: Typelist Upstatement
description: "An excellent example of how extreme restraint, bold geometry, and generous typography can create a powerful, expressive editorial experience."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#15181E"
  neutral: "#E5E5E5"
  line: "rgba(21,24,30,1.0)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 22px
    lineHeight: 1.36
    fontWeight: 500
    letterSpacing: "2px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: humanist-sans
    fontSize: 12px
    lineHeight: 1.36
    fontWeight: 400
    letterSpacing: "2px"

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

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

---

## Overview

A clean, expressive editorial showcase for creative typography.

*A curated library of expressive display typefaces.*

## Colors

Stark, high-contrast monochrome base interrupted only by vibrant, flat geometric accents.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#15181E`)** — uses `ink` token
- **Muted (`#E5E5E5`)** — uses `muted` token
- **Borders (`rgba(21,24,30,1.0)`)** — uses `line` token

## Typography

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

- Uppercase transform is used consistently for labels and navigation
- Letter spacing is used generously to create an airy, editorial feel
- Serif fonts are utilized sparingly for specific stylistic emphasis

## Layout

A highly asymmetrical, gallery-like layout that prioritizes visual impact over dense information grids.

*Rhythm:* Open and airy, relying heavily on large, deliberate white space to frame bold visual elements.

## Elevation & Depth

- Borders: Minimal to non-existent; separation is achieved through spatial contrast and flat color.

## Shapes

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

## Components

- **button:** Minimal, purely typographic links without explicit borders or background shapes.
- **card:** Bold, flat geometric shapes (like large circles) acting as primary interactive units.
- **hero:** A striking, minimalist composition combining expansive whitespace with aggressive, flat geometric color bands.

## Do's and Don'ts

**Don't:**
- Don't use generic UI components like standard buttons or cards — screenshot shows flat, custom geometric shapes and simple typography links instead.
- Don't apply complex shadows or gradients — screenshot shows flat, solid color fields and stark white space.
- Don't use dense, cluttered layouts — screenshot shows expansive, deliberate whitespace framing minimal content.
- Don't use casual or overly playful typography — screenshot shows highly structured, uppercase tracking and geometric arrangements.
- Don't use dark mode or muted, low-contrast palettes — screenshot shows a stark white background with high-contrast black text and vibrant colors.
- Don't rely on traditional UI borders for separation — screenshot shows spatial contrast and flat color blocks as the primary visual dividers.

---

## System Prompt (paste into AI agent)

```
This site is a minimalist, expressive editorial showcase for typography, positioning itself as a curated gallery of display typefaces. The design DNA relies on a stark monochrome base of pure white (#FFFFFF) and near-black ink (#15181E), interrupted only by bold, flat geometric accents like vibrant purple and yellow. The primary typography categories are humanist-sans for both display and body text, characterized by generous letter spacing (2px) and consistent uppercase transforms. Critical design constraints include avoiding all complex UI patterns, rejecting dark mode or muted palettes, and maintaining expansive, deliberate whitespace instead of dense grid layouts. The interaction model is subtle, relying on smooth 0.3s transitions (cubic-bezier(0.215, 0.61, 0.355, 1)) rather than aggressive feedback.
```