Executive design skill for AI agents
Overview
Executive is a bright, friendly, and precise design system for modern product experiences. It pairs off-white pages and crisp white cards with deep slate actions, a controlled pastel accent palette, spacious composition, and clear contrast.
The system feels polished and approachable rather than formal or severe. Generous 16px component corners create a soft foundation, while pill-shaped controls and restrained shadows give interfaces a contemporary product-led character.
Design language
- Bright surface family: Pages, navigation, ordinary sections, and footers use white, with crisp white cards and controls creating clear layers.
- Controlled accent rhythm: Two white sections are followed by one centered pale accent section, cycling through lavender, warm yellow, cyan, and pink.
- Soft component geometry: Cards, widgets, overlays, menus, tabs, media, and panels use 16px corners. Buttons, single-line fields, alerts, and badges use pill corners.
- Deep slate actions: Primary actions use a confident dark slate treatment that remains easy to read against the bright page family.
- Quiet depth: Cards use restrained elevation and subtle borders only where the surrounding surface needs separation.
Typography
Executive uses a modern system sans-serif stack across headings, body copy, controls, and interface labels. Headings are semibold with gentle negative tracking, body copy keeps a comfortable 16px minimum, and labels remain clear and conversational.
Best suited for
Executive is ideal for SaaS products, business platforms, finance and operations tools, collaborative applications, customer portals, polished dashboards, and conversion-focused marketing sites that should feel trustworthy and welcoming.
Included guidance
The downloadable skill provides foundation tokens and complete specifications for layout, actions, content, form controls, navigation, overlays, feedback, data display, responsive behavior, marketing pages, application workspaces, and ecommerce interfaces.