Impeccable design skill for AI agents

Overview

Impeccable is a modern, graphic, editorial-poster design system skill file that instructs AI coding assistants to generate interfaces that feel warm, confident, structured, and visually memorable. Its aesthetic is built on bold section contrast, amber brand accents, burnt orange editorial blocks, and crisp typography set in Chakra Petch.

Where many modern systems lean into soft gradients, muted neutrals, rounded cards, and quiet SaaS minimalism, Impeccable is more poster-like. It uses strong blocks of color, clean geometry, confident spacing, and high-contrast typography to create interfaces that feel designed rather than merely assembled.

When you feed this skill file to an AI assistant, every generated component — buttons, cards, navigation, pricing sections, forms, modals, dashboards, landing pages — should inherit the Impeccable attitude: warm cream foundations, burnt orange sectioning, amber highlights, sharp typographic rhythm, and direct interaction states.

The result is a UI system that feels polished, editorial, optimistic, and assertive without becoming chaotic or overdecorated.

Design Tokens

Color Palette

Impeccable uses a warm, high-contrast palette centered on amber and burnt orange. The system should feel energetic but controlled. Color is a structural tool, not a decorative afterthought.

The visual backbone of Impeccable is the relationship between cream-like light sections, burnt orange editorial sections, and the amber primary brand color. The interface should alternate between light, breathable areas and warmer, heavier color-blocked sections.

The amber primary color #CC8800 should be used with intent. It is strong enough to signal brand identity, but it should not be scattered randomly across every icon, border, and badge. Use it for primary CTAs, selected states, active navigation, important highlights, and small editorial accents.

The burnt orange secondary color #C55221 is the system’s most graphic color. It should appear in larger section blocks, poster-like feature bands, hero areas, callouts, and strong background treatments. Because it carries significant visual weight, it should usually be paired with simple typography and restrained decoration.

Cream and Warm Surface Strategy

Although the base surface token is #FFFFFF, Impeccable should avoid feeling cold or sterile. The brand direction calls for alternating cream and burnt orange sections, so implementations should define a warm cream semantic surface when possible.

Recommended semantic surface roles:

If a project only supports the provided tokens, use surface for utility containers and reserve secondary for strong section contrast. Do not use raw one-off cream values throughout the codebase. Add a semantic token instead.

Color Usage Principles

Impeccable color usage should follow three rules:

1. Amber leads actions — primary buttons, active links, and selected states should use primary.
2. Burnt orange builds structure — large editorial bands, hero sections, and feature blocks should use secondary.
3. Semantic colors remain semantic — success, warning, and danger should only communicate state.

Avoid treating the palette as a loose set of decorative colors. Impeccable should feel designed around a clear poster composition, not sprinkled with warm tones.

Typography

Impeccable uses Chakra Petch for both primary and display typography. This gives the system a distinctive, squared, technical-editorial personality. The typeface feels modern and graphic, which pairs well with the poster-like section structure.

Font Families

Chakra Petch should be used confidently. Its geometric shape gives headings and labels a strong visual identity even before color is applied. This means the system does not need excessive decoration to feel branded.

JetBrains Mono should be reserved for technical content and structured data. Do not use monospace as a decorative alternative to Chakra Petch unless the component is explicitly technical.

Type Scale

Impeccable uses a compact but expressive type scale:

Because Chakra Petch has a distinctive shape, large text can become visually loud quickly. Use 32px for true display moments rather than every heading. The best Impeccable layouts combine a few bold display moments with disciplined body typography.

Weight

The font supports weights from 100 through 900, but the system should use weight intentionally:

• 400 for body text and standard interface copy
• 500 for buttons, labels, navigation, and compact emphasis
• 600 for card titles and section headings
• 700 for hero headings, key metrics, and poster-like statements
• 800–900 only for highly intentional display moments

Avoid mixing too many weights in one component. Impeccable should feel bold and clean, not typographically noisy.

Spacing

Impeccable uses a 4px-based spacing scale:

Spacing is essential to the Impeccable look because the palette is warm and visually strong. Without consistent spacing, burnt orange and amber sections can feel heavy or crowded.

