Modern design skill for AI agents

Overview

Modern is a calm, serif-driven design system skill for AI-powered development. Built around the mantra "ship software peacefully," it pairs the editorial authority of IBM Plex Serif with a muted purple surface and white text to create interfaces that feel like a well-designed developer tool wrapped in a literary magazine. Where most design systems shout for attention, Modern speaks quietly and earns trust through craft.

When you add this skill file to your AI coding tool, every component it generates carries the same unhurried confidence — serif typography that reads as thoughtful rather than decorative, a deep purple canvas that replaces the standard white-page convention, and a near-black secondary that anchors everything in seriousness without severity.

Design tokens

Color palette

Modern inverts the typical surface assumption. Instead of white backgrounds with colored accents, the surface itself is purple — creating an immersive, authored environment where every screen feels like a page in a carefully designed book:

The most distinctive token choice is the unified primary and surface: both are #553F83. The entire interface lives on a purple canvas. This isn't a dark mode — it's a colored environment, like writing on tinted paper stock. The near-black secondary (#111111) creates depth within this canvas: cards, dropdowns, and overlays use dark panels that recede behind the purple surface, establishing a layered composition. White text on purple creates a reading experience that feels warm and contemplative rather than the stark efficiency of black-on-white.

Typography

Modern uses IBM Plex Serif for all body and display text — the only serif-everywhere skill on typeui.sh that uses a workhorse serif rather than a display serif. IBM Plex Serif was designed by IBM for long-form technical content: it's readable at small sizes, authoritative at large sizes, and carries the structured reliability of a typeface built for documentation.

The type scale uses six practical sizes:

• 12px — Fine print, tertiary metadata
• 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). IBM Plex Serif's weight range is more functional than dramatic — the AI agent uses 400 for comfortable body reading, 500-600 for headings and navigation, and 700 for primary emphasis. The serif's inherent stroke contrast provides built-in visual texture at every weight, so the AI doesn't need extreme weight jumps to create hierarchy. White serif text on purple surfaces has a distinctly literary quality, like a well-set title page.

JetBrains Mono handles monospaced content — code blocks, terminal output, and technical data. On the purple surface, monospaced white text creates a terminal-meets-notebook aesthetic that feels native to developer tools.

Spacing

A 4px base unit drives the spacing scale: 4 / 8 / 12 / 16 / 24 / 32. The editorial, minimal visual style calls for spacing that's measured and deliberate — not generous enough to feel luxurious, not tight enough to feel compact. The 4px grid gives the AI agent the precision to create layouts that feel calmly organized, like a well-typeset document where every margin was considered.

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

Modern is built on the idea that the best software interfaces are the ones that feel peaceful to use. Every design decision reduces friction and visual noise:

• Purple as environment, not accent — the surface and primary share the same token. The AI agent doesn't add purple to a white interface; it builds the entire interface inside a purple space. This creates a cohesive, immersive feeling where the color is atmospheric rather than decorative
• Serif as the voice of calm — IBM Plex Serif communicates authority without aggression. Every line of text feels considered and intentional, carrying the same quiet confidence as a well-written technical document. The serif adds warmth that sans-serif developer tools typically lack
• Near-black for depth — the secondary #111111 creates dark panels within the purple environment: card backgrounds, dropdown surfaces, sidebar blocks. This layering gives the interface spatial depth without competing with the purple canvas
• White text as the constant — on a colored surface, white text becomes the unifying thread. Every piece of content shares the same voice, creating consistency that makes the interface feel authored by a single hand
• Peaceful, not passive — the muted palette and editorial type don't mean the interface lacks energy. Interactive elements are clearly defined, states are explicit, and hierarchy is unambiguous. The calm comes from clarity, not from removing information

This makes Modern a strong fit for:

• Developer tools, dashboards, and coding environments
• Writing and publishing platforms
• Knowledge management and documentation tools
• Note-taking and personal productivity apps
• Technical SaaS products
• API documentation and reference sites
• Any product where users spend hours in the interface and need it to feel restful rather than stimulating

Accessibility

Modern enforces WCAG 2.2 AA compliance as a hard requirement. A colored surface introduces specific contrast considerations that the skill addresses explicitly. 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 — on a purple surface, focus indicators must be clearly visible, using white outlines or high-contrast borders rather than subtle color shifts
• Maintain sufficient color contrast ratios, with particular care for white text (#FFFFFF) on purple surface (#553F83). This pairing provides a contrast ratio of approximately 7:1, well above the AA minimum for normal text
• Prioritize accessibility over aesthetics when the two conflict

The colored surface means standard patterns don't always translate directly. Light gray disabled text that's acceptable on white might fail contrast on purple. The skill encodes specific guidance for disabled states, placeholder text, and secondary content to ensure readability against the non-standard background.

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 modern

2. The file is saved to .cursor/skills/modern/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 calm, serif-driven interfaces on purple surfaces with white text, near-black depth panels, and editorial-grade typographic hierarchy.

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 Modern guidelines — using IBM Plex Serif throughout, the purple environment as the foundation, near-black layering for depth, and measured 4px spacing for editorial precision.

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 Modern apart

Modern is the only typeui.sh design skill where the surface itself is the primary color. Every other skill builds on white or black — Modern builds on purple:

• Unified primary + surface — #553F83 for both tokens creates a colored environment rather than a white page with colored accents. The AI generates interfaces that live inside a color, not on top of one
• Workhorse serif everywhere — IBM Plex Serif isn't a decorative display face; it's an industrial-grade serif designed for sustained reading of technical content. White serif text on purple creates a literary developer-tool aesthetic no other skill can produce
• Near-black depth layering — secondary #111111 panels sit within the purple space, creating spatial hierarchy through darkness rather than elevation or shadow
• Ship software peacefully — the brand ethos shapes every token. The muted purple, the quiet serif, the measured spacing — everything is calibrated to reduce visual stress for people who spend all day in the interface
• Colored-surface accessibility — the skill explicitly addresses contrast challenges unique to non-white, non-black backgrounds, encoding specific guidance for disabled states and secondary text that standard light/dark patterns don't cover
• Quality gates — every rule is anchored to a token or measurable threshold, keeping the calm, editorial aesthetic consistent whether the AI generates a single input field or an entire development environment