---
version: alpha
name: Dream Type
description: A type foundry's editorial canvas — near-black paper with bone-white ink, oversized grotesk display headlines paired with a monospaced technical voice for specimen metadata, sharp zero-radius chrome, and a single hot accent reserved for live trials and licensing CTAs.
colors:
  # Canvas + ink
  background: "#0c0c0c"
  surface: "#161616"
  surface-soft: "#1e1e1e"
  ink: "#f4f1ea"
  ink-secondary: "#a8a39a"
  ink-muted: "#6e6a63"

  # Accent — reserved for trials / licensing / live state
  primary: "#ff4a1c"
  primary-hover: "#ff6438"
  accent-lime: "#d6ff3f"

  # Lines + chrome
  border: "#2a2a2a"
  border-strong: "#3d3d3d"

  # On-color
  on-primary: "#0c0c0c"
  on-ink: "#0c0c0c"

  # Inverted block (specimen "paper" panels)
  paper: "#f4f1ea"
  paper-ink: "#0c0c0c"

typography:
  display-hero:
    fontFamily: "Anton, Arial Narrow, sans-serif"
    fontSize: 96px
    fontWeight: 400
    lineHeight: 0.92
    letterSpacing: -2px
  display-large:
    fontFamily: "Anton, Arial Narrow, sans-serif"
    fontSize: 64px
    fontWeight: 400
    lineHeight: 0.95
    letterSpacing: -1.5px
  section-heading:
    fontFamily: "Archivo, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -1px
  specimen-word:
    fontFamily: "Archivo, Arial, sans-serif"
    fontSize: 120px
    fontWeight: 800
    lineHeight: 1.0
    letterSpacing: -3px
  card-title:
    fontFamily: "Archivo, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: -0.4px
  body-large:
    fontFamily: "Archivo, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body:
    fontFamily: "Archivo, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  mono-label:
    fontFamily: "JetBrains Mono, ui-monospace, Menlo, monospace"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 1px
  mono-meta:
    fontFamily: "JetBrains Mono, ui-monospace, Menlo, monospace"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.5px
  button-ui:
    fontFamily: "JetBrains Mono, ui-monospace, Menlo, monospace"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 1px

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

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

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 24px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 24px

  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 24px
    borderColor: "{colors.border-strong}"
  button-secondary-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 24px
    borderColor: "{colors.ink}"

  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.mono-label}"
    rounded: "{rounded.none}"
    padding: 4px 8px
    borderColor: "{colors.border}"

  badge-trial:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.mono-label}"
    rounded: "{rounded.none}"
    padding: 4px 8px

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 24px
    borderColor: "{colors.border}"

  card-specimen:
    backgroundColor: "{colors.paper}"
    textColor: "{colors.paper-ink}"
    rounded: "{rounded.none}"
    padding: 40px
    borderColor: "{colors.border}"

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.mono-meta}"
    rounded: "{rounded.none}"
    padding: 12px 16px
    borderColor: "{colors.border-strong}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    borderColor: "{colors.primary}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.mono-label}"
    padding: 16px 24px
    borderColor: "{colors.border}"

  tester-row:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.specimen-word}"
    rounded: "{rounded.none}"
    padding: 24px
    borderColor: "{colors.border}"
---

# Dream Type Design System

## Overview

Dream Type presents itself the way a serious type foundry should — as a dark editorial gallery where the typefaces, not the chrome, are the entire show. The canvas is a deep near-black paper (`{colors.background}`) and the ink is a warm bone-white (`{colors.ink}`), a pairing that reads less like a tech product and more like a printed specimen book photographed under studio light. Everything visual is subordinate to the letterforms: the interface gets out of the way so oversized display words can fill the viewport.

The system runs on a deliberate two-voice typographic split. Massive condensed grotesk display type (`{typography.display-hero}`, `{typography.specimen-word}`) carries the headlines and live specimens — set tight with negative tracking so the words feel monumental and packed. Against that, a monospaced technical voice (`{typography.mono-label}`, `{typography.mono-meta}`) handles all the foundry metadata: weights, styles, OpenType feature lists, license tiers, file formats. The mono is the "spec sheet" register — it signals precision and makes the marketing site feel like the inside of a font's glyph table.

