Sleek design skill for AI agents

Overview

Sleek is a precision-minimal design system skill for AI-powered development. It embodies the "less is more" philosophy at a system level — every token, every spacing decision, and every interaction is reduced to its most essential form. Where Simple provides conventional defaults and Spacious adds breathing room, Sleek applies a stricter filter: if a visual element doesn't directly serve function, it doesn't exist.

When you add this skill file to your AI coding tool, every component it generates follows the 60-30-10 color discipline, uses subtle non-distracting interactions, and maintains the kind of surgical consistency that makes complex interfaces feel effortless. Sleek doesn't just look minimal — it's engineered to reduce cognitive load.

Design tokens

Color palette

Sleek uses the same blue-violet axis as several other typeui.sh skills, but applies it through the 60-30-10 rule — a proportional color system that controls exactly how much of each color appears in any layout:

The 60-30-10 rule transforms a standard palette into a disciplined composition system:

• 60% surface white — the dominant visual layer. Backgrounds, containers, and open space create the clean canvas
• 30% text near-black — headings, body text, borders, and structural elements provide contrast and hierarchy
• 10% accent blue — buttons, links, active states, and highlights. Color appears rarely and always with purpose

The AI agent follows these proportions at every scale — a full page layout, a single card, or an individual form. The result is interfaces where blue accent moments carry maximum visual weight because they're surrounded by neutral space and dark structure.

Typography

Sleek uses Inter for all body and display text, paired with JetBrains Mono for code and monospaced content. This is the same type pairing used by Simple and Shadcn, but Sleek applies it with a different intent.

Where Simple uses Inter as a safe default and Shadcn uses it for developer-ecosystem identity, Sleek uses Inter because it's the most optically invisible typeface available. Inter was designed to disappear — to be read without being noticed. In a system that reduces everything to essentials, the type should deliver content without adding any personality of its own.

The type scale follows a desktop-first expressive approach. Font weights span 100 (thin) to 900 (black), but Sleek's usage is surgically narrow:

• 400 — body text, descriptions, content
• 500 — labels, navigation, UI chrome
• 600 — headings, emphasis
• 700 — rare: hero moments or primary CTAs only

Weights below 400 and above 700 are available but deliberately discouraged by the skill. Every weight change must earn its place. If two elements can be differentiated by size or spacing alone, the AI doesn't add a weight change.

Spacing

Sleek uses an 8pt baseline grid — every margin, padding, and gap aligns to multiples of 8px. The 8pt grid combined with the minimal aesthetic creates interfaces with metronomic consistency. Every gap is predictable. Every padding is a clean multiple. The rhythm is so regular that the eye stops noticing the layout and focuses entirely on the content.

The critical difference from Spacious (which also uses an 8pt grid) is intent: Spacious defaults to generous space. Sleek defaults to precise space — exactly enough for clarity, never more for the sake of openness. Padding is functional, not atmospheric.

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

Sleek is the most reductive design skill on typeui.sh. Every principle is about removing rather than adding:

• 60-30-10 color discipline — the proportional rule isn't a suggestion; it's a constraint the AI applies at every scale. Color never exceeds 10% of any composition, ensuring that every blue accent carries maximum functional weight
• Subtle interactions — hover states are slight opacity changes or thin border shifts, not dramatic color transformations. Focus rings are precise. Active states are restrained. The interface responds to the user without performing for them
• Weight minimalism — the full Inter weight range is available, but the skill teaches the AI to use the narrowest band possible (400-600 for most contexts). If hierarchy can be achieved through size or space, weight stays unchanged
• Functional spacing — every gap exists because removing it would reduce clarity. No padding for aesthetics. No margins for breathing room. Space is a tool, measured out in 8px increments with engineering precision
• Cognitive load as a metric — the skill evaluates every design decision against the question: does this reduce or increase the user's mental effort? If an element doesn't reduce cognitive load, the AI removes it

This makes Sleek a strong fit for:

• Complex SaaS dashboards with dense data
• Financial and analytics platforms
• Project management and productivity tools
• Enterprise admin panels and back-office interfaces
• Developer tools and API consoles
• Healthcare and clinical interfaces
• Any product where users perform repetitive tasks and efficiency matters more than impression

Accessibility

Sleek enforces WCAG 2.2 AA compliance as a hard requirement. Minimal design and accessibility are natural partners — fewer visual distractions mean clearer communication. 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 — subtle enough to fit the minimal aesthetic, prominent enough to be unambiguous
• Maintain sufficient color contrast ratios, with the near-black text on white providing comfortable margins above AA requirements
• Prioritize accessibility over aesthetics when the two conflict

The 60-30-10 discipline actually supports accessibility: the 10% accent rule ensures interactive elements are always visually distinct from the 60% surface and 30% structural layers. Users never have to guess what's clickable because the blue accent is the only color in the composition — it always means "this is interactive."

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 sleek

2. The file is saved to .cursor/skills/sleek/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 precision-minimal interfaces with 60-30-10 color discipline, Inter typography at narrow weight bands, and functionally precise 8pt 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 Sleek guidelines — using the proportional color system, subtle interaction states, the narrowest effective weight range, and metronomic spacing throughout.

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

Several typeui.sh skills use Inter, blue-violet tokens, and clean layouts. Sleek is the only one that applies a systematic reduction filter to every decision:

• 60-30-10 as a system rule — the only skill that encodes proportional color usage as a constraint. The AI doesn't just pick the right color; it controls how much of it appears in every composition
• Weight minimalism — where other skills celebrate their full weight range, Sleek restricts it. 400-600 for most contexts, 700 for rare emphasis. Every weight change must justify itself
• Precise vs. generous spacing — same 8pt grid as Spacious, opposite intent. Spacious defaults to more space; Sleek uses exactly as much as function requires. The distinction is philosophical: Spacious is calm, Sleek is efficient
• Subtle interactions — hover, focus, and active states use the smallest effective visual changes. No dramatic transitions, no bold color shifts. The interface responds without performing
• Cognitive load as a design metric — the only skill that explicitly frames every decision as a cognitive-load trade-off. Elements exist only if they reduce the user's mental effort
• Quality gates — every rule is anchored to a token or measurable threshold, keeping the precision-minimal output consistent whether the AI generates a single tooltip or an entire analytics dashboard