---
name: Diagram
description: "This site is worth including as a radical example of structural minimalism, reducing UI design to its most fundamental, unadorned components."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  neutral: "#000000"
  line: "rgba(0,0,0,1.0)"

typography:
  body:
    fontFamily: transitional-serif
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "normal"

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

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

---

## Overview

An ultra-minimal, abstract visual system that reduces interface design to its most basic structural components.

*A gallery of unrendered primitives or a conceptual 'under the hood' view of software.*

## Colors

Absolute high-contrast minimalism using only pure black and pure white to convey structure and essence.

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

## Typography

- **Display:** transitional-serif
- **Body:** transitional-serif
- **Mono:** transitional-serif

- Use the same transitional serif font for all text roles.
- Maintain a consistent 16px base size with a standard weight of 400.
- Apply transitions to all elements for subtle state changes.

## Layout

Composed of isolated, bordered rectangular primitives that float in a void.

*Rhythm:* Not visibly defined; relies on absolute positioning or spacing primitives.

## Elevation & Depth

- Borders: 1px solid rgb(0, 0, 0) applied to structural boundaries.

## Shapes

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

## Components

- **button:** Not observed as a standard component; interactions are primitive state changes.
- **card:** Not observed; layout uses isolated bordered boxes.
- **chip:** Not observed.
- **input:** Not observed as a standard form element.
- **hero:** A sparse, abstract composition of basic elements on a white background.

## Do's and Don'ts

**Don't:**
- don't use multiple font families — screenshot shows a single transitional serif typeface used everywhere.
- don't introduce color accents — screenshot shows a strictly monochromatic black and white palette.
- don't add decorative borders or shadows — screenshot shows only thin, solid black structural lines.
- don't use rounded corners — screenshot shows sharp, 90-degree angles on all elements.
- don't apply complex animations — screenshot implies a simple 'all' transition for state changes.
- don't clutter the layout — screenshot shows vast white space and minimal, isolated components.

---

## System Prompt (paste into AI agent)

```
Diagram is a minimalist, experimental design system that strips digital interfaces down to their essential black-and-white structural primitives. The visual language is defined by a stark monochromatic palette (ink #000000, background #FFFFFF) and the consistent use of a single transitional serif typeface at a standard 16px size. Interactions are handled by a subtle, universal transition on all properties. The layout feels like an abstract gallery of bare UI components. Critical constraints: Never introduce high-chroma accent colors. Do not use multiple font categories or decorative typography. Avoid adding shadows, depth, or rounded corners to any element.
```