Dark design skill for AI agents
Overview
Dark is a premium dark-interface design system skill file for AI coding assistants. It creates calm, focused UIs with a deep charcoal-plum surface, elevated dark cards, muted plum brand accents, serif display headings, clean rounded layouts, and subtle glint effects.
The system is designed for products that should feel refined without becoming flashy. It gives generated UI a quiet premium tone suitable for browsing, dashboards, editorial surfaces, and product experiences where focus matters.
Design Tokens
Color Palette
Dark uses a consistent dark palette with plum accents and soft white typography.
| Token | Value | Purpose |
|---|---|---|
| Surface | #13111A |
Shared page and section background |
| Card Surface | #181621 |
Elevated cards, panels, and components |
| Brand | #42344B |
Primary buttons, accents, and brand surfaces |
| Brand Medium | #5A4869 |
Hover states and secondary accents |
| Heading | #FFFFFF |
Primary headings and high-contrast labels |
| Body | #D4D0DC |
Body copy and readable UI text |
The design is dark-first. Sections share one surface, while cards and controls sit on slightly elevated dark tones with border-default lines.
Typography
Dark uses IBM Plex Serif for large headings and Inter for everything else. The serif display voice gives pages a premium editorial quality, while Inter keeps controls, labels, body text, and smaller headings practical.
Headings should feel composed and high-contrast. Body copy should stay soft white, never pure gray on gray.
Spacing and Shape
Dark uses an 8px rhythm, 96px section spacing on large screens, 24px on mobile, 1152px containers, and 16px rounded cards. Components sit on the shared #13111A surface and use #181621 with #33313B borders.
Component Language
Cards use a subtle top-to-bottom dark gradient that stays barely visible, plus a 1px border and small shadow. Buttons use 16px radius, semibold Inter labels, thin borders, and a glint effect composed of base shadow, inset highlight, and soft outer glow.
Best For
Use Dark for premium SaaS apps, media libraries, analytics dashboards, portfolio systems, AI tools, documentation portals, and generated UI that should feel focused, polished, and low-noise.