Matcha design skill for AI agents
Overview
Matcha is a calm, editorial design system skill file for AI coding assistants. It builds interfaces around warm oat surfaces, deep matcha-green brand color, muted sage accents, soft serif headings, and small crisp corners.
The system is best when the generated UI should feel relaxed, thoughtful, and content-led. Wellness products, editorial sites, boutique commerce, lifestyle apps, and calm productivity tools can use Matcha to create a grounded visual direction that avoids both clinical minimalism and decorative excess.
Design Tokens
Color Palette
Matcha uses a stable warm palette where light and dark values intentionally remain the same. The result is a consistent matcha theme instead of a dramatic theme switch.
| Token | Value | Purpose |
|---|---|---|
| Surface | #F6F2E8 |
Warm oat page and content backgrounds |
| Section Surface | #DBF2D0 |
Soft matcha-green section background |
| Brand | #314535 |
Primary actions, headings, and brand anchors |
| Brand Medium | #AEC2A4 |
Muted supporting fills and quiet accents |
| Heading | #2B3A2E |
Editorial heading color |
| Body | #4A5547 |
Paragraphs, labels, and readable UI copy |
The palette is intentionally low-contrast in mood but not in usability. Token usage should preserve the warm oat and sage relationship throughout the interface.
Typography
Matcha uses Noto Serif for headings and display text with Noto Sans for body copy and UI labels. The serif headings create a composed, editorial feel, while the sans-serif body keeps forms, cards, and longer copy easy to scan.
Headings use medium weight rather than aggressive boldness. The overall rhythm should feel measured and restrained.
Spacing and Shape
Matcha uses an 8px spacing system, equal section spacing, and consistent section backgrounds. Sections should not alternate colors. Because the page uses one steady surface treatment, adjacent sections are separated with 1px dividers and careful vertical rhythm.
Corners are crisp at 4px, buttons are gently raised, and cards rely on light shadows rather than heavy depth.
Component Language
Cards are lightly shadowed editorial panels with modest radius and quiet borders. Buttons should feel raised but not glossy. Inputs, navigation, badges, and content blocks should use the same oat, sage, and matcha token system so generated UI feels like a single calm publication.
Best For
Use Matcha for wellness apps, nutrition tools, editorial commerce, thoughtful SaaS dashboards, booking flows, and content-heavy websites that need a refined but approachable visual system.