---
version: alpha
name: Uncut
description: A stark editorial type-library aesthetic — near-monochrome black on warm off-white, oversized grotesk display type paired with a monospaced UI voice, list-driven specimen layouts, hairline rules instead of cards, and almost no rounding. Typography is the entire interface.
colors:
  # Canvas + ink
  background: "#f2f0ec"
  surface: "#f2f0ec"
  surface-soft: "#e8e5df"
  ink: "#111111"
  ink-pure: "#000000"
  ink-secondary: "#555350"
  ink-muted: "#8a8780"

  # Accent — single hot signal color, used sparingly
  primary: "#1a1a1a"
  accent: "#ff3b00"

  # Lines + chrome
  rule: "#d8d5cf"
  border: "#1a1a1a"

  # Interactive
  link: "#111111"
  link-hover: "#ff3b00"

  # On-color
  on-primary: "#f2f0ec"
  on-accent: "#f2f0ec"

  # Dark mode counter-surface (specimen toggles)
  surface-inverse: "#111111"
  ink-inverse: "#f2f0ec"

typography:
  display-hero:
    fontFamily: "Space Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 88px
    fontWeight: 500
    lineHeight: 0.95
    letterSpacing: -3px
  display:
    fontFamily: "Space Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 64px
    fontWeight: 500
    lineHeight: 1.00
    letterSpacing: -2px
  section-heading:
    fontFamily: "Space Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: -1.2px
  card-title:
    fontFamily: "Space Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.15
    letterSpacing: -0.6px
  body-large:
    fontFamily: "Space Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: 0px
  body:
    fontFamily: "Space Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  mono-label:
    fontFamily: "Space Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.2px
  mono-caption:
    fontFamily: "Space Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.4px
  mono-meta:
    fontFamily: "Space Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0.6px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 40px
  3xl: 64px
  4xl: 120px

rounded:
  none: 0px
  micro: 2px
  sm: 4px
  pill: 9999px

components:
  # Primary action — solid black, mono label, near-square
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-primary}"
    typography: "{typography.mono-label}"
    rounded: "{rounded.none}"
    padding: 12px 20px
  button-primary-hover:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.on-accent}"
    typography: "{typography.mono-label}"
    rounded: "{rounded.none}"
    padding: 12px 20px

  # Secondary — hairline outline, transparent fill
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.mono-label}"
    rounded: "{rounded.none}"
    padding: 12px 20px
    borderColor: "{colors.border}"

  # Filter / tag pill — the one rounded element
  tag:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.mono-meta}"
    rounded: "{rounded.pill}"
    padding: 4px 10px

  # Specimen row — list item, hairline-separated, no card chrome
  specimen-row:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.display}"
    rounded: "{rounded.none}"
    padding: 24px 0px
    borderColor: "{colors.rule}"

  # Inverse specimen preview (dark toggle)
  specimen-inverse:
    backgroundColor: "{colors.surface-inverse}"
    textColor: "{colors.ink-inverse}"
    typography: "{typography.display}"
    rounded: "{rounded.none}"
    padding: 40px

  # Input — hairline underline only
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.mono-label}"
    rounded: "{rounded.none}"
    padding: 8px 0px
    borderColor: "{colors.border}"

  # Top nav — sticky, transparent, mono links
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.mono-label}"
    padding: 16px 24px
    borderColor: "{colors.rule}"

  # Meta label / category caption
  caption:
    textColor: "{colors.ink-muted}"
    typography: "{typography.mono-caption}"
---

# Uncut Design System

## Overview

Uncut is a free type library, and its website is a manifesto for that mission: the interface gets out of the way so the typography can perform. The canvas is a warm off-white (`{colors.background}`) rather than pure white, lending the page a paper-like, editorial calm. Against it sits near-black ink (`{colors.ink}`), and almost nothing else. There are no drop shadows, no gradients, no rounded cards. The structure is held together by hairline rules (`{colors.rule}`) and whitespace alone.

The typographic system is deliberately bilingual. Oversized grotesk display type — set here with Space Grotesk as the closest open analogue — carries the specimen names and hero statements at enormous sizes with tight negative tracking, so type fills the viewport like a poster. Underneath it runs a monospaced voice (Space Mono) for every piece of UI chrome: nav links, filters, metadata, byline credits, license tags. This split — expressive display for content, mono for the machinery — is the brand's core move. The mono voice reads like a terminal or a spec sheet, framing each font as a catalogued, technical object.

