Energetic design skill for AI agents

Overview

Energetic is a vibrant, thick-bordered design system skill file that tells AI coding assistants to generate interfaces bursting with motion, color, and geometric confidence. Built around Limelight — a bold art deco display typeface — and anchored to a blazing orange palette with signature 4px borders, this skill produces UIs that feel like sport graphics, event posters, and fitness brand campaigns brought to the web.

Everything in the Energetic system is turned up. Borders are thick. Colors are saturated. Typography is heavy. Animations are snappy. This is a design system for products that need to radiate vitality: fitness platforms, sports apps, event ticketing, gaming sites, energy drink brands, startup launch pages, and any interface where the design itself needs to feel like it's in motion.

Design Tokens

Color Palette

Energetic lives entirely in the orange-amber spectrum — a monochromatic fire palette that radiates heat and urgency:

This is a fully orange system. There are no blues, greens, or neutrals in the core palette — every structural color sits on the warm spectrum from light peach to deep burnt orange. The result is an interface that feels like it's glowing. The standard semantic colors (success #16A34A, warning #D97706, danger #DC2626) appear only for system feedback states where functional color-coding is required.

Typography

Energetic uses Limelight as both the primary and display font at a single weight:

• Primary and display font: Limelight at weight 400 — a bold art deco display typeface with high stroke contrast, geometric forms, and theatrical presence. At its single available weight, Limelight is already visually heavy, making it a natural fit for the energetic aesthetic. Hierarchy is achieved through size and color rather than weight variation
• Monospace font: JetBrains Mono — used for code blocks, data values, and technical content

The type scale is expansive: 12 / 14 / 16 / 20 / 24 / 32 / 48px. The 48px ceiling gives headlines the room to shout — Limelight at large sizes creates the visual impact of event posters and athletic branding. The seven-step scale with its wide range enables dramatic size contrasts between hero headings and body text, reinforcing the energetic visual hierarchy.

Because Limelight is available at a single weight, the skill file relies on scale contrast, color shifts (deep orange vs. amber vs. peach), and the signature thick borders to create typographic hierarchy without weight variation.

Spacing

Energetic uses an extended spacing scale: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64px. The scale reaches up to 64px — unusually generous — to accommodate the bold visual elements that need room to breathe:

• Thick 4px borders add visual bulk to every element, requiring more internal padding to prevent crowding
• Large display type needs proportionally generous surrounding space
• The 48px and 64px steps create dramatic section breaks that match the high-energy visual rhythm
• Tighter values (4–12px) handle internal component spacing where elements need to feel dense and compact

The spacing scale mirrors the design philosophy: everything is either tight and punchy (4–12px within components) or wide and dramatic (32–64px between sections). There is no middle-ground timidity.

Borders

The 4px thick border is the signature visual element of the Energetic system:

• All structural containers (cards, panels, sections) use 4px solid borders
• Interactive elements (buttons, inputs, selects) use 4px borders that make them feel chunky and confident
• Borders use the primary or text orange colors for maximum contrast against surface backgrounds
• Thin or delicate borders (1px, hairline) are explicitly prohibited — they undermine the bold energy of the system
• Border radius is kept minimal to preserve the geometric sharpness that complements the thick strokes

The thick borders create a visual language of containment and structure that evokes sports graphics, trading cards, and poster design — every element looks like it was stamped onto the page with intention.

Motion and Interaction

Energetic has a distinct motion philosophy that matches its visual intensity:

• Snappy, spring-based animations — hover states, transitions, and feedback use quick, bouncy spring curves rather than smooth easing. Elements should feel like they have physical weight and snap into position
• Scale and transform — hover and active states use scale transforms (scale up on hover, scale down on press) rather than color-only changes, creating a tactile, physical interaction feel
• No slow fades — subtle, slow transitions are prohibited. Every animation should feel decisive and energetic
• Respect reduced motion — despite the emphasis on snappy animation, all motion must respect prefers-reduced-motion with immediate, non-animated fallbacks