Chrome is uncompromisingly sharp. Radii are essentially zero (`{rounded.none}`) across buttons, cards, inputs and badges — the whole interface is built from hairline-bordered rectangles (`{colors.border}`), echoing the grid lines and bounding boxes of a type specimen layout. Depth comes from thin lines and surface tints (`{colors.surface}`, `{colors.surface-soft}`), never from soft drop shadows. Inverted "paper" panels (`{colors.paper}` with `{colors.paper-ink}`) flip the page to light when a specimen needs to be shown the way it would actually print.

Color is rationed. A single hot accent (`{colors.primary}`) is reserved for the things that drive the business — free trials, "test this font" live state, and licensing/buy CTAs — so it never decorates, it only directs. A secondary lime (`{colors.accent-lime}`) appears sparingly as an alternate highlight on featured releases.

**Key Characteristics:**
- Dark editorial canvas: near-black paper (`{colors.background}`) with warm bone-white ink (`{colors.ink}`)
- Two-voice typography: condensed grotesk display vs. monospaced technical metadata
- Oversized live specimens with aggressive negative tracking (-3px at specimen sizes)
- Zero-radius rectangular chrome throughout — specimen-grid aesthetic
- Hairline borders and surface tints for structure, never soft shadows
- One hot accent (`{colors.primary}`) reserved for trials and licensing CTAs only
- Inverted "paper" panels for true-to-print specimen display

## Colors

### Canvas & Ink
- **Paper Black** (`{colors.background}`): Primary page canvas — deep near-black.
- **Surface** (`{colors.surface}`): Cards, nav fills, raised panels.
- **Surface Soft** (`{colors.surface-soft}`): Secondary raised tint.
- **Bone Ink** (`{colors.ink}`): Primary text, display headlines, specimens — warm off-white.
- **Ink Secondary** (`{colors.ink-secondary}`): Metadata, descriptions, muted labels.
- **Ink Muted** (`{colors.ink-muted}`): Disabled state, faint captions.

### Accent
- **Trial Orange** (`{colors.primary}`): Free trials, live test state, licensing/buy CTAs. Reserved, directional — never decorative.
- **Trial Orange Hover** (`{colors.primary-hover}`): Hover state for the accent CTA.
- **Spec Lime** (`{colors.accent-lime}`): Sparse alternate highlight on featured releases.

### Lines & Chrome
- **Border** (`{colors.border}`): Hairline rectangles, grid dividers, card outlines.
- **Border Strong** (`{colors.border-strong}`): Emphasized outlines, secondary button rest border.

### Inverted Paper
- **Paper** (`{colors.paper}`): Light specimen panel background — the page flipped to print white.
- **Paper Ink** (`{colors.paper-ink}`): Black text on paper panels.

### On-Color
- **On Primary** (`{colors.on-primary}`): Dark text on the accent fill.

## Typography

### Font Family
- **Display**: `Anton` / `Archivo` (condensed-to-bold grotesk), with fallbacks `Arial Narrow, Arial, sans-serif` — the brand's display register. (Live site uses its own foundry faces such as Mirage and Brick; these Google families are the closest character match for rendering.)
- **Text**: `Archivo`, with fallbacks `Arial, sans-serif`
- **Monospace**: `JetBrains Mono`, with fallbacks `ui-monospace, Menlo, monospace`

### Hierarchy

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

| Token | Use |
|---|---|
| `display-hero` | 96px hero — monumental condensed headline |
| `display-large` | 64px secondary display |
| `specimen-word` | 120px live specimen word — maximum impact |
| `section-heading` | Section titles |
| `card-title` | Typeface card / feature headings |
| `body-large` | Lead paragraphs, intros |
| `body` | Standard reading text |
| `mono-label` | Uppercase nav, badges, technical labels |
| `mono-meta` | Weights, styles, OpenType + license metadata |
| `button-ui` | Buttons and CTAs (mono) |

### Principles
- **Two voices, strict roles**: condensed grotesk for display/specimens, monospace for all technical metadata. Never mix them within a register.
- **Tracking tightens with scale**: -3px at specimen sizes, -2px at hero, relaxing to 0 at body; mono labels open up to +1px tracking.
- **Specimens are the content**: display type fills the viewport; the UI defers to the letterforms.
- **Mono as spec sheet**: monospaced labels make the marketing site read like a glyph table.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base rhythm is 8px, scaling up to very generous gallery gaps (`{spacing.3xl}`–`{spacing.4xl}`) between specimen sections.

### Grid & Container
- Full-bleed specimen sections that run edge to edge
- Hairline-divided rows for typeface listings (each row a `{colors.border}` rectangle)
- 2–3 column grids for resources and feature cards
- Generous vertical whitespace lets oversized specimens breathe

