Vertical design skill for AI agents
Overview
Vertical is a polished, production-grade design system skill file for AI coding assistants. It creates light, technical interfaces with a cool gray page surface, raised white panels, deep charcoal brand moments, sharp 4px corners, monospace labels, and editorial serif headings.
The system is built for products that should feel engineered, confident, and precise without becoming cold or cluttered. It gives generated UI a strong visual signature through disciplined radius, high contrast, clean borders, structured spacing, and restrained texture.
Design Tokens
Color Palette
Vertical uses a cool neutral palette with a deep charcoal brand color and subtle border steps.
| Token | Value | Purpose |
|---|---|---|
| Page Surface | #F4F4F5 |
Light gray application and page background |
| Panel | #FFFFFF |
Raised cards, modals, menus, and foreground surfaces |
| Soft Panel | #FAFAFA |
Subtle card fills inside the framed marketing column |
| Brand | #232323 |
Primary actions, hero and footer bands, and key emphasis |
| Heading | #18181B |
High-contrast headings and primary text |
| Body | #52525B |
Paragraphs, descriptions, and secondary copy |
| Border | #E4E4E7 |
Default component and column rails |
| Subtle Border | #F2F2F2 |
Hairline separation on soft white cards |
Typography
Vertical pairs precise UI typography with an editorial display voice:
| Role | Treatment |
|---|---|
| Body and UI | Inter, compact control labels, strong readability |
| Labels and eyebrows | Geist Mono, uppercase, technical, sparse |
| Headings | Adobe Jenson Pro or EB Garamond fallback, medium weight, tight tracking |
| Reading text | 16px minimum for body copy, with smaller sizes reserved for true micro-elements |
Shape, Depth, and Rhythm
Vertical's signature rule is one slight radius: 4px across buttons, inputs, badges, cards, menus, modals, tabs, and tables. Only functionally round controls, such as toggles, avatars, radios, and range thumbs, use full rounding.
Depth is created through white raised surfaces, subtle borders, and spacing. Heavy shadows, glow effects, oversized rounding, pastel surfaces, and decorative color striping are outside the system.
Component Language
Vertical components are crisp, structured, and production-focused:
- Buttons use the charcoal brand system, consistent padding-driven heights, and visible focus states.
- Cards are flat, bordered, static panels with no pointer-tracking glow or decorative hover effects.
- Inputs use a shared shell, light gray fills, clear borders, and a brand border or ring on focus.
- Marketing pages use a framed 1280px white column between a charcoal hero band and a charcoal footer band.
- Tables, tabs, dropdowns, modals, alerts, and form controls stay compact, readable, and token-driven.
- Imagery and previews should stay in palette, using structured placeholder artwork rather than stock photos.
Best For
Vertical works well for SaaS landing pages, B2B product sites, developer tools, admin surfaces, technical dashboards, documentation portals, and commerce experiences that need to feel serious, sharp, and modern.
It is especially useful when the product needs a recognizable design language that remains practical: high contrast, real component coverage, restrained styling, and clear implementation rules for AI-generated interfaces.
