impeccable

name

impeccable

description

"Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers design systems, anti-pattern detection, brand vs product registers, typography, color (OKLCH), spacing, motion, copy, and accessibility. By Paul Bakaus (ex-Google, ex-Disney, ex-Unity). Full version includes 23 sub-commands, CLI detection, Chrome extension, and E2E test suite: npx skills add pbakaus/impeccable"

Impeccable (Lite)

Design and iterate production-grade frontend interfaces. This is a lite integration of Paul Bakaus's Impeccable design language for AI. For the full 23 sub-commands, CLI detection, Chrome extension, and E2E test suite, install: npx skills add pbakaus/impeccable

Quick Start (Lite mode)

Skip context gathering for rapid iteration. For full brand/product context, install the full version.

Shared Design Laws

Color

• Use OKLCH. Reduce chroma as lightness approaches 0 or 100. High chroma at extremes looks garish.
• Never #000 or #fff. Tint every neutral toward brand hue (chroma 0.005-0.01 is enough).
• Pick a color strategy:
  • Restrained: tinted neutrals + one accent ≤ 10%. Product default.
  • Committed: one saturated color carries 30-60%. Brand default.
  • Full palette: 3-4 deliberate roles. Brand campaigns.
  • Drenched: the surface IS the color. Brand heroes.

Dark vs Light

Never a default. Write one sentence of physical scene: who, where, under what light, in what mood. "SRE glancing at incident severity on a 27-inch monitor at 2am in a dim room" forces dark. "Editor reading a long-form article on an iPad in morning sunlight" forces light. Run the scene, not the category.

Typography

• Cap body line length at 65-75ch via max-width.
• Hierarchy through scale + weight contrast (≥1.25 ratio between steps).
• No Inter as display font.

Motion

• Don't animate layout properties (width, height, top, left).
• Ease out with exponential curves. No bounce, no elastic.
• UI durations < 300ms. Exit faster than enter.

Copy

• Every word earns its place. No restated headings.
• No em dashes. Use commas, colons, periods, or parentheses. Also no --.
• No AI filler: "elevate", "seamless", "unleash", "delve".

Absolute Bans

Match-and-refuse. If you're about to write any of these, rewrite with different structure.

Ban	Why
Side-stripe borders (border-left > 1px as accent)	The #1 AI-dashboard tell
Gradient text (background-clip: text + gradient)	Decorative, never meaningful
Glassmorphism as default	Rare and purposeful, or nothing
Hero-metric template	Big number + small label + gradient. SaaS cliché.
Identical card grids	Icon + heading + text, repeated. Lazy.
Modal as first thought	Exhaust inline/progressive alternatives first.

The AI Slop Test

If someone could look at this interface and say "AI made that" without doubt, it's failed.

First-order check: Can someone guess the theme from the category alone? "Observability → dark blue", "Healthcare → white + teal", "Crypto → neon on black" — these are training-data reflexes. Rework.

Second-order check: Can someone guess the aesthetic from category-plus-anti-references? "AI workflow that's not SaaS-cream → editorial-typographic". Still a reflex. Rework again.

Design Tokens (OKLCH)

--color-ink: oklch(10% 0 0);          /* Body copy, even for small text */
--color-charcoal: oklch(25% 0 0);      /* Headings, larger body */
--color-ash: oklch(55% 0 0);           /* Labels, captions, metadata */
--color-mist: oklch(92% 0 0);          /* Hairline borders, dividers */
--color-cream: oklch(96% 0.005 350);   /* Page background (tinted, never pure white) */

Anti-Pattern Detection (Lite)

The full Impeccable CLI detects 27 anti-patterns. Install for npx impeccable detect.

Quick manual checks:

• No border-left > 1px as colored accent on any element
• No gradient text anywhere
• No glass cards as default decoration
• No hero-metric template
• No identical card grids
• Cards not nested inside cards
• Body line length 65-75ch
• Body line-height 1.6
• No em dashes in copy

Pre-Flight Checklist

• Color strategy selected (Restrained / Committed / Full palette / Drenched)
• Dark vs light decided by physical scene, not category
• All colors in OKLCH
• No #000 or #fff — tint every neutral
• Body line length 65-75ch
• No absolute bans violated
• AI slop test passed (both first-order and second-order)
• No em dashes in copy
• prefers-reduced-motion respected

Sources

• Paul Bakaus — Impeccable (impeccable.style)
• OKLCH color space
• Stripe Design System
• Linear Design