Layout is list-first. Fonts are presented as rows separated by thin rules, each row a giant live specimen of the typeface it names. The result is closer to a printed type-catalogue or a record-store rack than a typical SaaS grid. The single accent — a hot red-orange (`{colors.accent}`) — appears only on hover and active states, a flash of signal against the monochrome that never becomes decoration.

**Key Characteristics:**
- Warm off-white paper canvas (`{colors.background}`), not pure white
- Near-black ink with no true black except for deliberate fills
- Oversized grotesk display type with tight negative tracking — type as poster
- Monospaced voice (Space Mono) for ALL UI chrome: nav, filters, metadata, credits
- Hairline rules (`{colors.rule}`) instead of cards, shadows, or borders-as-boxes
- A single hot accent (`{colors.accent}`) reserved for hover/active only
- Square corners everywhere except pill-shaped filter tags
- List-driven, specimen-first layout like a printed type catalogue

## Colors

### Primary
- **Ink** (`{colors.ink}`): Primary text, headings, hairline borders when emphatic.
- **Paper** (`{colors.background}`): The warm off-white canvas and default surface.
- **True Black** (`{colors.ink-pure}`): Reserved for inverse specimen previews and pure fills.

### Text Scale
- **Ink Secondary** (`{colors.ink-secondary}`): Supporting copy, tag text.
- **Ink Muted** (`{colors.ink-muted}`): Metadata, captions, license labels.

### Accent
- **Uncut Red** (`{colors.accent}`): Hover and active signal only — links, button hover, interactive emphasis. Never decorative.

### Lines & Chrome
- **Rule** (`{colors.rule}`): Hairline separators between specimen rows and sections.
- **Border** (`{colors.border}`): Emphatic 1px outlines on secondary buttons and inputs.
- **Surface Soft** (`{colors.surface-soft}`): Subtle tint for filter tags and hover wells.

### Inverse
- **Surface Inverse** (`{colors.surface-inverse}`): Dark specimen-preview background.
- **Ink Inverse** (`{colors.ink-inverse}`): Paper-colored text on the dark surface.

## Typography

### Font Family
- **Display**: `Space Grotesk`, fallbacks `Helvetica Neue, Arial, sans-serif` — a grotesk standing in for Uncut's catalogued display faces.
- **Monospace**: `Space Mono`, fallbacks `ui-monospace, SFMono-Regular, Menlo, monospace` — the UI/metadata voice.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.mono-label}`, etc.).

| Token | Use |
|---|---|
| `display-hero` | 88px poster-scale hero specimen |
| `display` | 64px specimen-row type names |
| `section-heading` | Section titles |
| `card-title` | Sub-headings, specimen detail titles |
| `body-large` | Lead paragraphs |
| `body` | Standard reading text |
| `mono-label` | Nav links, buttons, filters |
| `mono-caption` | Captions, secondary metadata |
| `mono-meta` | License tags, byline credits, smallest meta |

### Principles
- **Two voices, strict roles**: Grotesk display for content, Space Mono for every piece of chrome. Never mix them.
- **Negative tracking scales with size**: -3px at 88px relaxing to 0 at body sizes.
- **Mono as spec-sheet**: Monospaced metadata frames each font as a catalogued technical object.
- **Type is the interface**: Specimens are set huge and live; the layout exists to display them.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base rhythm is 8px, with a dramatic jump to `{spacing.4xl}` (120px) for poster-scale section breaks.

### Grid & Container
- Generous max content width, often near edge-to-edge for specimen rows
- Hero: single oversized specimen statement
- Body: vertical list of specimen rows separated by `{colors.rule}` hairlines
- Filters: horizontal mono-label row pinned near the top

### Whitespace Philosophy
- **Paper margins**: Wide outer margins frame the type like a printed catalogue.
- **Rules, not boxes**: Separation comes from hairline rules and whitespace, never cards.
- **Let type breathe**: Each specimen row gets vertical room so the typeface reads at full scale.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, paper background | Everything by default |
| Rule (Level 1) | 1px `{colors.rule}` separator | Row and section division |
| Emphatic (Level 1b) | 1px `{colors.border}` outline | Secondary buttons, inputs |
| Inverse (Level 2) | Solid `{colors.surface-inverse}` fill | Dark specimen previews |

**Shadow Philosophy**: There are no shadows. Depth is expressed entirely through hairline rules, the paper-vs-ink contrast, and the occasional inverse fill. The system reads as flat, printed, and material rather than layered.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Buttons, inputs, rows — the default |
| `micro` | 2px | Rare softening |
| `sm` | 4px | Small interactive wells |
| `pill` | 9999px | Filter tags only |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.specimen-row}`).

