Pragmatic design skill for AI agents
Overview
Pragmatic is a clean, modern retail design system skill file for AI coding assistants. It creates direct, content-first interfaces with a bright white surface, a bold yellow brand accent, near-black contrast, square corners, and flat borderless components.
This system is designed for products where clarity, merchandising, and conversion matter more than visual decoration. It gives generated UI a confident e-commerce feel that is simple to scan and easy to operate.
Design Tokens
Color Palette
Pragmatic is built from a small, high-contrast palette: white, near-black, and a vivid yellow accent.
| Token | Value | Purpose |
|---|---|---|
| Surface | #FFFFFF |
Primary page and section background |
| Secondary Surface | #F5F5F4 |
Subtle component surface steps |
| Brand | #FFE202 |
Primary brand accent and key actions |
| Brand Strong | #E5CB00 |
Strong yellow emphasis and active states |
| Secondary | #141414 |
Secondary buttons, text, and high-contrast anchors |
| Body | #4B4B47 |
Paragraphs, labels, and supporting copy |
Dark mode keeps the same stark relationship with near-black backgrounds and yellow brand moments. Brand yellow should be treated as a precise signal, not a decorative wash.
Typography
Pragmatic uses Gothic A1 across the interface. The single-family approach reinforces the retail clarity: headings, labels, body text, buttons, and navigation all share one modern sans-serif voice.
Type should be clean, spacious, and direct. Hierarchy comes from size, weight, and whitespace rather than ornate font pairing.
Spacing and Shape
The system uses one bright section surface, equal vertical spacing, and a restrained 8px spacing rhythm. Sections should not alternate background colors. Separation comes from whitespace, product imagery, and occasional 1px dividers.
Corners are square at 0px. Components are flat, borderless, and shadow-free. This gives generated pages a crisp commercial rhythm and prevents visual noise.
Component Language
Buttons use solid fills: yellow with black text for primary actions, near-black with white text for secondary actions. Cards, inputs, and product blocks are distinguished by background steps rather than borders or shadows. Layouts should prioritize product grids, editorial spacing, strong CTAs, and clean filtering or checkout flows.
Best For
Use Pragmatic for e-commerce sites, product launches, retail dashboards, brand catalogs, pricing pages, checkout flows, and any generated UI that needs to feel sharp, commercial, and immediately usable.