Skip to content
All skills
staqd.ai/previews/mono
Open

Live demo — an original page built in the Mono style. Open in new tab

Prothemed

Mono

A single typewriter typeface, tight grids, and deliberate restraint turn plain text into a confident, system-like interface.

Install via CLI

$ npx staqd add mono

Requires Pro — after subscribing, run npx staqd login to authenticate.

Pro skill

from $12/mo

$20/mo, or $12/mo billed yearly · 7-day money-back guarantee.

Developer tools and CLIs-as-web-appsDocumentation and changelogsMinimalist personal sites and portfolios

Inside this skill

Mono is a design system built on a single constraint: one monospaced typeface does everything — headings, body, labels, numbers, and code. That restriction creates a calm, system-like coherence where every glyph occupies the same cell and the whole interface reads like a beautifully formatted document. It feels honest, technical, and quietly playful, the way a well-kept terminal or a clean printout feels. Reach for it on developer tools, documentation, changelogs, and personal sites that want craft and character without decoration.

Design principles

  • One family, no exceptions: the entire UI is monospaced, so hierarchy comes from weight, case, and spacing alone.
  • Embrace the grid the typeface gives you — align everything to the character cell and let columns snap to fixed widths.
  • Decoration is borrowed from text: brackets, hyphens, hashes, and slashes do the work of icons and rules.
  • Keep color almost absent; near-black ink, paper background, one accent link color.
  • Left-align and let lines break naturally; centered text fights the typewriter logic.
  • Whitespace is generous and rhythmic, measured in line-heights rather than arbitrary pixels.

Color

The canvas is a warm paper #FAFAF7 that reads softer than pure white and pairs naturally with the typewriter feel, while raised surfaces and cards step up to a clean #FFFFFF. Ink is a near-black #1A1A1A rather than full black, which eases contrast strain across dense monospace text.

Secondary metadata, timestamps, and label brackets use a warm gray #8A8780. The single chromatic note is a confident #0066FF, reserved exclusively for links and the rare primary action so its appearance always carries meaning. Borders and inline-code fills use a quiet #E6E4DD.

Token reference:

  • Page background: #FAFAF7
  • Card / surface: #FFFFFF
  • Ink / body: #1A1A1A
  • Link / accent: #0066FF
  • Muted / metadata: #8A8780
  • Border / code fill: #E6E4DD

A dark variant flips to a #16161A background, #ECEAE3 ink, #2A2A30 borders, and a brightened #5C9CFF accent for legibility on the dark field.

Mono is a Pro skill

Unlock the full Mono spec — design tokens, component coverage, motion, and accessibility — plus the entire library of design skills and Pro prompts.

  • Every design skill, growing weekly
  • Full Pro prompt library
  • Commercial-use rights on skill output

$20/mo, or $12/mo billed yearly · 7-day money-back guarantee.

Use it with these prompts

Monospace homepage

Free

Build a homepage in the Mono style: everything set in JetBrains Mono on a #FAFAF7 background, a left-aligned column max 680px wide, section labels in bracketed all-caps muted #8A8780, and a single #0066FF link color.

CLI-style dashboard

Pro
Unlock this prompt with ProUpgrade

Docs article

Pro
Unlock this prompt with ProUpgrade