Retro design skill for AI agents

Overview

Retro is a handcrafted, nostalgic design system skill for AI-powered development. It uses Macondo — a decorative typeface with calligraphic flourishes and hand-drawn energy — to create interfaces that feel like they were lettered by hand on a vintage poster or a carnival sign. The high-contrast visual style pairs this ornate typography with clean structural elements, producing UI that's warm, characterful, and unmistakably analog in spirit.

When you add this skill file to your AI coding tool, every component it generates carries the personality of hand-lettered signage — headings that swirl with calligraphic curves, body text that reads like a lovingly typeset broadside, and a blue-violet palette that feels both classic and lively.

Design tokens

Color palette

Retro uses a blue-violet palette applied with high contrast against white surfaces — bold, saturated colors that reference the vivid inks of vintage poster printing:

The blue-violet palette is applied with high-contrast intent. Where Simple uses these same tokens quietly, Retro uses them boldly — larger color blocks, more saturated fills on interactive elements, and vivid accent moments that feel like ink freshly applied to paper. The AI agent treats color the way a letterpress printer would: committed, full-strength, no half measures.

Typography

Retro uses Macondo for all body and display text — a decorative typeface with calligraphic strokes, swashed terminals, and the organic irregularity of hand-lettering. This is the most ornate primary/body typeface of any typeui.sh design skill.

Macondo's character comes from its calligraphic DNA:

• Swashed letterforms — many characters feature extending strokes and decorative flourishes that give text a handwritten, artisanal quality
• Organic rhythm — unlike geometric fonts with uniform spacing, Macondo's letters flow into each other with the natural rhythm of a calligrapher's hand
• Desktop-first expressive scale — the type system is built for large screens where Macondo's decorative details have room to display at their best

While the skill lists weights from 100 to 900, Macondo's calligraphic nature means it renders most effectively at its designed weight. The AI agent builds hierarchy primarily through size and color, using the desktop-first expressive scale to create dramatic size contrasts between headings and body text. A large Macondo heading feels like a hand-painted shop sign; body text at 16px reads like a carefully typeset invitation.

JetBrains Mono handles monospaced content — code blocks, data tables, and technical contexts where Macondo's calligraphic flourishes would sacrifice legibility.

Spacing

A 4px base unit drives the spacing scale: 4 / 8 / 12 / 16 / 24 / 32. Ornate typography needs room to display its details. The AI agent uses generous spacing around Macondo headings so flourishes and swashes aren't clipped or crowded. Body text gets comfortable line-height to accommodate the calligraphic stroke variation. The 4px grid provides fine-grained control for balancing the organic feel of the typography against the structural discipline of the layout.

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

Retro is built on the idea that digital interfaces can carry the warmth and personality of handmade objects:

• Calligraphy as voice — Macondo doesn't just display text; it performs it. Every heading has the energy of a hand-lettered sign, every paragraph has the texture of typeset prose. The typeface itself is the personality of the entire system
• High-contrast application — the "high-contrast" visual style means bold color fills, strong text/background contrast, and vivid interactive elements. The AI agent applies the blue-violet palette at full strength — no muted tones, no subtle pastels, no fading into the background
• Organic meets structured — Macondo's calligraphic irregularity sits within a precise 4px grid. The tension between ornate type and disciplined spacing is what makes the design feel intentionally crafted rather than casually handwritten
• Analog warmth in digital space — the overall effect references the physical world of letterpress printing, hand-painted signs, and artisanal typography. The interface feels like it was made by a person with a pen, not a machine with a render pipeline
• Full-commitment typography — Macondo for everything, not just headings. Body text, labels, navigation, form fields — the calligraphic voice is consistent throughout, creating a unified personality that never breaks character

This makes Retro a strong fit for:

• Artisanal and craft brand websites
• Restaurant, bakery, and food & beverage menus
• Wedding and event invitation platforms
• Vintage and antique marketplace sites
• Independent bookshop and stationery brands
• Boutique hotel and travel experiences
• Hand-crafted product showcases
• Any product where warmth, personality, and analog charm define the brand

Accessibility

Retro enforces WCAG 2.2 AA compliance as a hard requirement. Handmade character and accessible design aren't opposites — the most memorable experiences are ones everyone can enjoy. 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 — bold enough to be visible alongside the decorative typography without disappearing into the ornate letterforms
• Maintain sufficient color contrast ratios, with the high-contrast visual style naturally providing strong text-to-background relationships
• Prioritize accessibility over aesthetics when the two conflict

Macondo's calligraphic strokes present a unique readability consideration: the decorative flourishes that give the font its charm can reduce reading speed at small sizes or in dense data contexts. The skill enforces minimum size thresholds for the calligraphic typeface and falls back to JetBrains Mono for technical content, data tables, and any context where clarity must override personality.

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 retro

2. The file is saved to .cursor/skills/retro/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 hand-lettered-feeling interfaces with Macondo calligraphic type, high-contrast blue-violet fills, and warm analog character throughout.

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 Retro guidelines — using Macondo's calligraphic voice everywhere, the high-contrast blue-violet palette at full strength, and structured 4px spacing that tames the ornate typography.

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

Retro is the only typeui.sh design skill that makes a calligraphic typeface the voice of the entire system:

• Macondo everywhere — the most ornate body typeface of any skill. Where Fantasy uses a blackletter display font and Friendly uses a serif, Retro uses a calligraphic display font for everything — body, headings, labels, navigation. Full commitment
• High-contrast color application — the same blue-violet tokens as Simple and others, but applied at maximum intensity. Bold fills, vivid accents, and strong contrasts that reference vintage poster printing
• Organic-meets-grid tension — the calligraphic irregularity of Macondo held within a strict 4px grid creates a distinctive visual tension no other skill produces. The interface feels hand-lettered but structurally precise
• Analog personality — the only skill that explicitly references physical craft traditions (letterpress, hand-painted signs, calligraphy) as its design lineage
• Calligraphic readability safeguards — minimum size thresholds and monospace fallbacks address the unique challenges of decorative swashes and flourishes at body text scales
• Quality gates — every rule is anchored to a token or measurable threshold, keeping the hand-crafted character consistent whether the AI generates a single menu or an entire artisanal brand experience