### Whitespace Philosophy
- **Gallery emptiness**: large vertical gaps isolate each specimen so the type dominates.
- **Grid as structure**: separation comes from hairline borders and the grid, not from shadows or color blocks.
- **Tight type, open space**: aggressively tracked headlines counterbalanced by open surrounding space.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Buttons, cards, inputs, badges — the default |
| `xs` | 2px | Rare soft corner on small chips |
| `sm` | 4px | Optional softening |
| `pill` | 9999px | Reserved (status dots) |

The system is overwhelmingly zero-radius. Sharp rectangles echo the bounding boxes of a type specimen layout.

## Components

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

### Buttons
- **`button-primary`** — Trial Orange fill, dark text, zero radius, mono label. Reserved for trials and licensing.
- **`button-secondary`** — Transparent on canvas with `{colors.border-strong}` outline; border brightens to `{colors.ink}` on hover.

### Badges
- **`badge`** — Bordered surface chip with mono label for format/weight tags.
- **`badge-trial`** — Solid accent chip marking free trials and "test it live" state.

### Cards
- **`card`** — Surface-filled rectangle with hairline border for typeface and resource tiles.
- **`card-specimen`** — Inverted paper panel (`{colors.paper}`) showing type true-to-print in black.

### Inputs
- **`input`** — Surface fill, strong border, mono text. Focus brightens the border to `{colors.primary}`.
- **`tester-row`** — Full-width live type tester: edit the word, the specimen redraws at display scale.

### Navigation
- **`nav-bar`** — Dark sticky header, mono uppercase links, hairline bottom border. Accent CTA right-aligned.

## Do's and Don'ts

### Do
- Keep the canvas dark (`{colors.background}`) and let bone-white type carry the page
- Use the two-voice split: condensed grotesk display, monospace metadata
- Track display type tight (negative letter-spacing) and open mono labels (+1px)
- Reserve `{colors.primary}` for trials and licensing CTAs only
- Build chrome from zero-radius, hairline-bordered rectangles
- Use inverted `{colors.paper}` panels when type must read true-to-print

### Don't
- Don't add soft drop shadows — structure is lines and tints
- Don't round corners on chrome — the specimen grid is sharp
- Don't use the accent decoratively or on non-CTA elements
- Don't set body text with negative tracking — that's a display-only move
- Don't let UI chrome compete with the specimens for attention

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, specimen sizes scale down hard |
| Tablet | 600–1024px | 2-column grids, nav condenses |
| Desktop | 1024–1440px | Full specimen layout |
| Large | >1440px | Centered, generous margins |

### Collapsing Strategy
- Display headlines: 96px → scale down while keeping negative tracking proportional
- Specimen words: 120px → reflow to viewport width
- Typeface rows: full-width hairline rows stack vertically
- Nav: mono link bar → menu toggle
- Cards: 3-column → 2 → single column

---

## Agent Prompt Guide

### Quick Color Reference
- Canvas: Paper Black `{colors.background}`
- Heading/specimen text: Bone Ink `{colors.ink}`
- Metadata text: Ink Secondary `{colors.ink-secondary}`
- CTA / trial: Trial Orange `{colors.primary}`
- Borders: `{colors.border}` / `{colors.border-strong}`

### Example Component Prompts
- "Create a hero on Paper Black `{colors.background}`. Headline 96px Anton-style condensed grotesk, line-height 0.92, letter-spacing -2px, color `{colors.ink}`. Below it, a mono metadata line 13px `{colors.ink-secondary}` listing weights and formats. Orange CTA (`{colors.primary}`, zero radius, dark text, 13px mono +1px tracking)."
- "Build a typeface row: full-width hairline rectangle (`{colors.border}`), giant specimen word at 120px weight 800 letter-spacing -3px in `{colors.ink}`, with mono meta column right (style count, formats) in `{colors.ink-secondary}`."
- "Design a specimen card: inverted paper panel `{colors.paper}`, black text `{colors.paper-ink}`, zero radius, 40px padding — show the type true-to-print."

### Iteration Guide
1. Dark canvas + bone ink is the foundation — never invert to a light default
2. Two voices: condensed grotesk display, monospace metadata
3. Zero radius everywhere; structure is hairline borders and surface tints
4. The accent only marks trials and licensing — if it's not a CTA, it's not orange
5. Specimens are the hero; the UI defers to the letterforms

---

## 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 Dream Type. Brand names and trademarks belong to their respective owners.