Dithered design skill for AI agents

Overview

Dithered is a graphic-art-inspired design system skill for AI-powered development. It brings the visual technique of dithering — dot patterns that simulate shades and gradients with a limited palette — into modern digital interfaces. The result is UI that feels like a risograph print or an early Macintosh screen rendered with today's engineering: nostalgic and artistic on the surface, clean and minimal underneath.

When you add this skill file to your AI coding tool, every component it generates balances two worlds — the textural, halftone-influenced aesthetic of dithered graphics with the precision and readability of a modern design system. Dot patterns and limited-palette shading become design tools, not gimmicks.

Design tokens

Color palette

Dithered uses a familiar blue-violet axis, but the magic isn't in the colors themselves — it's in how they're applied. Dithering transforms solid fills into textured dot patterns, making even a standard palette feel entirely new:

The blue-violet pairing takes on a different character in a dithered context. Instead of smooth gradients between primary and secondary, the AI agent creates halftone transitions — dot patterns where blue dots become violet dots across a surface, simulating the color mixing of screen printing. The white surface token is especially important: dithering works by exposing the background through gaps in the dot pattern, so the white canvas is an active part of every color application.

Typography

Dithered uses a dual-typeface system that pairs readability with graphic personality:

• Open Sans — Primary/body font. A humanist sans-serif optimized for screen legibility at every size. Open Sans handles all readable content — body text, form labels, navigation, metadata. Its clean, neutral forms ensure that text remains sharp and comfortable even when surrounded by textured, dithered surfaces.

• Space Grotesk — Display font. A proportional grotesque with distinctive ink traps and slightly quirky terminals that echo the graphic-art sensibility of the dithered aesthetic. Space Grotesk gives headings a crafted, printed quality that complements the halftone visual language.

• IBM Plex Mono — Monospaced font for code blocks, technical data, and tabular content. Its industrial clarity provides a grounding counterpoint in data-heavy contexts.

The type scale uses six sizes:

• 14px — Captions, helper text, secondary labels
• 16px — Body text (default)
• 18px — Large body, lead text
• 24px — Section headings (h3)
• 32px — Page headings (h2)
• 40px — Hero headings (h1)

Font weights span 100 (thin) to 900 (black). The dithered aesthetic pairs well with heavier display weights — a bold Space Grotesk heading sitting above a dithered surface creates the visual impact of a letterpress print. Body text stays at regular weights for clean reading against textured backgrounds.

Spacing

A 4px base unit drives the spacing scale: 4 / 8 / 12 / 16 / 24 / 32. Dithered surfaces add visual complexity to every element, so the spacing system compensates with clarity and consistency. Clean, predictable margins and padding create the structural discipline that lets textured fills feel artistic rather than noisy. The 4px grid ensures that dot patterns align to the same spatial rhythm as the content they surround.

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 — ensuring dithered textures are applied consistently even in transitional UI moments.

Design philosophy

Dithered is built on the principle that constraints breed creativity. By limiting how color is applied — through dot patterns instead of smooth fills — the system creates a visual texture that's impossible to achieve with conventional design tools:

• Dot patterns as design language — dithering isn't an effect applied at the end; it's the foundational technique. The AI agent uses halftone-style patterns for card backgrounds, button fills, hover states, and decorative surfaces. Solid color is reserved for text, borders, and small UI elements where dots would be illegible
• White as active ingredient — the surface white shows through the gaps in every dither pattern, making the background an active participant in color mixing. A 50% dither of blue on white creates a perceived light blue without introducing a new color token
• Minimal underneath — strip away the dither textures and the system is clean and modern. Open Sans body text, standard blue-violet tokens, 4px grid. The dithered technique adds personality on top of a solid foundation rather than replacing structural discipline
• Print-inspired, screen-native — the aesthetic references risograph, screen printing, and halftone photography, but every pattern is designed for crisp rendering on digital screens. No actual degradation, just the visual vocabulary of limited-palette reproduction
• Purposeful motion only — the skill blocks decorative animation without function. Dithered textures create enough visual richness statically; adding gratuitous motion would overwhelm the already-textured surfaces

This makes Dithered a strong fit for:

• Independent and alternative brand websites
• Art, photography, and illustration portfolios
• Zine-style publications and editorial platforms
• Print shop and creative studio interfaces
• Music labels and indie record store sites
• Vintage and retro-themed e-commerce
• Conference and festival event sites
• Any product that wants to signal craft, independence, and artistic sensibility

Accessibility

Dithered enforces WCAG 2.2 AA compliance as a hard requirement. Textured surfaces add visual complexity, so the accessibility rules are especially precise. 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 must be clearly distinguishable against dithered backgrounds, using solid borders or outlines rather than fill changes that would blend into the texture
• Maintain sufficient color contrast ratios, measuring contrast against the perceived color of a dithered surface (not just the dot color) to ensure text remains readable on halftone backgrounds
• Ensure responsive behavior by default across all components and breakpoints
• Avoid inaccessible hit areas — interactive elements must maintain minimum touch and click targets even when dithered styling makes visual boundaries appear diffuse

Text is always rendered in solid color, never dithered. The skill explicitly prohibits applying dither patterns to body text, labels, or any content that users need to read. Dithering is a surface and decorative treatment only — the moment it touches readable content, it becomes an accessibility barrier.

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 dithered

2. The file is saved to .cursor/skills/dithered/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 interfaces with dithered surface textures, halftone-style color transitions, Open Sans + Space Grotesk typography, and clean 4px grid structure underneath.

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 Dithered guidelines — using dot patterns for surface treatments, solid color for text and borders, Space Grotesk for display headings, and the blue-violet palette applied through halftone techniques.

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

Dithered is the only typeui.sh design skill that changes how color is applied rather than which colors are used:

• Technique as identity — the same blue-violet palette used by several other skills becomes unrecognizable when applied through dither patterns. The visual identity comes from how color is rendered, not what color is chosen
• White as active color — the surface background participates in every dithered fill, creating perceived intermediate colors without additional tokens. A system of two colors produces dozens of visual shades
• Solid text guarantee — the skill explicitly prohibits dithering readable content. Dot patterns are for surfaces only, ensuring text remains crisp and accessible against any textured background
• Explicit state design — the only skill that requires dedicated designs for empty, loading, and error states, ensuring dithered textures are applied consistently in every UI moment
• Space Grotesk + print aesthetic — the display font's ink traps and quirky terminals echo the graphic-art quality of halftone reproduction, bridging digital type and print culture
• Perceived-color contrast testing — accessibility checks measure contrast against the perceived color of a dithered surface, not the individual dot color. This unique requirement ensures real-world readability
• Quality gates — every rule is anchored to a token or measurable threshold, keeping the textured output consistent whether the AI generates a single badge or an entire editorial platform