---
version: alpha
name: Mnmll
description: Radical minimalism as a stance — near-monochrome canvas, a single monospace voice carrying the entire interface, hairline rules instead of boxes, zero radius, and typography-led hierarchy where space and rhythm do the work color usually does.
colors:
  # Canvas + ink
  background: "#ffffff"
  surface: "#ffffff"
  surface-soft: "#f7f7f7"
  ink: "#111111"
  ink-pure: "#000000"

  # Secondary / muted ink
  ink-secondary: "#555555"
  ink-muted: "#888888"
  ink-faint: "#b3b3b3"

  # The single accent — used sparingly for links/marks
  primary: "#0000ee"        # classic hyperlink blue, used as the lone accent
  primary-hover: "#0000aa"

  # Hairlines + dividers
  border: "#e6e6e6"
  border-strong: "#111111"  # full-ink rule between major sections

  # Selection
  selection-bg: "#111111"
  selection-text: "#ffffff"

  # On-color
  on-ink: "#ffffff"
  on-primary: "#ffffff"

typography:
  display:
    fontFamily: "Space Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.10
    letterSpacing: -0.5px
  heading:
    fontFamily: "Space Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1.20
    letterSpacing: -0.3px
  sub-heading:
    fontFamily: "Space Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.30
    letterSpacing: 0px
  body-large:
    fontFamily: "Space Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.70
    letterSpacing: 0px
  body:
    fontFamily: "Space Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.65
    letterSpacing: 0px
  body-small:
    fontFamily: "Space Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  label:
    fontFamily: "Space Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.30
    letterSpacing: 1.5px
  caption:
    fontFamily: "Space Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 0px

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

rounded:
  none: 0px
  xs: 0px
  sm: 0px
  md: 0px
  pill: 9999px

components:
  # Text link — the lone color moment
  link:
    textColor: "{colors.primary}"
    typography: "{typography.body}"
  link-hover:
    textColor: "{colors.primary-hover}"
    typography: "{typography.body}"

  # Primary action — solid ink block, square corners
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.label}"
    rounded: "{rounded.none}"
    padding: 12px 24px

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

  # Eyebrow / uppercase label
  badge:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.label}"
    rounded: "{rounded.none}"
    padding: 0px 0px

  # Content card — defined by a hairline, never a box-shadow
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 24px
    borderColor: "{colors.border}"

  # Input — underline only, no enclosing box
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 8px 0px
    borderColor: "{colors.border-strong}"

  # Top nav — text-only, hairline bottom rule
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    padding: 24px 40px
    borderColor: "{colors.border}"

  # Index row — list entry separated by a full-width rule
  list-row:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 16px 0px
    borderColor: "{colors.border}"
---

# Mnmll Design System

## Overview

Mnmll treats minimalism not as a style applied on top of an interface but as the interface itself. The canvas is pure white (`{colors.background}`), the text is near-black (`{colors.ink}`), and almost nothing else is allowed in. There are no cards floating on shadows, no gradients, no rounded corners softening the edges. What remains is a page that reads like a well-set document: type, space, and the occasional hairline rule. The discipline is the design.

The defining move is a single typographic voice. Everything — headings, body, labels, captions — is rendered in one monospace family (`Space Mono` as the closest Google equivalent), so the whole site inherits the deliberate, typewriter-adjacent rhythm of fixed-width type. Hierarchy is built entirely from weight (400 for reading, 700 for announcing), size, and tracking rather than from switching typefaces or introducing color. Uppercase labels with wide letter-spacing (`{typography.label}`) act as the system's connective tissue — eyebrows, nav items, metadata — giving the page a quiet editorial structure.

Structure comes from rules, not boxes. Where most systems reach for borders, shadows, and fills to separate content, Mnmll uses a hairline (`{colors.border}`) between list rows and a full-ink rule (`{colors.border-strong}`) between major sections. Radius is zero everywhere (`{rounded.none}`); corners stay sharp. The one permitted moment of color is the link — a classic hyperlink blue (`{colors.primary}`) that marks interactivity and nothing else. Color is reserved so completely that when it appears, it means something.

