Live demo — an original page built in the Mono style. Open in new tab
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 monoRequires 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.
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
FreeBuild 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
ProDocs article
ProMore themed skills
Futuristic
themedSleek dark surfaces, glowing accents, and precise sci-fi panels make every screen feel like the control deck of something advanced.
Cosmic
themedDeep-space gradients, luminous nebula accents, and layered glass depth create an immersive interface that feels genuinely otherworldly.
Fantasy
themedAn immersive, mystical interface language of ornate borders, candlelit golds, and arcane glow that turns a screen into an enchanted artifact.