Machine design skill for AI agents
Overview
Machine is a dark blueprint-monitor design system skill file for AI coding assistants. It creates interfaces that feel like a technical shell: deep navy screens, electric-blue grid borders, cyan terminal readouts, coral danger stamps, dashed connector paths, scanlines, and mono-forward UI chrome.
The system is built for high-information products where the interface itself should feel like a console, schematic, or operating panel. It is always dark and monitor-like rather than switching between conventional light and dark modes.
Design Tokens
Color Palette
Machine uses a deep navy surface with electric system blue, cyan readouts, and coral danger signals.
| Token | Value | Purpose |
|---|---|---|
| Surface | #0E1530 |
Primary monitor screen background |
| Panel | #0B1022 |
Cards, panels, schematic regions, and nav tabs |
| Brand | #4E7BF2 |
Selection, active navigation, borders, and links |
| Brand Strong | #6E97FF |
Strong electric-blue highlights and focus states |
| Console | #52DCFF |
Terminal readouts, status text, and system labels |
| Danger | #FF5A52 |
Error stamps, warnings, and destructive states |
The palette does not use a light-mode counterpart. Cream blueprint-paper cards may appear rarely for contrast, but the core product surface remains the dark monitor.
Typography
Machine uses a three-voice type system: a tight display grotesque for headings, a neutral grotesque for longer body copy, and a dominant monospace voice for navigation, list items, buttons, labels, section codes, and status lines.
The intended stack maps to Space Grotesk, Manrope, and Share Tech Mono or VT323 as accessible alternatives.
Spacing and Shape
The signature layout is a viewport-filling monitor shell with a top bar, squared nav tabs, a working area, and a console-style footer. Layouts should feel framed, technical, and schematic rather than like a long marketing page.
Component Language
Cards and panels use luminous grid-line borders, angular framing, scanline overlays, and blueprint-style connector paths. Buttons and tabs should feel like console controls. Cream contrast cards can use navy line art and red stamp details, but they should be rare so the monitor identity remains dominant.
Best For
Use Machine for developer tools, infrastructure dashboards, security products, AI operations, robotics, data systems, technical landing pages, and any generated UI that should feel engineered, active, and system-aware.