Fantasy design skill for AI agents

Overview

Fantasy is a bold, epic-scale design system skill for AI-powered development. It channels the visual language of legendary game worlds — royal blue and gold heraldry, blackletter-inspired display type, and a premium weight that makes every screen feel like an illuminated manuscript brought to life on a modern display. This is UI designed for adventures, quests, and worlds worth exploring.

When you add this skill file to your AI coding tool, every component it generates carries the gravitas of a fantasy epic — from buttons that feel like forged steel to cards that read like enchanted scrolls — while remaining fully functional, accessible, and production-ready.

Design tokens

Color palette

Fantasy builds on the most iconic color pairing in heraldic design — royal blue and gold. Together they signal nobility, power, and the kind of prestige that belongs on a coat of arms:

The blue + gold pairing carries centuries of visual meaning. Blue conveys depth, loyalty, and authority; gold conveys rarity, reward, and prestige. The AI agent uses primary blue for interactive elements and structural accents, and secondary gold sparingly — for highlights, achievement indicators, featured content, and moments that deserve to feel special. Gold's power comes from its scarcity in the layout.

Typography

Fantasy uses New Rocker for all body and display text — a blackletter-influenced display typeface with sharp terminals, angular strokes, and a gothic weight that immediately evokes medieval manuscripts, fantasy game titles, and epic storytelling.

The type scale uses six sizes tuned for dramatic presentations:

• 12px — Fine print, tertiary metadata, item stats
• 14px — Captions, helper text, secondary labels
• 16px — Body text (default)
• 20px — Large body, lead text, quest descriptions
• 24px — Section headings (h3)
• 32px — Page headings, hero text, chapter titles (h1/h2)

Font weights span 100 (thin) to 900 (black). New Rocker's angular, blackletter-derived forms gain dramatic presence at heavier weights — a 700+ heading in royal blue or gold looks like it was carved into stone or embossed on a shield. The skill file guides the AI to use heavy weights for display and headings, and moderate weights for body text where readability matters more than drama.

IBM Plex Mono handles monospaced content — code blocks, stat tables, inventory data, and technical contexts where New Rocker's ornate forms would sacrifice legibility. IBM Plex Mono's industrial clarity provides a grounding counterpoint to the fantasy aesthetic.

Spacing

Fantasy uses an 8pt baseline grid — every margin, padding, and gap aligns to multiples of 8px. The 8pt grid produces generous, stately layouts that match the premium weight of the visual identity. Fantasy interfaces need room to breathe — the ornate typography and rich colors require more whitespace than a minimal system to avoid feeling cluttered. The grid ensures the AI agent produces compositions that feel grand rather than cramped.

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

Fantasy is built on the idea that digital interfaces can carry the weight and wonder of epic world-building without sacrificing usability:

• Heraldic color system — blue and gold aren't just pretty together; they carry encoded meaning. Blue is structural and trustworthy (borders, actions, navigation). Gold is rare and valuable (achievements, featured content, premium indicators). The AI agent learns to deploy gold sparingly, so every golden moment feels earned
• Blackletter as voice — New Rocker's angular, gothic-inspired letterforms give the interface a narrative voice before a single word of content is read. The typeface signals "this is a world worth entering" at the same level that a game's title screen does
• Premium density — the 8pt grid creates spacious layouts where every element has breathing room. Fantasy interfaces should feel like walking through a cathedral, not squeezing through a corridor
• Ornate at scale, clear up close — display headings carry the full drama of the blackletter style, but body text and UI labels prioritize readability. The skill teaches the AI to modulate the ornamental intensity based on context
• Gold as reward currency — the secondary token functions like an in-game reward. The AI uses it for completion states, featured items, highlighted rows, and premium badges — never for mundane UI chrome

This makes Fantasy a strong fit for:

• Gaming platforms and companion apps
• RPG character builders and stat trackers
• Fantasy sports and league management tools
• Entertainment and streaming service interfaces
• Book and storytelling platforms
• Event and convention websites
• Tabletop gaming tools and campaign managers
• Any product where immersion and epic scale are part of the brand promise

Accessibility

Fantasy enforces WCAG 2.2 AA compliance as a hard requirement. Epic aesthetics and accessible interfaces aren't mutually exclusive — the greatest adventures are the ones everyone can join. 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 — the royal blue primary creates strong, visible focus rings against the white surface
• Maintain sufficient color contrast ratios, with particular attention to the gold secondary (#FDC800) against white surfaces where contrast can fall below AA thresholds without careful management
• Prioritize accessibility over aesthetics when the two conflict

New Rocker's ornate forms require special care at small sizes. The skill enforces minimum size thresholds for the display typeface and ensures the AI switches to clearer rendering for dense data contexts, helper text, and any content below 14px where blackletter readability degrades.

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 fantasy

2. The file is saved to .cursor/skills/fantasy/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 fantasy-themed interfaces with New Rocker typography, royal blue + gold heraldic palette, and stately 8pt grid layouts.

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 Fantasy guidelines — using the heraldic color system, blackletter-inspired type at dramatic weights, IBM Plex Mono for data contexts, and generous 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 Fantasy apart

Fantasy is the only typeui.sh design skill that builds a narrative world. Where other skills define a visual style, Fantasy defines an atmosphere:

• Heraldic color language — blue for authority, gold for reward. The dual-token system carries centuries of symbolic meaning that users intuitively understand
• Gold as reward currency — the secondary token isn't just an accent; it's a narrative device. Gold highlights what's valuable, achieved, or premium — giving the AI a built-in tool for communicating importance
• Blackletter display type — New Rocker is the most characterful typeface of any skill. Its gothic, angular forms make every heading feel like the title card of an epic
• IBM Plex Mono as grounding counterpoint — the industrial clarity of the monospace font balances New Rocker's ornamental intensity, keeping data-heavy contexts readable
• Ornate-to-clear modulation — the skill teaches the AI to dial up the fantasy drama for display elements and dial it down for body and UI text, maintaining immersion without sacrificing usability
• Quality gates — every rule is anchored to a token or measurable threshold, keeping the epic aesthetic consistent whether the AI generates a single achievement badge or an entire guild management dashboard