**Key Characteristics:**
- One monospace family carries the entire interface — hierarchy from weight, size, and tracking, never typeface switching
- Pure white canvas with near-black `{colors.ink}` text — micro-warm rather than pure black
- Zero border radius everywhere — sharp corners as a principle
- Hairline rules (`{colors.border}`) and full-ink section rules (`{colors.border-strong}`) instead of boxes and shadows
- A single accent — hyperlink blue (`{colors.primary}`) — reserved exclusively for links
- Uppercase, wide-tracked labels (`{typography.label}`) as structural connective tissue
- Generous whitespace doing the work that color and decoration usually do

## Colors

### Primary
- **Ink** (`{colors.ink}`): Primary text, headings, solid action blocks. Micro-warm, not pure black.
- **Pure White** (`{colors.background}`): Page background, every surface, text on ink.
- **True Black** (`{colors.ink-pure}`): Reserved for maximum-contrast marks.

### Secondary Ink
- **Ink Secondary** (`{colors.ink-secondary}`): Supporting copy, metadata, eyebrow labels.
- **Ink Muted** (`{colors.ink-muted}`): Captions, timestamps, tertiary detail.
- **Ink Faint** (`{colors.ink-faint}`): Placeholders, disabled text.

### Accent
- **Hyperlink Blue** (`{colors.primary}`): The lone accent — text links only, never decorative.
- **Hyperlink Blue Hover** (`{colors.primary-hover}`): Link hover/active state.

### Lines
- **Border** (`{colors.border}`): Hairline dividers between list rows, around cards.
- **Border Strong** (`{colors.border-strong}`): Full-ink rule between major sections, input underlines.

### Selection
- **Selection Bg** (`{colors.selection-bg}`): Text selection highlight (ink block).
- **Selection Text** (`{colors.selection-text}`): Selected text (white on ink).

## Typography

### Font Family
- **Primary**: `Space Mono`, with fallbacks: `ui-monospace, SFMono-Regular, Menlo, monospace`
- **Single-family system**: there is no secondary face. All hierarchy is achieved within one monospace family.

### Hierarchy

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

| Token | Use |
|---|---|
| `display` | Page/hero title — largest moment, weight 700 |
| `heading` | Section titles |
| `sub-heading` | Sub-sections, card titles |
| `body-large` | Lead paragraphs, intros |
| `body` | Standard reading text |
| `body-small` | Dense supporting copy |
| `label` | Uppercase, wide-tracked eyebrows, nav, metadata |
| `caption` | Timestamps, fine print |

### Principles
- **One voice**: A single monospace family does everything. Never switch typefaces for hierarchy.
- **Weight, not face**: 400 for reading, 700 for announcing. Two weights cover the whole system.
- **Tracking as signal**: Display tightens slightly (negative tracking); labels open up wide (+1.5px) and go uppercase.
- **Monospace rhythm**: Fixed-width characters give the page its deliberate, document-like cadence — lean into it rather than fighting it.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, with generous jumps at the top end (`{spacing.3xl}`, `{spacing.4xl}`) for the open, gallery-like vertical rhythm.

### Grid & Container
- Narrow, reading-first measure — content column roughly 640–760px for prose, wider for index lists
- Single-column hero with a tall top margin
- Index/archive pages as full-width stacked rows divided by hairlines
- Full-ink rules (`{colors.border-strong}`) mark the boundaries of major sections

### Whitespace Philosophy
- **Space as structure**: Whitespace, not boxes, separates content. The page breathes.
- **Document, not dashboard**: The layout reads top-to-bottom like a printed page, not a grid of widgets.
- **Restraint compounds**: Because so little is on the page, every rule and every label carries weight.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, no fill | The default — text on white |
| Hairline (Level 1) | `1px solid {colors.border}` | List rows, cards, soft separation |
| Strong Rule (Level 2) | `1px solid {colors.border-strong}` | Section boundaries, input underlines |
| Solid Block (Level 3) | `{colors.ink}` fill | Primary action buttons |

**Depth Philosophy**: Mnmll has effectively no elevation system. There are no shadows. "Depth" is expressed only through line weight — a faint hairline for soft grouping, a full-ink rule for hard separation. Surfaces never lift off the page; they sit flat and are delineated by space and line.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Everything — the default |
| `xs` | 0px | Reserved (kept square) |
| `sm` | 0px | Reserved (kept square) |
| `md` | 0px | Reserved (kept square) |
| `pill` | 9999px | Available but rarely used — only for the occasional tag |