### Buttons
- **`button-primary`** — Solid ink fill, paper mono label, square corners. Hovers to `{colors.accent}`.
- **`button-secondary`** — Transparent on paper with a 1px `{colors.border}` outline, mono label.

### Tags & Filters
- **`tag`** — The one rounded element: pill-shaped, soft-tinted, mono-meta text for categories and licenses.

### Specimens
- **`specimen-row`** — A hairline-separated list row that sets the named typeface at display scale. The atomic unit of the site.
- **`specimen-inverse`** — Dark-surface preview for testing type on black.

### Inputs
- **`input`** — Underline-only: a single 1px `{colors.border}` baseline, mono label, no box.

### Navigation
- **`nav-bar`** — Sticky, transparent on paper, mono-label links, hairline rule beneath.

## Do's and Don'ts

### Do
- Use the warm off-white `{colors.background}`, never pure white
- Set content type huge with tight negative tracking
- Use Space Mono for ALL chrome — nav, filters, metadata, credits
- Separate content with hairline rules, not cards or shadows
- Reserve `{colors.accent}` for hover/active states only
- Keep corners square everywhere except filter tags

### Don't
- Don't introduce drop shadows or gradients
- Don't put the accent red into static, non-interactive elements
- Don't set UI metadata in the grotesk — mono is the chrome voice
- Don't round buttons, inputs, or rows
- Don't box specimens into cards — rules and whitespace only
- Don't use pure white surfaces

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, hero specimen scales down, filters wrap/scroll |
| Tablet | 600–1024px | Wider specimen rows, expanded margins |
| Desktop | 1024–1440px | Full edge-to-edge specimen list |
| Large | >1440px | Centered with generous paper margins |

### Touch Targets
- Mono nav and filter links spaced for tap comfort
- Buttons use 12px vertical padding
- Filter tags carry 4px/10px padding

### Collapsing Strategy
- Hero specimen: 88px scales down proportionally, keeping negative tracking
- Filter row: horizontal scroll on mobile
- Specimen rows: maintain hairline separation, reduce vertical padding
- Margins: wide paper margins tighten toward the edges on mobile

### Image Behavior
- Specimen previews are live type, not raster images
- Inverse previews maintain their dark fill at all sizes

---

## Agent Prompt Guide

### Quick Color Reference
- Canvas: Paper `{colors.background}`
- Heading text: Ink `{colors.ink}`
- Body text: Ink Secondary `{colors.ink-secondary}`
- Metadata: Ink Muted `{colors.ink-muted}`
- Separator: Rule `{colors.rule}`
- Hover/active: Uncut Red `{colors.accent}`

### Example Component Prompts
- "Create a specimen row on warm off-white `{colors.background}`. Type name in Space Grotesk 64px weight 500, letter-spacing -2px, color `{colors.ink}`. Below it a metadata line in Space Mono 12px `{colors.ink-muted}`. Separate from the next row with a 1px `{colors.rule}` hairline. No card, no shadow."
- "Build a filter bar: horizontal row of pill tags, `{colors.surface-soft}` background, `{colors.ink-secondary}` text, Space Mono 11px, 4px/10px padding, 9999px radius. Active tag fills `{colors.ink}` with `{colors.on-primary}` text."
- "Design a primary button: solid `{colors.ink}` fill, `{colors.on-primary}` Space Mono 13px label, square corners, 12px/20px padding. On hover swap fill to `{colors.accent}`."
- "Create nav: sticky transparent bar on paper, Space Mono 13px links in `{colors.ink}`, hairline `{colors.rule}` beneath, links turn `{colors.accent}` on hover."

### Iteration Guide
1. Paper off-white over pure white, always
2. Grotesk for content, Space Mono for every piece of chrome
3. Hairline rules and whitespace replace cards and shadows
4. Square corners; pills only for filter tags
5. The accent red is a hover/active signal, never static decoration
6. Set specimen type as large as the layout allows — type is the interface

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Uncut. Brand names and trademarks belong to their respective owners.