---
name: 205TF
description: "Worth including as a prime example of a 'restraint-first' design system where extreme minimalism and custom interaction patterns are used to elevate a specialized product (type specimens)."
version: alpha

colors:
  background: "#000000"
  primary: "#FFFFFF"
  secondary: "#808080"
  tertiary: "#FFFF00"
  neutral: "#CCCCCC"
  bg-quiet: "#EAEAE9"
  line: "rgba(255,255,255,1.0)"

typography:
  display:
    fontFamily: didone-serif
    fontSize: 100px
    lineHeight: 0.95
    fontWeight: 400
    letterSpacing: "-2px"
  heading:
    fontFamily: transitional-serif
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-1px"
  body:
    fontFamily: transitional-serif
    fontSize: 14px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0"

rounded:
  sm: 0px
  md: 0px
  lg: 24px
  pill: 999px

spacing:
  xs: 7px
  sm: 14px
  md: 28px
  lg: 56px

---

## Overview

A minimalist, high-contrast type foundry gallery that lets specimen typography speak for itself.

*A curated black-box gallery where type specimens are presented as monolithic artifacts.*

## Colors

Absolute stark contrast to elevate the inherent character and craftsmanship of the typefaces being presented.

- **Background (`#000000`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Secondary text (`#808080`)** — uses `ink-soft` token
- **Accent (`#FFFF00`)** — uses `accent` token
- **Muted (`#CCCCCC`)** — uses `muted` token
- **Borders (`rgba(255,255,255,1.0)`)** — uses `line` token

## Typography

- **Display:** didone-serif
- **Body:** transitional-serif

- Maintain high contrast by strictly using white text on black backgrounds for all specimens.
- Utilize extreme tracking (negative letter-spacing) on large-scale display typography to tighten visual density.
- Reserve bold weights strictly for specific specimen showcases, keeping the UI strictly at a 400 weight.

## Layout

A strict two-column asymmetric grid on desktop that completely collapses into a single continuous vertical stack on mobile.

*Rhythm:* Strict 7-point base unit applied to all padding, gaps, and margins, creating a highly constrained spatial grid.

## Elevation & Depth

- Borders: Flat, clean edges or dashed outlines (used in the hero graphic), with occasional 1px or 2px solid strokes for interactive grid states.

## Shapes

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

## Components

- **button:** Minimal text-only links or custom pointer cursors (left/right arrows) that hide traditional UI in favor of direct interaction.
- **card:** Full-bleed black blocks acting as specimen containers, framed by a white background grid with distinct 24px corner radii.
- **chip:** A high-contrast rectangular badge featuring a vibrant yellow background (#FFFF00) and black text for statuses like 'Updated'.
- **input:** Not visible in the provided screenshot.
- **hero:** A massive, dominating black container featuring an oversized serif specimen graphic and custom dashed outlines.

## Do's and Don'ts

**Don't:**
- Don't introduce secondary colors — screenshot shows a strictly achromatic black and white palette, save for a single functional yellow badge.
- Don't use bold or heavy UI weights — screenshot shows all navigation and UI elements rendered in a consistent 400 weight.
- Don't apply drop shadows or 3D effects — screenshot shows completely flat, graphic surfaces with no depth cues.
- Don't use rounded corners on cards — screenshot shows the black specimen containers fitting perfectly square within a 24px radius outer frame.
- Don't create dense text paragraphs — screenshot shows the UI relies almost entirely on massive display typography and sparse navigation links.
- Don't use default browser cursors on interactive zones — screenshot clearly demonstrates custom arrow cursor images for left/right navigation.

---

## System Prompt (paste into AI agent)

```
205TF is a premium digital type foundry website that utilizes a stark, minimalist black-and-white aesthetic to let its font specimens speak for themselves. The UI relies on a strict 7-point spacing grid and a 12-column layout, ensuring a highly structured yet dramatic presentation. Key colors are limited to pure black (#000000) and white (#FFFFFF), with a solitary high-contrast yellow (#FFFF00) used sparingly for status badges like 'Updated'. The typography categories are predominantly transitional-serif and didone-serif, though the UI navigation is set in a mono-like geometric sans. Critical constraints include: never introduce secondary or decorative colors, maintain a strict 400 font weight across all standard UI elements, and avoid traditional button components in favor of custom SVG cursors and text links to preserve the gallery-like purity of the layout.
```