Mono
Locks everything to a playful monospaced grid with terminal roots.
- Version
- v1.0.0 · Updated Jul 18, 2026
- Context
- ≈1,556 tokens
- Security
- ✓ scanned
- License
- Single seat
- Works with
- Claude Code, Cursor, Codex
Checkout opens soon · launches at $9
≈1,556 tokens · v1.0.0
Live demo — an original page built in the Mono style. Open in new tab
About this skill
A playful, matrix-inspired monospaced design system. Its live demo renders a developer docs page — code blocks, parameters table, API reference, and changelog.
The skill file
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.
- Typography
- Layout & spacing
- Components
- Do and don't
- Motion
- Accessibility
- Use it with your AI tool
Preview ends here
Typography, Layout & spacing, Components, Do and don't, Motion, Accessibility & Use it with your AI tool unlock when checkout opens. Get notified
What's inside
- SKILL.md6.2 KB
More in Design
View allEditorial Pack
Collects the editorial cluster — typography-led, content-first pages in one install.
Design Systems Pack
Bundles every aesthetic design system in one install — switch styles per project.
Fiction
Illustrates children's-book warmth with bold outlines and saturated color.
Arcade
Presses chunky pixel buttons and rainbow shadows into arcade-cabinet fun.
More from @staqd
View profileEditorial Pack
Collects the editorial cluster — typography-led, content-first pages in one install.
Design Systems Pack
Bundles every aesthetic design system in one install — switch styles per project.
Fiction
Illustrates children's-book warmth with bold outlines and saturated color.
Arcade
Presses chunky pixel buttons and rainbow shadows into arcade-cabinet fun.