Use larger spacing around high-impact color blocks. A burnt orange section should have enough internal padding to feel like an editorial poster panel, not a cramped alert box.

The Impeccable Look

Impeccable has a distinctive visual character that goes beyond tokens. It should feel like a modern editorial poster adapted into a practical digital product system.

Editorial Poster Composition

Layouts should use confident blocks, clear sections, strong alignment, and obvious hierarchy. Impeccable pages should feel composed, with each section having a clear visual role.

Good Impeccable layouts often include:

• Alternating light and burnt orange sections
• Large, direct headings
• Strong CTA placement
• Clean two-column feature layouts
• Full-width editorial bands
• Graphic card grids
• High-contrast content blocks

Avoid overly delicate layouts where every element floats independently. Impeccable works best when the page has a strong sectional rhythm.

Warm Confidence

The brand should feel warm, not aggressive. Amber and burnt orange create energy, but the interface should remain helpful and professional.

Use warm color to communicate:

• Momentum
• Confidence
• Clarity
• Brand presence
• Editorial impact

Do not use warm color to overwhelm the user. A page filled with competing amber buttons, orange cards, and warning-colored badges will lose the refined quality that makes the system feel impeccable.

Clean Graphic Geometry

Impeccable should use clean, modern shapes. Components may have modest radius if the product needs a softer feel, but the overall impression should remain graphic and crisp.

Recommended geometry:

• Rectangular section blocks
• Clean card grids
• Simple borders
• Flat color fills
• Strong alignment
• Minimal decorative effects

Avoid:

• Excessive pill shapes
• Glassmorphism
• Heavy blur effects
• Complex gradients
• Overly soft shadows
• Decorative blobs that weaken the poster composition

Color-Blocked Rhythm

The strongest Impeccable pages alternate between calm and impact:

1. A light cream or white section introduces content.
2. A burnt orange section creates a visual beat.
3. Amber CTAs guide action.
4. Neutral content areas restore clarity.
5. Another bold section re-establishes brand presence.

This alternating rhythm prevents the design from becoming monotonous while keeping the visual system coherent.

Amber as the Brand Signal

The amber primary color should be recognizable across the product. It is the recurring signal that ties the interface together.

Use amber for:

• Primary buttons
• Active navigation
• Selected tabs
• Highlighted metrics
• Editorial rules or dividers
• Small brand marks
• Key inline emphasis

Do not use amber for every border, icon, tag, and decorative mark. The more selectively amber is used, the more premium and confident it feels.

Component Coverage

The Impeccable skill file should guide complete interface generation across component families. Every component should express the system’s warm, graphic, high-contrast style while remaining practical and accessible.

Buttons

Buttons should feel confident and direct. Primary buttons should use the amber brand color and clear, action-oriented labels.

Button rules:

• Primary buttons should use primary as the main fill or dominant accent.
• Secondary buttons should use neutral surfaces with text or border emphasis.
• Tertiary buttons should be text-first and rely on underline, weight, or subtle background change.
• Destructive buttons must use danger only for destructive actions.
• Loading buttons must preserve width to avoid layout shift.
• Disabled buttons must remain visually identifiable but clearly inactive.
• Focus-visible states must be obvious and high contrast.

Primary button examples:

Avoid vague button labels like Submit, Click here, or Go.

Cards

Cards should feel like modular poster panels. They may be light cards on cream backgrounds, white cards on burnt orange sections, or amber-highlighted feature cards.

Card rules:

• Use clear heading hierarchy.
• Keep card padding on the spacing scale.
• Avoid excessive shadows.
• Use borders or background contrast for separation.
• Keep accent color purposeful.
• Ensure cards in a grid have consistent internal alignment.
• Long titles must wrap without breaking layout.
• Empty card states must include useful explanatory copy.

Card variants:

Forms

Forms should be clean, structured, and easy to scan. The strong visual personality should not interfere with input clarity.

Form rules:

• Labels must always be visible.
• Placeholder text must not replace labels.
• Inputs should use 16px text for readability.
• Field groups should use spacing tokens consistently.
• Error states must include text, visual styling, and programmatic association.
• Required fields should be indicated through text or accessible markup.
• Focus-visible states must be clear for keyboard users.
• Long labels and helper text must wrap cleanly.
• Validation should not rely on color alone.

