Mono design skill for AI agents

Overview

Mono is a monospace-first, terminal-inspired design system skill file that tells AI coding assistants to generate interfaces with the raw energy of a command line and the polish of a modern product. Built around Space Mono — a fixed-width typeface designed by Colophon Foundry for Google Fonts with quirky, geometric character shapes — this skill produces UIs that feel like hacker terminals, code editors, and retro-futuristic dashboards brought to life with a neon-green Matrix aesthetic.

This skill is built for developer tools, AI product communities, indie hacker platforms, coding bootcamps, tech newsletters, CLI-inspired web apps, and any product where the audience thinks in code and speaks in terminals.

Design Tokens

Color Palette

Mono pairs a vivid neon green primary with an electric blue secondary against a warm stone surface — the combination channels the Matrix terminal aesthetic while remaining usable in daylight:

The neon green primary (#37F712) is the visual signature. It evokes terminal output, matrix cascades, and the glow of a CRT monitor. Against the warm stone surface (#E7E5E4), the green pops without the harshness of green-on-black. The electric blue secondary (#00A6F4) provides a natural complement for links, secondary actions, and info states.

Typography

Mono uses Space Mono as both the primary and display font — every character in the interface occupies the same horizontal space:

• Primary and display font: Space Mono — a fixed-width typeface with quirky geometric shapes, exaggerated counters, and a playful personality that prevents the monospace look from feeling sterile. Unlike utilitarian coding fonts, Space Mono has character — its lowercase 'a', 'g', and 'e' have distinctive forms that give the interface a retro-futuristic personality
• Monospace font: JetBrains Mono — used for actual code blocks and technical content where ligatures and developer-oriented optimizations matter more than personality

The typography uses a desktop-first expressive scale — sizes are calibrated for the wide viewports where developer tools and community dashboards are primarily consumed. The monospace typeface fundamentally changes layout math: every character aligns vertically, creating a grid-like text rhythm that reinforces the terminal aesthetic. At display sizes, Space Mono's quirky geometry becomes more pronounced, giving headings a distinctive retro-tech presence.

Spacing

Mono uses a compact density mode — tight spacing that mirrors the information density of a terminal or code editor:

• Components are packed efficiently, respecting the monospace grid rhythm
• Vertical spacing between list items, card rows, and navigation elements is minimized to show more content per screen
• The compact density reinforces the developer-tool feel where screen real estate is precious
• Despite the density, all interactive elements maintain accessible hit areas

The compact mode works specifically because the monospace font creates its own visual structure. Fixed-width characters align into implicit columns, so the interface can be denser than a proportional-font layout without feeling cluttered — the grid does the organizational work that extra whitespace would do in other systems.

The Terminal Aesthetic

Beyond tokens and spacing, the skill file defines the visual treatments that make Mono feel like a living terminal:

• Monospace everything — headings, buttons, labels, navigation items, and body text all use Space Mono. The consistent character width creates a unified grid rhythm across the entire interface
• Neon accents on warm stone — the green and blue neon colors reference terminal output and status indicators, but the warm stone surface keeps the interface approachable rather than cold and forbidding
• Playful hacker energy — the Matrix-inspired color palette and terminal typography carry a sense of mischief and insider culture that resonates with developer and AI builder communities
• Data as content — stats, metrics, code snippets, and technical values are first-class citizens, displayed prominently rather than tucked into secondary views
• Cursor-like interactions — active states and focus indicators reference the blinking cursor, with neon-green highlights marking the user's current position in the interface

Component Coverage

Mono includes guidance for over 40 component families, each adapted for the monospace terminal aesthetic:

• Inputs and forms — monospace-styled buttons, text inputs with terminal-cursor carets, selects, checkboxes, radios, switches, textareas, date/time pickers, file uploaders
• Data display — cards, tables with grid-aligned monospace columns, data lists, data grids, charts, stats/metrics, badges, avatars
• Navigation — breadcrumbs, pagination, steppers, sidebars, top bars, tabs, command palette (a natural fit for the terminal aesthetic)
• Overlays and feedback — modals, drawers, tooltips, popovers, alerts, toasts, notifications, progress indicators, skeletons
• Page-level patterns — search, empty states, onboarding, authentication screens, settings pages, documentation layouts, pricing blocks

Each component defines required states (default, hover, focus-visible, active, disabled, loading, error) with mandatory designs for empty, loading, and error states — because a terminal-inspired interface must handle every state with the same composed confidence. Responsive behavior is built in by default, adapting the compact monospace layout to narrower viewports without losing the grid rhythm.

Accessibility

Mono enforces WCAG 2.2 AA compliance with specific attention to the challenges of monospace type and neon colors:

• Keyboard-first interactions with visible focus states — focus rings use the neon green primary or a solid white for maximum visibility against the stone surface
• Semantic HTML before ARIA — native elements first, ARIA attributes only when semantic markup falls short
• Screen-reader tested labels — every interactive element must have a verified programmatic label
• Neon-on-stone contrast — the neon green primary (#37F712) against the stone surface (#E7E5E4) and the warm gray text (#78716B) against the same surface are both verified for WCAG AA contrast ratios. Where neon green is used as a text color, the skill file specifies minimum size thresholds to maintain readability
• Accessible hit areas — despite the compact density mode, all interactive elements maintain minimum touch and click target sizes

The playful, terminal-inspired aesthetic never overrides usability. When the neon palette or compact spacing conflicts with accessibility, the skill file provides concrete fallbacks and always prioritizes legibility.

How to Use with AI Tools

Cursor and Claude

1. Pull the skill file into your project:

npx typeui.sh pull mono

2. The skill file saves as a SKILL.md in your project. Cursor automatically detects skill files and uses them as context during code generation.

3. Start prompting — ask Cursor to build community dashboards, developer tools, or AI product interfaces, and the output will follow the Mono system's terminal aesthetic, neon palette, and monospace grid.

Claude (Anthropic)

Use Mono directly with Claude by adding the skill file as context:

1. Copy or download the skill file from the design skill page
2. Paste it at the start of a Claude conversation, or add it to a Claude Project as project knowledge
3. Prompt Claude to generate UI code — it will produce monospace-driven, terminal-inspired interfaces following the Mono tokens, compact density, and neon-on-stone palette

Other AI Tools

The skill file is standard markdown compatible with any AI assistant that accepts context or system instructions:

• ChatGPT — paste into Custom Instructions or at the start of a conversation
• Windsurf / Codeium — place the file in your project directory
• GitHub Copilot — add to your repository's context or instruction files
• v0 by Vercel — paste the design tokens and monospace rules as prompt context

Design Philosophy

Mono is built on the belief that the terminal is a design language, not just a tool. The skill file follows three principles:

1. The grid is the typeface — monospace characters create an implicit grid that organizes the entire interface. Every element aligns to this character grid, producing a cohesion that proportional fonts cannot achieve
2. Neon with warmth — the Matrix-green palette signals tech culture and hacker energy, but the warm stone surface and Space Mono's quirky personality prevent the interface from feeling hostile or exclusionary. This is a terminal that welcomes you in
3. Compact means confident — the tight spacing says "we respect your screen and your time." Dense information display is a feature for the audience this system serves — builders, coders, and AI practitioners who want to see more and scroll less