Vibrant design skill for AI agents

Overview

The Vibrant design skill is a comprehensive, implementation-ready design system guideline built for AI agents. It encodes the entire visual identity, component specifications, and interaction standards of the Vibrant brand into a single SKILL.md file that any AI coding assistant can follow.

Vibrant brings a modern, clean, bold, and playful visual language to interfaces — pairing a rich purple primary with a warm peach secondary to create designs that feel expressive and inviting without sacrificing structure. Every rule in this skill file is anchored to a concrete token, threshold, or example — no ambiguous adjectives.

Style foundations

The Vibrant design system is built on a modern, clean, bold, and playful visual style with carefully defined foundations.

Typography

The system pairs Noto Sans as the primary body font with Fascinate for display and headings, creating a striking contrast between a highly readable body and a decorative, attention-grabbing headline voice. Fira Code is used for code and monospaced elements. The scale follows a progression of 14 / 16 / 18 / 24 / 32 / 40 pixels, and all nine font weights (100–900) are available for precise typographic control.

Color palette

The system uses semantic tokens across primary, secondary, neutral, and success palettes — so components reference tokens rather than raw hex values. The soft purple primary paired with a warm peach secondary on a white surface creates the signature Vibrant look: colorful, approachable, and full of personality.

Spacing

All spacing follows a 2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 pixel scale to maintain a consistent vertical and horizontal rhythm across every component. The extended range from 2px micro-spacing to 48px section spacing provides fine-grained control for both tight component internals and generous page-level breathing room.

Component families

The Vibrant skill covers a wide range of component families, organized into logical groups:

• Inputs and forms — buttons, inputs, textareas, selects/comboboxes, checkboxes, radios, switches, 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/headers, tabs, command palette
• Overlays — modals, drawers/sheets, tooltips, popovers/menus
• Feedback — alerts/toasts, notifications center, progress indicators, skeletons, empty states
• Pages — authentication screens, settings pages, onboarding, documentation layouts, pricing blocks, search
• Visualization — data visualization wrappers, carousels, accordions

Each component family includes defined states (default, hover, focus-visible, active, disabled, loading, error), interaction behavior for keyboard, pointer, and touch, explicit token usage, and responsive behavior with edge cases.

Accessibility

This skill targets WCAG 2.2 AA compliance with a thorough accessibility baseline:

• Keyboard-first interactions with visible focus states
• Screen-reader tested labels on all interactive elements
• Reduced-motion support for users who prefer less animation
• Minimum 44px touch targets for mobile interactions
• High-contrast mode support

When conflicts arise between aesthetics and accessibility, accessibility wins.

How to use this skill with AI agents

Pull the skill file into your project with a single command:

npx typeui.sh pull vibrant

This saves the SKILL.md file directly into your project. From there you can use it with any AI coding tool — Claude, ChatGPT, Cursor, Windsurf, Copilot, or any other agent that accepts context files, system prompts, or knowledge documents.

The file is standard markdown. Copy it into a project knowledge base, reference it as context in a prompt, upload it as a knowledge file, or drop it into a rules directory. The structured format ensures consistent results regardless of which AI platform you use.

Design principles

The Vibrant skill enforces three core rules:

1. Prefer semantic tokens over raw values — always reference design tokens instead of hardcoded colors, sizes, or spacing
2. Preserve visual hierarchy — maintain clear distinctions between headings, body text, and supporting elements
3. Keep interaction states explicit — every interactive element must define its full state set

And three strict anti-patterns to avoid:

1. No low contrast text — all text must meet WCAG AA contrast ratios
2. No inconsistent spacing rhythm — every measurement must align to the spacing scale
3. No ambiguous labels — interactive elements must have clear, descriptive labels

Writing tone

All content generated with this skill follows a concise, confident, and helpful tone. Labels are clear. Instructions are direct. There is no unnecessary jargon or decoration.