Form layouts should feel orderly and editorial. Group related fields with clear headings and spacing rather than decorative separators.

Navigation

Navigation should be confident, compact, and easy to scan. Active states should be obvious but not overly decorative.

Navigation rules:

• Use Chakra Petch at 14px or 16px depending on density.
• Use primary for active or selected states.
• Use weight, underline, border, or background change to reinforce active state.
• Do not rely on color alone.
• Keep spacing consistent across navigation items.
• Ensure keyboard navigation order matches visual order.
• Provide visible focus states for all links and controls.
• Collapse responsibly on smaller screens.

Navigation should support the poster rhythm of the page without competing with hero content or CTAs.

Hero Sections

Hero sections are one of the strongest expressions of the Impeccable system. They should feel graphic, warm, and direct.

Hero rules:

• Use a clear headline at 32px or larger only when the implementation supports responsive scaling.
• Pair strong headings with concise supporting copy.
• Use amber for the primary CTA.
• Use burnt orange for a bold background section when contrast is sufficient.
• Avoid decorative clutter.
• Keep the call to action visible above the fold where appropriate.
• Ensure text contrast meets WCAG AA.

Hero layouts may use split compositions, full-width color bands, large typographic statements, or centered editorial structures.

Pricing and Marketing Sections

Impeccable works especially well for marketing pages, pricing pages, and conversion-focused layouts.

Pricing rules:

• Use strong card hierarchy to identify the recommended plan.
• Use primary for the main conversion action.
• Use secondary for section backgrounds or plan emphasis, not for every price detail.
• Keep feature lists readable and aligned.
• Use concise plan names.
• Avoid low-contrast fine print.
• Ensure comparison tables work on small screens.

Recommended plan badges should use amber or strong text treatment, but they must remain accessible and not rely on color alone.

Tables and Data

Tables should be clear, compact, and structured. Impeccable’s graphic quality should not make data harder to read.

Table rules:

• Use 14px or 16px text depending on density.
• Use JetBrains Mono for technical values when useful.
• Keep header rows visually distinct.
• Use subtle row separation or background contrast.
• Align numbers consistently.
• Use semantic colors only for real status meaning.
• Do not over-color every row or cell.
• Preserve readability on small screens through wrapping, horizontal scroll, or responsive cards.

Data displays should feel modern and sharp, not spreadsheet-heavy.

Alerts and Feedback

Alerts should be direct, readable, and semantic. Because amber and burnt orange are core brand colors, warning states must be visually distinguishable from brand styling.

Alert rules:

• Use success, warning, and danger only for state feedback.
• Include a clear title or message.
• Do not rely on color alone.
• Provide recovery actions when useful.
• Keep alert copy specific.
• Avoid playful or vague error language.
• Ensure dismissible alerts are keyboard accessible.

Example alert copy:

Modals and Overlays

Modals and overlays should be structured, clear, and focused. They should not feel like decorative interruptions.

Overlay rules:

• Use a clear title.
• Keep actions grouped and ordered predictably.
• Use amber for the primary action unless the action is destructive.
• Use danger styling for destructive confirmations.
• Trap focus inside modal dialogs.
• Close on Escape unless the action is critical and requires explicit confirmation.
• Return focus to the triggering element after close.
• Avoid large decorative illustrations unless they directly support comprehension.

Modals should feel like sharp editorial panels layered over the product, not floating glass cards.

Accessibility

Impeccable enforces WCAG 2.2 AA as a baseline. The system’s warm palette and strong section contrast can create excellent hierarchy, but it also creates specific risks. Amber, orange, and warning colors can become visually similar if not handled carefully.

Core Accessibility Requirements

• Text must meet WCAG 2.2 AA contrast against its background.
• Every interactive component must have a visible focus-visible state.
• Keyboard users must be able to reach and operate all controls.
• Color must never be the only indicator of state.
• Semantic HTML must be used before ARIA.
• Form errors must be visually and programmatically connected to fields.
• Touch targets should be large enough for comfortable interaction.
• Reduced-motion preferences must be respected.
• Disabled controls must be distinguishable from active controls without becoming unreadable.