Component Coverage

Energetic includes guidance for over 40 component families, each built with thick borders, bold orange surfaces, and snappy interaction states:

• Inputs and forms — chunky 4px-bordered buttons, bold text inputs, selects, checkboxes, radios, switches, textareas, date/time pickers, file uploaders
• Data display — thick-bordered cards, bold tables, data lists, data grids, charts, stats/metrics, badges, avatars
• Navigation — breadcrumbs, pagination, steppers, sidebars, top bars, tabs, command palette
• Overlays and feedback — modals, drawers, tooltips, popovers, alerts, toasts, notifications, progress indicators, skeletons
• Page-level patterns — search, empty states, onboarding, authentication screens, settings pages, documentation layouts, pricing blocks

Each component defines required states (default, hover, focus-visible, active, disabled, loading, error) with explicit scale/transform animations for interactive states. The writing tone within components is punchy, dynamic, and motivating — button labels, empty states, and onboarding copy all carry the same energy as the visuals.

Accessibility

Energetic enforces WCAG 2.2 AA compliance, and the bold visual style naturally supports several accessibility goals:

• High contrast by default — the thick 4px borders and saturated orange palette create naturally prominent interactive boundaries. Users never have to guess where one element ends and another begins
• Visible focus states — keyboard focus indicators use thick outlines that match the 4px border weight, making them impossible to miss against the warm backgrounds
• Keyboard-first interactions on every interactive element
• Semantic HTML and proper ARIA attributes throughout
• Orange-on-orange contrast — the monochromatic palette requires careful attention to text-on-surface contrast. The skill file provides verified combinations (e.g., #EA580C text on #FFEDD5 background) and flags pairings that fail AA thresholds
• Reduced-motion fallbacks — all spring-based animations degrade to instant state changes when prefers-reduced-motion is active

The energetic aesthetic actually aids accessibility in many cases — thick borders are easier to perceive, large type is easier to read, and snappy animations provide clear feedback. When the bold style does conflict with accessibility (typically in orange-on-orange text contrast), the skill file always prioritizes readability.

How to Use with AI Tools

Cursor and Claude

1. Pull the skill file into your project:

npx typeui.sh pull energetic

2. The skill file saves as a SKILL.md in your project. Cursor automatically detects skill files and uses them as context during code generation.

3. Start prompting — ask Cursor to build landing pages, event sites, or fitness dashboards, and the output will follow the Energetic system's thick borders, orange palette, Limelight typography, and snappy animations.

Claude (Anthropic)

Use Energetic directly with Claude by adding the skill file as context:

1. Copy or download the skill file from the design skill page
2. Paste it at the start of a Claude conversation, or add it to a Claude Project as project knowledge
3. Prompt Claude to generate UI code — it will produce bold, thick-bordered, orange-driven interfaces with spring-based interaction states

Other AI Tools

The skill file is standard markdown compatible with any AI assistant that accepts context or system instructions:

• ChatGPT — paste into Custom Instructions or at the start of a conversation
• Windsurf / Codeium — place the file in your project directory
• GitHub Copilot — add to your repository's context or instruction files
• v0 by Vercel — paste the design tokens, border rules, and motion guidelines as prompt context

Design Philosophy

Energetic is built on the principle that design should feel like action. The skill file follows three rules:

1. Nothing is subtle — every visual choice is cranked up. Borders are 4px, not 1px. Type goes to 48px, not 32px. Spacing reaches 64px. The system doesn't whisper — it projects
2. Monochromatic fire — by staying fully within the orange spectrum for all structural colors, the interface achieves a thermal intensity that multi-hue palettes dilute. The all-orange approach is what makes the system feel truly energetic rather than just colorful
3. Motion is personality — the snappy, spring-based animations aren't decoration. They're part of the brand. Every hover, every click, every transition communicates vitality and responsiveness. The interface feels alive because it moves like it's alive