Corners are sharp throughout. Radius is a non-feature of this system.

## Components

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

### Links & Buttons
- **`link`** — The system's only color moment: `{colors.primary}` text, no underline change beyond the default.
- **`button-primary`** — Solid `{colors.ink}` block, uppercase `{typography.label}` text, square corners.
- **`button-secondary`** — Hairline `{colors.border-strong}` outline, no fill, square corners.

### Labels
- **`badge`** — Not a pill; an uppercase, wide-tracked text label (`{typography.label}`) with no background.

### Cards & Rows
- **`card`** — White, separated by a `{colors.border}` hairline, never a shadow.
- **`list-row`** — Index/archive entry; a full-width row divided from the next by a hairline.

### Inputs
- **`input`** — Underline only (`{colors.border-strong}` bottom), no enclosing box, no radius.

### Navigation
- **`nav-bar`** — Text-only, uppercase `{typography.label}` items, separated from content by a hairline bottom rule.

## Do's and Don'ts

### Do
- Use a single monospace family for the entire interface
- Build hierarchy from weight (400/700), size, and tracking — never a second typeface
- Keep every corner square (`{rounded.none}`)
- Separate content with hairlines and full-ink rules, not shadows or boxes
- Reserve `{colors.primary}` exclusively for links
- Let whitespace carry the layout
- Use uppercase, wide-tracked labels as structural connective tissue

### Don't
- Don't introduce a second font family for "contrast"
- Don't add border radius — sharp corners are the identity
- Don't use box-shadows or elevation — depth comes from line weight only
- Don't use color decoratively — blue means link, nothing else
- Don't crowd the page; restraint is the point
- Don't replace hairline rules with filled card backgrounds

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, reduced top margins, nav collapses to a minimal row |
| Tablet | 600–1024px | Reading measure holds, index rows stay full-width |
| Desktop | 1024–1400px | Full layout, generous side margins |
| Large Desktop | >1400px | Centered content, expanded outer whitespace |

### Touch Targets
- Buttons use comfortable vertical padding (12px)
- Nav labels and links spaced for tapping despite the dense mono type
- List rows are full-width tap zones

### Collapsing Strategy
- Hero `display` scales down but keeps its weight and tracking
- Nav: horizontal labels → minimal stacked or single-row labels
- Index lists: full-width rows remain single-column at every size
- Section spacing: `{spacing.4xl}` → `{spacing.2xl}` on mobile

### Image Behavior
- Images sit flush with square corners — no rounding, no border treatment
- Full-bleed or measure-width, never inside a rounded card

---

## Agent Prompt Guide

### Quick Color Reference
- Primary text: Ink `{colors.ink}`
- Background: Pure White `{colors.background}`
- Secondary text: `{colors.ink-secondary}`
- Link: Hyperlink Blue `{colors.primary}`
- Hairline: `1px solid {colors.border}`
- Section rule: `1px solid {colors.border-strong}`

### Example Component Prompts
- "Create a hero on white. Title at 40px Space Mono weight 700, line-height 1.10, letter-spacing -0.5px, color `{colors.ink}`. Below it, a lead paragraph at 18px weight 400, color `{colors.ink-secondary}`. No buttons with radius — square corners only."
- "Design an index list: full-width rows, each at 16px Space Mono weight 400, separated by a `1px solid {colors.border}` hairline. Row metadata in uppercase `{typography.label}`, color `{colors.ink-muted}`."
- "Build a primary button: solid `{colors.ink}` fill, white uppercase label at 12px Space Mono weight 700 letter-spacing 1.5px, 12px 24px padding, zero radius."
- "Create a nav: text-only uppercase labels in Space Mono 12px weight 700, `{colors.ink}` text, separated from the page by a `1px solid {colors.border}` bottom rule."

### Iteration Guide
1. One font family only — Space Mono does everything
2. Hierarchy from weight and tracking, never a second typeface
3. Square corners always — radius is zero
4. Lines, not shadows: hairline for soft, full-ink for hard separation
5. Blue is for links and nothing else
6. When in doubt, remove it and add space

---

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