Blackout design skill for AI agents

Overview

Blackout is a dark, technical design system for products that should feel cinematic, precise, and operational. It combines a continuous near-black indigo canvas with translucent lavender hierarchy, disciplined grid linework, registration marks, and a restrained set of cyan, orange, pink, and violet state accents.

The system is intentionally flat and exact. Square component geometry, quiet hairline borders, compact controls, and spacious sections make dashboards, technical tools, and product pages feel like parts of one instrument panel.

Design language

• Dark continuous canvas: Navigation, heroes, content sections, application workspaces, and footers share one near-black surface family.
• Square geometry: Cards, buttons, fields, tables, menus, overlays, and media use 0px corners. Only controls that are functionally circular use full rounding.
• Technical structure: A consistent grid, subtle rails, section seams, and small plus-shaped registration marks organize the page without decorative noise.
• Restrained accents: Lavender leads the brand hierarchy while cyan, orange, pink, and violet are reserved for state, data, and focused emphasis.
• Flat surfaces: Cards use nearby dark or translucent fills, one quiet 1px edge, and no ordinary outer shadow.

Typography

Lausanne is the only type family throughout Blackout. Headings use a compact medium weight with tight tracking, body copy is lighter and highly readable, and technical labels use uppercase casing, wider letter spacing, and tabular numerals. This single-family approach keeps expressive pages and dense application interfaces visually connected.

Best suited for

Blackout works especially well for developer tools, monitoring products, AI interfaces, security software, data applications, creative technology, and premium dark-mode experiences where clarity and atmosphere need equal weight.

Included guidance

The downloadable skill includes foundation rules for color, typography, spacing, radius, elevation, motion, and responsive behavior, together with detailed specifications for actions, navigation, forms, overlays, feedback, and data-display components.