Material design skill for AI agents

Overview

Material is a layered, motion-aware design system skill for AI-powered development. Inspired by the principles of Material Design — where digital surfaces behave like physical sheets of paper with elevation, shadow, and responsive motion — it produces interfaces that feel tangible and systematic. Every component exists on a defined layer, responds to interaction with purposeful animation, and follows a deep-purple visual identity that feels both modern and opinionated.

When you add this skill file to your AI coding tool, every component it generates understands its place in a layered system — buttons that lift on hover, cards at defined elevations, modals that slide above content, and a consistent purple-toned palette that gives the entire interface a cohesive, themed identity.

Design tokens

Color palette

Material uses a monochromatic purple system — a deep violet primary paired with a soft lavender secondary — creating a fully themed interface rather than a neutral canvas with colored accents:

The deep violet + lavender pairing is the only monochromatic primary/secondary system on typeui.sh. Both tokens live in the same purple family but at dramatically different saturation and lightness levels. The AI agent uses the deep primary (#6442D6) for interactive elements, top bars, and key actions, while the soft secondary (#C8B3FD) fills selection states, active chips, tinted surfaces, and subtle highlights. Together they create a fully themed experience where every screen feels part of a single, intentionally designed product — not a neutral shell with color sprinkled in.

Typography

Material uses a dual-typeface system that pairs two of the most widely deployed screen fonts:

• Inter — Primary/body font. Handles all body text, form labels, navigation, and metadata. Inter's precision and neutrality keep readable content clean against the themed purple surfaces and elevated components.

• Roboto — Display font. Google's signature typeface, used for headings and display moments. Roboto's slightly more mechanical proportions and distinct character set give headings a subtle differentiation from body text — just enough to signal "display level" without a dramatic typeface change.

• Fira Code — Monospaced font for code blocks, terminal output, and technical data. Its programming ligatures and clear glyph differentiation make it ideal for developer-facing contexts within the Material aesthetic.

The type scale uses six practical sizes:

• 12px — Fine print, tertiary metadata, overlines
• 14px — Captions, helper text, secondary labels
• 16px — Body text (default)
• 20px — Large body, lead text, card titles
• 24px — Section headings (h3)
• 32px — Page headings, hero text (h1/h2)

Font weights span 100 (thin) to 900 (black). The Material approach favors medium weights for UI chrome (500 for buttons, tabs, and app bar labels) and regular weight (400) for body content, with 600-700 reserved for headings and primary emphasis.

Spacing

A 4px base unit drives the spacing scale: 4 / 8 / 12 / 16 / 24 / 32. In a layered system, spacing serves double duty: it creates the standard visual grouping and separation, but it also reinforces elevation relationships. Elements on the same layer sit closer together; elements on different layers have wider gaps plus shadow differences. The 4px grid gives the AI agent the precision to coordinate spatial relationships with the elevation system.

Component coverage

The skill file covers 40+ component families grouped by function:

• Inputs and forms — buttons, text inputs, selects, comboboxes, checkboxes, radios, switches, textareas, date/time pickers, file uploaders
• Data display — cards, tables, data lists, data grids, charts, stats/metrics, badges, chips, avatars
• Navigation — breadcrumbs, pagination, steppers, sidebars, top bars, command palette, tabs
• Overlays — modals, drawers, sheets, tooltips, popovers, menus
• Feedback — alerts, toasts, notifications center, progress indicators, skeletons, empty states
• Page-level — authentication screens, settings pages, documentation layouts, onboarding flows, pricing blocks, search

For each component, the skill defines required interaction states (default, hover, focus-visible, active, disabled, loading, error), keyboard and touch behavior, spacing and typography token usage, and responsive edge cases.

Design philosophy

Material is built on the metaphor that digital surfaces are physical layers of material that can be moved, elevated, and stacked:

• Elevation as system — every component has a defined resting elevation. Buttons sit above the surface. Cards float higher. Modals and drawers occupy the highest layer. The AI agent uses consistent shadow depth to communicate this hierarchy, so users intuitively understand what's on top of what
• Responsive motion — interactions aren't instant state changes; they're transitions. A button press causes a ripple. A card lift casts a deeper shadow. A drawer slides in from the edge. The skill teaches the AI to use motion that communicates cause and effect rather than decorating for its own sake
• Monochromatic theming — the deep violet + lavender pairing creates a fully themed interface where the brand color permeates every screen. App bars, selection states, floating action buttons, and tinted surfaces all speak the same purple language
• Surface as material — cards, sheets, and containers aren't abstract boxes; they're surfaces with weight and position. The AI agent generates components that respect this metaphor: cards have consistent corner radii, defined padding, and shadows that respond to their elevation level
• Dynamic theming ready — the monochromatic token structure means the entire interface can be re-themed by shifting the primary and secondary hues while maintaining all elevation and spatial relationships

This makes Material a strong fit for:

• Android and cross-platform mobile applications
• Google ecosystem products and integrations
• Enterprise SaaS dashboards and admin panels
• Education and e-learning platforms
• Productivity and collaboration tools
• Any product that needs a systematic, scalable component architecture with built-in motion and elevation

Accessibility

Material enforces WCAG 2.2 AA compliance as a hard requirement. The layered, motion-driven aesthetic enhances usability when applied correctly and never compromises it. The skill file instructs the AI agent to:

• Use keyboard-first interaction patterns for all interactive elements
• Include visible focus states on every focusable component — focus indicators are calibrated to be visible across all elevation levels, including on the deep violet primary surfaces where standard blue focus rings might blend in
• Maintain sufficient color contrast ratios, with particular care for the soft lavender secondary (#C8B3FD) as a background or surface color where contrast with text can be tighter than on white
• Prioritize accessibility over aesthetics when the two conflict

The elevation system supports accessibility by providing redundant spatial cues — an elevated card has both a shadow and different background treatment, so users who cannot perceive shadow depth still see distinct boundaries. Motion transitions communicate state changes, but the skill ensures all state information is also available without animation for users who prefer reduced motion.

Every accessibility rule is written to be testable in code review.

How to use with Claude AI

In Cursor IDE

1. Pull the skill file into your project:

npx typeui.sh pull material

2. The file is saved to .cursor/skills/material/SKILL.md by default. Cursor automatically picks up skill files from this directory and makes them available to Claude.

3. Start prompting — Claude will generate Material-style interfaces with elevation-aware components, the deep violet + lavender palette, Inter + Roboto typography, and purposeful motion.

In Claude Desktop or API

1. Copy the skill file content from the typeui.sh page (use the Copy button in the sidebar).

2. Paste it into your system prompt or as a reference document at the start of your conversation.

3. Ask Claude to build components or pages. It will follow the Material guidelines — using layered elevation, the monochromatic purple theme, responsive transitions, and Fira Code for developer contexts.

In other AI tools

The skill file is standard markdown and works with any AI tool that accepts system-level instructions:

• Windsurf — place the file in your project's .windsurf/rules/ directory
• GitHub Copilot — add it to .github/copilot-instructions.md or reference it in your prompt
• OpenAI GPTs — upload it as a knowledge file in the GPT configuration
• Any LLM API — include the file content in the system message

What sets Material apart

Material is the only typeui.sh design skill that treats elevation and motion as first-class design primitives alongside color and typography:

• Monochromatic purple theme — #6442D6 primary and #C8B3FD secondary create the only same-family color system on the platform. The interface is fully themed, not neutrally accented
• Elevation as hierarchy — buttons, cards, modals, and drawers each have defined shadow depths that communicate layering. No other skill systematizes elevation across the full component library
• Motion as communication — the skill treats transitions as functional feedback, not decoration. Ripples, lifts, and slides tell the user what happened and why — the only skill that encodes motion as a design requirement
• Inter + Roboto pairing — two of the most screen-optimized typefaces, using Inter for body precision and Roboto for display recognition. The combination is subtly different but functionally distinct
• Fira Code personality — programming ligatures in the monospace font make developer-facing components feel native and considered, distinct from the JetBrains Mono default
• Dynamic theming structure — the monochromatic token system is designed for re-theming. Shift the purple hue and the entire interface updates while maintaining all elevation and spatial relationships
• Quality gates — every rule is anchored to a token or measurable threshold, keeping the layered, themed output consistent whether the AI generates a single chip or an entire cross-platform application