Workflow

Step 1: Set the physical scene

Write one sentence describing who, where, under what light, in what mood. "SRE glancing at incident severity on a 27-inch monitor at 2am in a dim room" forces dark. "Editor reading long-form on an iPad in morning sunlight" forces light. This single sentence determines dark vs light, color intensity, and typographic density. Never skip this step or default to a mode without scene reasoning.

Step 2: Choose color strategy

Select one of four based on the scene and register:

• Restrained: tinted neutrals + one accent <= 10% of any surface. Default for Product (dashboards, admin, tools)
• Committed: one saturated color carrying 30-60% of visual weight. Default for Brand (landing pages, marketing)
• Full palette: 3-4 deliberate color roles with clear semantic mapping. Brand campaigns, data-heavy interfaces
• Drenched: the surface IS the dominant color. Brand hero sections, immersive experiences

Step 3: Audit against the absolute bans

Check every element against the 6 absolute bans: side-stripe borders, gradient text, default glassmorphism, hero-metric template, identical card grids, modal-as-first-thought. If any ban is violated, restructure the element — do not tweak. Bans require different structure, not subdued execution.

Step 4: Run the AI Slop Test

First-order: Can someone guess the visual theme from the category alone? "Observability → dark blue dashboard", "Healthcare → white + teal cards", "Crypto → neon-on-black" — these are training-data reflexes. If yes, rework from a different visual lane.

Second-order: Can someone guess the aesthetic from category plus anti-references? "AI workflow that is NOT SaaS-cream → editorial-typographic". Still a reflex. Rework again. A genuine design is harder to predict from metadata alone.

Step 5: Apply design tokens and refine copy

1. Replace all hex/rgb colors with OKLCH design tokens. Tint every neutral. Reduce chroma as lightness approaches 0 or 100
2. Copy audit: remove every em dash (—). Replace with commas, colons, periods, or parentheses
3. Remove AI filler: "elevate", "seamless", "unleash", "delve", "transformative"
4. Cap body line length at 65-75ch. Set line-height to 1.6

Step 6: Polish and verify

1. Motion check: compositor-only properties, durations < 300ms, no bounce, exit faster than enter
2. Body line length 65-75ch, line-height 1.6 on all text blocks
3. Every word earns its place — no restated headings, no filler
4. Run the Pre-Flight Checklist before delivery

Error Handling

Cause	Fix
OKLCH colors render as black/white in Safari < 15.4 or Firefox < 113	Always provide hex fallback before each OKLCH value: --color-ink: #1a1a1a; --color-ink: oklch(10% 0 0). Check caniuse for OKLCH support
Selected color strategy produces low contrast on key text surfaces	Test every text+background pair against WCAG AA (4.5:1 body, 3:1 large text). Shift lightness values until passing. Don't compromise on contrast for aesthetics
AI Slop Test keeps failing — design still reads as generic despite rework	Change the visual lane entirely. "SaaS modern" failing? Try "editorial magazine", "brutalist terminal", or "Swiss typography". The genre shift forces genuinely fresh decisions
Physical scene description is too vague to produce concrete design decisions	Add specifics: time of day, screen size, ambient light level, emotional state, session duration. "Day trader watching real-time data at 10am on dual monitors" is actionable
Dark mode palette shows an unintended blue cast instead of true dark	Add small chroma to the achromatic dark base: oklch(8% 0.02 260) instead of oklch(8% 0 0). Pure achromatic dark reads as lifeless and flat
An absolute ban collides with a legitimate design requirement (e.g., client requires a gradient hero)	If a ban must be broken, mitigate with subtle execution: low gradient opacity (0.1-0.2), solid foreground text, no text clipping. Document the exception
Copy still reads as AI-generated despite em dash and filler word removal	Check sentence rhythm: AI defaults to uniform sentence length. Vary: short punchy sentences. Followed by longer, more complex ones that breathe. Fragments when needed

Anti-Patterns

