Charm design skill for AI agents
Overview
Charm is a polished, production-ready design system skill for AI coding assistants. It combines warm light surfaces, vivid coral actions, cream accent bands, pill-shaped controls, and softly rounded panels to make interfaces feel approachable and confident rather than cold or overly corporate.
The system supports both expressive marketing pages and structured product interfaces. Its strong token rules keep landing pages, storefronts, onboarding flows, dashboards, forms, tables, and overlays visually consistent while preserving accessible interaction states.
Design Tokens
Color Palette
Charm uses warm neutral surfaces with coral reserved for actions, links, focus, and intentional feature accents.
| Token | Value | Purpose |
|---|---|---|
| Section Surface | #F7F7F5 |
Warm, matte content canvas |
| Panel | #FBFAF9 |
Cards and raised content surfaces |
| Accent Band | #F1F2EA |
Hero and footer backgrounds |
| Brand | #E4544B |
Primary actions and brand emphasis |
| Brand Text | #C9443A |
Accessible links and text accents |
| Heading | #1C1917 |
High-emphasis warm stone ink |
| Body | #57534E |
Primary reading text |
| Muted Body | #79716B |
Supporting copy and metadata |
| Border | #E7E6E5 |
Subtle component boundaries |
Status colors are reserved for real success, danger, and warning states rather than decorative use. Marketing content stays on the warm section surface, while the hero and footer use the cream band and fade smoothly into the page.
Typography
Charm uses Inter for body text, navigation, controls, and button labels. Headings use Circular in the display slot, with DM Sans as the free fallback, set bold with tight tracking for a friendly but confident voice. Fragment Mono provides uppercase labels, eyebrows, ticker text, and code-oriented details.
The hierarchy ranges from compact product UI to 72px marketing display headings. Controls remain concise and readable, while long-form page copy keeps a comfortable reading size and line height.
Shape and Spacing
Pill-shaped buttons, inputs, and alerts form Charm's most recognizable interaction pattern. Cards, widgets, modals, tables, and drawers use soft 24px panel corners; menus use 12px corners; textareas retain the panel shape; and checkbox boxes stay compact at 4px.
Spacing follows a 4px token scale. Content sits in centered containers up to 1280px wide with aligned side padding, generous section rhythm, and tighter spacing inside related control groups.
Surface and Depth
Charm separates surfaces with warm tone changes, hairline borders, and spacing instead of heavy shadows. Buttons and inputs receive a subtle control lift, menus and popovers may use a medium floating shadow, and an optional coral glow is reserved for genuinely emphasized brand elements.
Component Language
Primary actions use a coral gradient with a white label, a restrained layered shadow, and accessible hover and focus states. Resting cards stay light and quietly bordered. The hero may use one subtle line-pattern treatment behind its content, while the rest of the interface remains flat and untextured.
Every component inherits the same semantic tokens, responsive behavior, focus visibility, and contrast rules. This keeps dense application surfaces as coherent as large marketing sections.
Best For
Use Charm for polished SaaS products, welcoming marketing sites, modern storefronts, customer dashboards, onboarding experiences, productivity tools, and service brands that should feel warm, trustworthy, and refined without becoming formal or sterile.