Skip to content
staqd

Mono

Locks everything to a playful monospaced grid with terminal roots.

$9
Version
v1.0.0 · Updated Jul 18, 2026
Context
1,556 tokens
Security
✓ scanned
License
Single seat
Works with
Claude Code, Cursor, Codex
Get notified at launch

Checkout opens soon · launches at $9

staqd.ai/previews/mono
Open

≈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
v1.0.0Jul 18, 2026sha256: 185aa18cf186
staqdMember since Jul 2026 · 69 listings · 5 installsView profile →