← Back to Skills / Marketplace / matrix
SKL · 16PRO

Matrix.

Green on black. One font. One grid. The design language of the digital void — code rain, terminal readouts, and interfaces that feel like they're running the world.

UNLOCK WITH PRO →
● Live preview · Matrix demo
● This is real CSS, not a screenshot
↗ New tab
01 · The Vibe

The Wachowskis borrowed the green-on-black monospace grid from Bloomberg Terminal, air traffic control, and financial data feeds. Matrix design goes back to those sources: one typeface, one base color, on black, with luminous green reserved strictly for things that are running. Hierarchy comes from size and spacing alone. The result feels operational — like the interface is just showing you the truth.

● Looks Like
The Matrix code rainAgent Smith's surveillance feedsBloomberg Terminal on a late-night trading deskTerminal windows left open by someone who knows what they're doingAir traffic control readoutsIRC clients built by people who caredReadout screens in every serious sci-fi film
02 · Best For / Avoid If
＋ Best For
+Developer tools and CLI companion interfaces
+Financial data apps and trading dashboards
+Productivity tools for power users who prefer function over decoration
+Technical documentation and reference tools
+Any app whose users already spend time in terminals and respect that aesthetic
+Tools where information density is a feature, not a problem to design around
× Avoid If
×Your users are non-technical and would find the aesthetic cold or confusing
×Your product needs color to communicate states, categories, or urgency
×You have media — images, videos, rich content — that needs to be displayed
×Your brand needs to communicate warmth, approachability, or consumer friendliness
03 · Design Philosophy
01

The green is a signal

#00FF41 carries semantic weight. A single green character on a near-black screen hits like a system alert because the surrounding monochrome trains the eye to read color as information. Reserve Matrix green for things that are on.

02

The grid is the character

Monospaced type has a fixed character width — every letter identical. This creates a natural grid: columns align, numbers stack, everything is a multiple of the character width and line height. The grid emerges from the type itself.

03

Constraint creates the signal

When every element shares the same font and color, hierarchy must come from size, spacing, and position alone. This constraint is why Matrix interfaces feel intelligent — every decision earns its place.

04 · Use With Claude / Cursor
Claude
01Click 'Customize', then go to 'Skills'
02Go to 'Create Skills' and upload the skill.md file
03Put the design.md file in your project's knowledge base
04Mention the skill name as you build — Claude applies it automatically
Cursor
01Place SKILL.md and DESIGN.md in your repo root
02Open .cursor/rules and add @SKILL.md @DESIGN.md
03Restart Cursor for the rules to apply
04Build normally — mention the skill name to invoke it automatically
★ PRO TIP

Before building with Claude Code, drop SKILL.md and DESIGN.md into Claude Design first. Use it to generate mockups and nail the visual direction — then hand those references to Claude Code. You'll get significantly higher quality output than going straight to code.

05 · Watch Out For
! WARNING
Overusing the green
Matrix green is powerful because it's rare — one or two elements per screen maximum. If everything is green, the signal is gone. Restrict it strictly to active states and live data. Use off-white for everything else.
! WARNING
Forgetting that monospaced type is wider
Monospaced fonts take up significantly more horizontal space than proportional fonts. What fits in two lines with Inter might take four lines in Space Mono. Account for this in every layout decision.
! WARNING
All one size
Without size variation, nothing has hierarchy and everything looks like noise. Tell Claude to use at least three distinct size steps — display, body, and label — and to apply them consistently.
! WARNING
No breathing room
Matrix interfaces need generous line height and spacing between sections or they become unreadable walls of text. Ask for at least 1.7 line height and clear section breaks.
● 07 · Download

Beautiful designs in minutes.

Drop them into your Claude project or Cursor rules and build normally. No CLI, no package manager, no setup.

UNLOCK WITH PRO →