Pattern	Problem	Fix
Side-stripe borders (border-left > 1px as colored accent on cards/sidebars)	The #1 visual signature of AI-generated dashboards. Present in ~80% of LLM dashboard output. Instant tell	Use background tint shifts, hairline separators, or spacing hierarchy. If accent is essential, use top border or a small badge/glyph
Gradient text via background-clip: text combined with gradient fill	Decorative, never semantic. Fails WCAG contrast at gradient midpoint. Always reads as "designed by someone who just discovered CSS"	Use solid OKLCH colors with weight contrast and scale for hierarchy. Typography carries meaning — gradient undermines it
Glassmorphism (backdrop-filter: blur()) as default card/surface treatment	Poor readability. Low contrast. 2022 trend that now reads as dated. Adds visual noise without purpose	Use only when what's behind the glass IS the product (map underlay, data visualization). Otherwise: solid surfaces with slight tint shifts
Hero-metric template: big number + small ALL-CAPS label + gradient background	Cookie-cutter SaaS hero. Every AI output defaults to this pattern regardless of product	Lead with a claim, a story, or a distinctive visual. Metrics can go in a dedicated proof section with context, not the hero
Identical card grid: icon + heading + paragraph, repeated 3-6 times with equal sizing	Zero visual hierarchy. All content reads as equally important. User scans without engaging any card	Vary card sizes (2fr 1fr asymmetric). Break grid with full-width sections. Use lists or tables where cards aren't needed
Center-aligned hero, center-aligned CTA, center-aligned everything	Symmetry = safety. Safety = generic. No visual tension, no directional energy, no memorable composition	Left-align text. Place visuals right. Create deliberate asymmetry. The eye should move, not land in the center and stop
Em dashes (—) in UI copy and headings	The #1 LLM typographic tic. Used as universal separator when commas, colons, periods, or parentheses would be crisper	Ban em dashes. Use commas for lists, colons for label:value, periods to separate thoughts, parentheses for asides. Em dash only for genuine mid-sentence interruption
Defaulting to dark mode because "dark looks better" without physical scene reasoning	Dark mode has lower contrast in bright environments and causes eye strain for long-form reading. It's not universally superior	Write the physical scene. Let the scene dictate the mode. "Late night" = dark. "Morning sunlight" = light. Mode follows context, not preference
Modal dialogs as the first interaction pattern for any secondary action	Modal interrupts user flow, loses context, breaks mobile UX. Often used because it's the easiest pattern to implement	Exhaust inline alternatives first: expanding sections, slide-out panels, inline editing, progressive disclosure. Modal only when context loss is intentional
Brand colors applied to functional UI elements (buttons, inputs, toggles) at full saturation	Saturated colors on interactive elements vibrate against neutral backgrounds. Reduces usability and reads as "theme applied mechanically"	Desaturate interactive UI colors 15-25% from brand primaries. Reserve full brand saturation for decorative and brand-identity elements only
Pure black (#000) or pure white (#fff) anywhere in the palette	#000 doesn't exist in nature or on any physical display surface. #fff creates harsh contrast that fatigues. Both read as "default CSS"	Tint every neutral: add 0.005-0.01 chroma toward brand hue. Darkest color >= oklch(8% 0 0). Lightest <= oklch(97% 0 0)
Inter as a display/heading font	Inter is the default AI body font. Using it for headlines signals "didn't choose a font". Zero typographic identity	Pair a display font (serif or bold sans) with Inter as body only. Display font does the heavy lifting; Inter stays in its lane
Long-form body text with line-height below 1.5	Crowded, hard to track across line wraps. Readers lose their place. Especially punishing on mobile where lines wrap more	Minimum body line-height: 1.6. For dense data tables: 1.4. For headings: 1.1-1.2. Longer lines need more line-height
Using the same font weight for all heading levels	Flat hierarchy. Reader can't scan. Headings and body text run together visually	Minimum 1.25x weight contrast between heading levels. h1: 700-800, h2: 600-700, h3: 500-600. Scale + weight = hierarchy

Typography Pairing Quick Reference

Direction	Display	Body	Best for
Editorial luxury	Canela / DM Serif Display	DM Sans	Brand landing, long-form, portfolios
Bold tech	Cabinet Grotesk / Space Grotesk	Geist	Product pages, developer tools
Swiss modern	Neue Haas Grotesk	Inter	Dashboards, admin, data-heavy
Classic warm	Playfair Display / Cormorant Garamond	Charter / Georgia	Editorial, publishing, luxury
Punchy condensed	Bebas Neue / Anton	Geist / DM Sans	Hero headlines, campaign pages

Checklist

• Skill loads without errors in the AI agent
• YAML frontmatter is valid (description, compatibility, audience)
• Workflow section provides clear step-by-step instructions
• Error handling section covers common failure modes
• All referenced files (references/, scripts/, assets/) exist
• Skill triggers correctly for intended use cases
• No broken links or missing resources