Contrast Requirements

Because Impeccable uses warm saturated colors, contrast must be checked carefully.

Important contrast rules:

• Text on primary amber must be tested before using white text.
• Text on secondary burnt orange must meet AA contrast.
• Warning states must not be confused with brand amber.
• Small text should avoid sitting directly on saturated orange unless contrast is verified.
• Large burnt orange sections should use high-contrast text and generous spacing.

Do not assume that warm color automatically works with white text. When contrast fails, use dark text, adjust the surface, or introduce a compliant semantic token.

Focus States

Focus states should be visible, graphic, and consistent.

Preferred focus treatments:

• High-contrast outline
• Offset outline with sufficient contrast
• Underline plus outline for links
• Border-weight change for inputs
• Clear background shift for active navigation

Avoid faint amber glows or subtle low-contrast rings. Impeccable should be expressive, but keyboard focus must remain unmistakable.

Color and State Meaning

Because amber is both a brand color and visually close to warning colors, semantic states need additional cues.

For example:

• Warning alerts should include a warning icon or label.
• Error fields should include error text and aria-describedby.
• Success messages should include confirmation language.
• Selected states should include more than amber color, such as weight, border, underline, or iconography.

When the visual aesthetic conflicts with accessibility, accessibility wins.

Content and Tone

Impeccable uses a concise, confident, helpful writing tone. The copy should match the visual style: direct, warm, polished, and action-oriented.

Voice Principles

Impeccable copy should be:

• Confident
• Clear
• Warm
• Specific
• Action-oriented
• Easy to scan

It should not sound cold, robotic, overly playful, or inflated. The design can be bold, but the writing should remain practical.

Good Examples

Avoid

Every label should tell the user what will happen next. Avoid vague CTAs that rely on surrounding context to make sense.

How to Use with AI Tools

Cursor and Claude Code

Add the Impeccable skill file to your project so the assistant can use it as design-system context while generating UI code.

npx typeui.sh impeccable

The skill file should be saved as SKILL.md or another project-level instruction file. Once present, ask the assistant to generate components, layouts, pages, or refactors using the Impeccable design system.

Example prompts:

Create a landing page using the Impeccable design system.

Refactor this pricing section to use alternating cream and burnt orange sections.

Build a modal component with Impeccable tokens, interaction states, accessibility behavior, and QA notes.

Claude

Use the design skill directly in Claude by adding the markdown file as project knowledge or pasting it into the start of a conversation.

Then ask for implementation-specific output:

Generate a React button component that follows this Impeccable design system.

Create component rules for cards, forms, hero sections, and pricing tables using this skill.

Audit this UI against the Impeccable design rules and list required changes.

ChatGPT, Windsurf, Copilot, v0, and Other AI Tools

The file is standard markdown, so it can be used with any AI assistant that accepts project context or prompt instructions.

Useful workflows include:

• Paste the skill into the chat before requesting UI code.
• Add it to a repository-level instruction file.
• Use it as context for page generation.
• Use it to guide design-system component creation.
• Use it as a QA checklist during code review.
• Ask the assistant to migrate an existing neutral UI into the Impeccable editorial-poster aesthetic.

The best results come from asking for explicit implementation details: tokens, component states, accessibility criteria, responsive behavior, and anti-patterns.

Design Philosophy

Impeccable is governed by a few core principles.

1. Warmth With Authority

Impeccable should feel inviting without becoming soft. Amber and burnt orange create approachability, while clean geometry and strong typography create confidence.

2. Poster Logic, Product Discipline

The system borrows from editorial posters: bold sections, strong headings, and graphic color blocks. But it remains a product design system. Components must be reusable, accessible, responsive, and predictable.

3. Color Creates Rhythm

Color should structure the page. Burnt orange sections create visual beats. Cream sections create breathing room. Amber CTAs guide action. The palette should produce rhythm, not noise.

4. Typography Carries Personality

Chakra Petch gives the system its distinctive voice. Use it consistently and let its geometry do the work. Do not compensate with excessive decorative elements.

5. Bold Does Not Mean Busy

Impeccable is confident, not cluttered. Every strong color block, large heading, and accent treatment should have a clear role.

