Warm design skill for AI agents

Overview

Warm is a polished, paper-inspired design system for interfaces that should feel quiet, confident, and editorial. It combines a matte warm page surface with crisp hairline-bordered panels, a deep crimson action color, near-sharp geometry, and one unified Inter typographic voice. The result feels considered and print-like without becoming decorative, nostalgic, or visually heavy.

The registry package gives AI coding tools an implementation-ready source of truth. Its central SKILL.md coordinates 34 focused foundation and component modules, so generated pages follow the same color roles, typography, spacing, responsive behavior, component states, and accessibility rules instead of improvising from a loose mood description.

Visual foundations

Color system

Warm is light-first and uses semantic color roles throughout. Raw hex values belong in the token layer, while components consume named tokens.

The page stays on one flat paper surface from the hero through the footer. Warmth comes from the palette itself, not from gradients, grain, noise, or alternating tinted section bands. Crimson is reserved for meaningful actions and emphasis rather than being washed across every section.

Typography

Warm uses Inter for every voice, including headings, body copy, controls, and buttons. This single-family approach creates a calm editorial rhythm:

• Headings use medium weight (500), tight -0.04em tracking, and a 64px maximum display size.
• Body and UI copy use regular weight (400) with comfortable 1.5 line height.
• Eyebrows, labels, ticker text, and button labels use small uppercase Inter with wide tracking.
• Code alone switches to the monospace stack.
• Reading copy keeps a 16px floor even though compact controls can use the 14px system baseline.

Nothing needs to become extra-bold to create hierarchy. Scale, spacing, color, and placement carry emphasis while the type stays restrained.

Shape, borders, and depth

Warm's defining shape is a crisp 2px corner. Buttons, inputs, alerts, cards, widgets, tables, modals, and drawers all stay near-sharp. Only controls that are round by function, such as avatars, radios, toggles, range thumbs, and status dots, use a full radius.

Cards and panels separate from the paper surface with a subtle tone step and a one-pixel hairline. Resting surfaces do not use drop shadows. A soft shadow is reserved for truly floating overlays such as menus, dropdowns, and popovers, where depth communicates stacking rather than decoration.

Layout and rhythm

Content sits in a centered 1280px container with aligned side insets. Standard content sections use 112px of vertical padding on desktop and 64px below 768px. The spacing scale governs all internal gaps, with 24px as the fixed beat after headings and paragraphs.

Responsive layouts preserve content and labels rather than hiding them to make a row fit. Controls wrap, stack, or move as a complete action when space becomes limited. This keeps mobile layouts readable and predictable without creating a separate visual language.

Signature composition

A recognizably Warm page uses the same matte paper surface throughout, near-sharp panels with fine warm-gray borders, disciplined whitespace, and a small number of deep-crimson actions. Headings are clean rather than oversized, card groups align to a visible grid, and status colors appear only when they communicate an actual state.

Imagery and data visualization also stay inside the system. Placeholder artwork is composed from theme tokens rather than unrelated stock imagery, and dashboards use real chart components with accessible labels, legends, and tooltips.

Component coverage

The package includes a central skill plus 34 dedicated modules covering:

• Foundations: colors, typography, spacing, radius, shadows, motion, responsive behavior, and composition patterns
• Actions and navigation: buttons, button groups, breadcrumbs, pagination, tabs, dropdowns, drawers, and tooltips
• Forms: text inputs, textareas, selects, checkboxes, radios, toggles, ranges, file inputs, number inputs, phone inputs, and time pickers
• Content and data: cards, tables, badges, alerts, accordions, mockups, and chart guidance
• Overlays: modals, menus, popovers, and drawers with explicit focus and dismissal behavior

Every relevant component defines default, hover, focus-visible, active, disabled, loading, and error behavior along with its responsive and keyboard expectations.

Accessibility and quality

Warm targets WCAG 2.2 AA as a baseline. The guidance requires semantic HTML, visible focus treatment, complete keyboard interaction, named controls, logical heading structure, and contrast checks across every state, including animated transitions. Touch targets and mobile reading sizes are treated as implementation requirements, not optional polish.

The system also blocks common AI-generated inconsistencies: arbitrary hex colors, mixed corner radii, decorative shadows, icon glyph substitutions, hidden mobile labels, native unthemed form controls, and ad hoc spacing values.

Using Warm with TypeUI MCP

Connect the TypeUI MCP server to your AI coding tool and select Warm as the design skill for the project. The server supplies the registry context while the agent works, allowing Claude, Codex, Cursor, and other MCP-connected tools to use the same foundations and component rules without manually re-explaining the visual direction in every prompt.

Ask the agent to build a component, page, or flow as usual. Warm provides the constraints; your framework and product requirements still determine the implementation.

Best suited for

Warm works especially well for:

• Editorial products and content-led platforms
• Thoughtful SaaS and productivity applications
• Premium commerce with a restrained visual voice
• Portfolios, studios, and professional services
• Dashboards that need clarity without a cold enterprise aesthetic
• Products that want a tactile print sensibility without texture or ornament

Its core principle is simple: use semantic foundations, keep the surface quiet, and let precise hierarchy and interaction carry the experience.