Flat design skill for AI agents

Overview

Flat is a two-dimensional, performance-first design system skill for AI-powered development. It strips away every visual effect that doesn't serve function — no shadows, no gradients, no textures, no 3D illusions. What remains is pure surface: solid color fills, clean borders, and crisp typography on a perfectly flat plane. This is UI distilled to its most honest, most performant form.

When you add this skill file to your AI coding tool, every component it generates is built entirely from flat surfaces and solid colors. Buttons are rectangles with fills. Cards are bordered containers without elevation. States change through color swaps, not shadow transitions. The result loads faster, renders crisper, and communicates more clearly than any dimensional approach.

Design tokens

Color palette

Flat pairs a warm, energetic orange-red with a cool violet — two vibrant colors that carry enough visual weight to create hierarchy on completely flat surfaces without any help from shadows or gradients:

The orange-red + violet pairing is the most visually vibrant warm/cool combination of any typeui.sh skill. In a flat design system, color does the work that shadows, gradients, and elevation do in dimensional systems. The primary orange-red (#F2673C) is warm enough to feel energetic and approachable, while the violet secondary provides the cool contrast that prevents the palette from feeling monotone. Both colors are saturated enough to clearly differentiate interactive elements from the flat white surface — critical when there are no depth cues to help.

Typography

Flat uses Inter for all body and display text, paired with JetBrains Mono for code and monospaced content. In a system that removes all ornamentation, the typeface's clarity becomes even more important — Inter's optimized screen rendering and neutral personality let every word land cleanly on the flat surface.

The type scale uses six 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). Flat's approach to weight is functional: without shadows or borders to distinguish elements, weight changes become a primary hierarchy tool alongside color and size. The AI agent uses 400 for body, 500-600 for structural elements, and 700 for primary emphasis — each weight step does measurable work because there are no visual effects to lean on.

Spacing

A 4px base unit drives the spacing scale: 4 / 8 / 12 / 16 / 24 / 32. On flat surfaces, spacing is the only tool for communicating grouping and separation. Without shadows to elevate a card above its surroundings or gradients to mark section transitions, the distance between elements tells the user what belongs together and what doesn't. The 4px grid gives the AI agent precise control over these spatial relationships, where every gap carries meaning because no other visual cue is available.

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. The skill additionally requires explicit designs for empty, loading, and error states.

Design philosophy

Flat is the anti-ornamentation design system. It takes the position that every visual effect is a cost — render time, cognitive processing, inconsistency risk — and removes any effect that doesn't directly serve communication:

• Zero shadows — no box-shadow, no drop-shadow, no text-shadow. Elevation doesn't exist. Every element sits on the same plane, and hierarchy is communicated through color, size, weight, and spacing alone
• Zero gradients — every fill is a single solid color. The AI agent never generates CSS gradients for visual effect. If two colors need to appear together, they meet at a hard edge, not a blend
• Zero textures — no background patterns, no noise overlays, no grain effects. Surfaces are mathematically flat. #FFFFFF is exactly #FFFFFF
• Color does the heavy lifting — without depth cues, the warm orange-red primary becomes the most important interactive signal. A flat orange button on a white surface is unmistakable. The saturated palette exists specifically because flat surfaces need vibrant color to differentiate elements
• Single visual metaphor — the skill prohibits mixing flat design with dimensional elements. No "flat except the modals have shadows" compromises. If one element is flat, every element is flat
• Performance as a feature — the absence of shadows, gradients, and complex effects means simpler CSS, fewer paint operations, and faster rendering. Flat isn't just an aesthetic — it's a performance optimization

This makes Flat a strong fit for:

• Enterprise dashboards and internal tools
• Government and institutional web services
• Data-heavy admin panels and back-office interfaces
• Low-bandwidth and performance-constrained environments
• Embedded interfaces and kiosk applications
• Design systems that need to work across inconsistent rendering environments
• Any product where loading speed, render performance, and cross-platform consistency are priorities

Accessibility

Flat enforces WCAG 2.2 AA compliance as a hard requirement. Two-dimensional design and accessible design share a core principle: communicate through the clearest possible channel. 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 — in a flat system, focus rings use solid color borders rather than shadow-based indicators, making them crisper and more consistent across browsers
• Maintain sufficient color contrast ratios, with particular attention to the orange-red primary (#F2673C) against white surfaces where warm colors can read slightly softer than cool ones
• Prioritize accessibility over aesthetics when the two conflict

Flat design has an inherent accessibility advantage: without shadows, gradients, or transparency, every visual relationship is deterministic. A color either meets contrast requirements or it doesn't — there are no gradient midpoints, shadow edges, or semi-transparent overlays that might pass in one context and fail in another. The AI agent generates components with fully predictable contrast at every state.

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 flat

2. The file is saved to .cursor/skills/flat/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 zero-shadow, zero-gradient interfaces with solid color fills, the orange-red + violet palette, Inter typography, and crisp 4px grid spacing.

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 Flat guidelines — using solid fills only, no shadows or gradients, vibrant color for interactive signals, and spacing as the primary grouping tool.

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

Other typeui.sh skills minimize decoration. Flat eliminates it entirely:

• Zero-shadow, zero-gradient, zero-texture — the only skill that explicitly prohibits all three dimensional effects. No other skill goes this far in stripping away visual ornamentation
• Warm orange-red primary — #F2673C is the only warm primary color on typeui.sh. In a flat system where color does the work of shadows and elevation, this vibrant warm tone makes interactive elements impossible to miss
• Performance as a design principle — the only skill that frames its aesthetic as a rendering optimization. Simpler CSS, fewer paint operations, faster load times — flatness has measurable technical benefits
• Deterministic accessibility — without gradients, shadows, or transparency, every contrast relationship is fully predictable. The AI never generates components where contrast varies based on position, background, or overlay state
• Spacing as the only grouping tool — without elevation to separate layers, the distance between elements is the sole signal for what belongs together. This makes spatial relationships carry more meaning than in any other skill
• Quality gates — every rule is anchored to a token or measurable threshold, keeping the pure-flat output consistent whether the AI generates a single badge or an entire enterprise admin panel