6. Accessibility Is Non-Negotiable

A warm, graphic aesthetic is only successful if it remains usable. Contrast, keyboard navigation, readable labels, and clear feedback must always take priority over visual novelty.

Anti-Patterns

Avoid these implementations when generating Impeccable-style interfaces:

• Random use of amber on every icon, border, and badge
• Burnt orange sections with low-contrast text
• Warning states that look identical to brand accents
• Pure white pages with no warm editorial rhythm
• Overuse of gradients, glows, glassmorphism, or decorative blur
• Excessive rounded pills that weaken the graphic poster feel
• Weak hierarchy caused by too many similar heading sizes
• Placeholder-only form labels
• Ambiguous button labels like Submit, Continue, or Click here
• Color-only selected, error, warning, or success states
• One-off spacing values outside the defined scale
• Overly playful copy that conflicts with the confident editorial tone
• Dense orange sections without enough padding
• Cards that rely only on soft shadows for separation
• Components missing hover, focus-visible, active, disabled, loading, or error states

Impeccable should feel warm and bold, but never noisy or careless.

Migration Notes

When adapting an existing interface to Impeccable, migrate in this order:

1. Replace raw colors with semantic tokens.
2. Establish the amber primary and burnt orange secondary roles.
3. Add warm cream or light editorial section surfaces through semantic tokens.
4. Convert generic layouts into clear alternating sections.
5. Replace vague typography with the Chakra Petch type scale.
6. Normalize spacing to the 4 / 8 / 12 / 16 / 24 / 32px scale.
7. Update buttons, navigation, forms, and cards to include explicit states.
8. Review all warm color combinations for contrast.
9. Replace ambiguous labels with specific action copy.
10. Run the QA checklist before shipping.

Do not migrate by simply changing every blue element to amber. Impeccable is a composition system, not just a palette swap.

QA Checklist

Use this checklist when reviewing generated UI against the Impeccable design skill.

Visual System

• The interface uses a warm, graphic, editorial-poster composition.
• Amber #CC8800 is used as the primary brand and action color.
• Burnt orange #C55221 is used for strong sections or supporting accents.
• Cream or light sections alternate with stronger warm color blocks.
• Color is used structurally, not randomly.
• The page does not feel like a generic white SaaS layout.
• Gradients, glows, glass effects, and decorative blur are avoided unless explicitly justified.
• Spacing gives strong color sections enough breathing room.

Typography

• Chakra Petch is used for primary and display typography.
• JetBrains Mono is reserved for code, metadata, and technical values.
• Type sizes come from the defined 12 / 14 / 16 / 20 / 24 / 32px scale.
• Font weights are used intentionally and consistently.
• Headings create clear hierarchy.
• Body text remains readable against all backgrounds.
• Long headings wrap cleanly without breaking layout.

Components

• Buttons use clear variants: primary, secondary, tertiary, destructive, disabled, and loading.
• Primary CTAs use amber intentionally.
• Cards feel like clean editorial panels.
• Forms use visible labels and accessible error messaging.
• Navigation includes clear active and focus states.
• Tables preserve readability and alignment.
• Alerts use semantic colors and additional non-color cues.
• Modals trap focus and return focus after closing.
• Empty states, loading states, and error states are explicitly designed.

Accessibility

• Text contrast meets WCAG 2.2 AA.
• Text on amber and burnt orange backgrounds has been tested.
• Keyboard navigation works across all interactive components.
• Focus-visible states are obvious.
• Color is never the only indicator of state.
• Error messages are linked to fields programmatically.
• Semantic HTML is used before ARIA.
• Touch targets are large enough for comfortable interaction.
• Reduced-motion preferences are respected.
• Disabled controls are clearly inactive but still understandable.

Content

• CTA labels are specific and action-oriented.
• Error messages explain what happened and how to recover.
• Empty states explain what is missing and what to do next.
• Destructive actions clearly state consequences.
• Tone remains concise, confident, warm, and helpful.
• Copy does not rely on vague labels like Submit, Click here, or Continue.

Impeccable is a disciplined design system for interfaces that should feel warm, graphic, confident, and polished. Its strength comes from editorial color rhythm, distinctive typography, and clear implementation rules.