Bold Designs Skill

Create bold, distinctive, production-grade frontend interfaces. This skill produces expressive, modern designs that look nothing like generic AI output.

---

When to Apply This Skill

Use this when:

• Building landing pages, marketing sites, or product interfaces
• Creating UI components (buttons, cards, heroes, navigation)
• Writing frontend code in React, Next.js, Vue, Svelte, or plain HTML/CSS
• Generating Tailwind CSS or vanilla CSS

---

⚠️ Project Styling Respect Rule

This skill provides PRINCIPLES and TACTICS, not specific styling.

When working in an existing project:

1. ALWAYS use the project's existing design system, colors, and tokens
2. ALWAYS match the project's existing spacing scale and typography
3. ALWAYS follow the project's component patterns and naming conventions
4. NEVER override existing Tailwind config, CSS variables, or theme settings
5. NEVER introduce new colors/fonts that conflict with the established palette

What this skill DOES provide:

• Anti-generic aesthetic principles (what to avoid, what makes designs feel templated)
• Accessibility requirements (APCA contrast, keyboard nav, ARIA)
• Animation performance rules (compositor properties, timing)
• Typography best practices (text-balance, text-pretty, hierarchy)
• Layout discipline (z-index scale, safe areas, optical alignment)
• Interaction patterns (focus-visible, touch targets, states)

What this skill does NOT impose:

• Specific color palettes (use the project's palette)
• Specific fonts (use the project's typography)
• Specific component library (adapt to project's stack)
• Specific spacing values (use the project's scale)

The color palettes and component examples below are reference examples only — use them for new/greenfield projects, or when no existing design system exists.

---

Design Philosophy

Core Principles

1. Bold over safe — Make visual choices that have a point of view. Boring is worse than slightly wrong.
2. Intentional over uniform — Every spacing, color, and size decision should serve a purpose.
3. Expressive over minimal — Users want personality, not sterile tech aesthetics.
4. Readable over clever — Visual interest must never sacrifice readability.
5. Native over custom — Use semantic HTML and CSS before JavaScript solutions.

Anti-Generic Rules

NEVER do these (they scream "AI generated"):

• Uniform padding/margins everywhere (8px everywhere = AI)
• Default blue buttons without context
• Overly rounded corners on everything (rounded-2xl on everything = AI)
• Generic gradients (blue-to-purple is the new clipart)
• Centered everything with identical spacing
• Stock "hero + 3 features + testimonials + CTA" layout
• Sans-serif body text with no typographic personality
• Identical card components repeated without variation

ALWAYS do these:

• Mix spacing intentionally (tight headlines, generous section breaks)
• Use asymmetry where it serves hierarchy
• Add one unexpected visual element per section
• Vary component sizes based on importance
• Use color strategically, not decoratively
• Create visual rhythm through contrast, not repetition

---

Visual Design System

Typography

Hierarchy (most important → least): | Level | Use | Size | Weight | Line Height | |-------|-----|------|--------|-------------| | Display | Hero headlines | 4xl-7xl | 700-900 | 1.0-1.1 | | H1 | Page titles | 3xl-5xl | 700-800 | 1.1-1.2 | | H2 | Section heads | 2xl-3xl | 600-700 | 1.2 | | H3 | Card titles | xl-2xl | 600 | 1.3 | | Body Large | Intro paragraphs | lg-xl | 400 | 1.6-1.7 | | Body | Default text | base | 400 | 1.6 | | Small | Captions, labels | sm | 500 | 1.4 |

Typography Rules:

• Apply text-balance to all headings
• Apply text-pretty to body paragraphs
• Use tabular-nums for any numerical data
• Use truncate or line-clamp for dense UI
• Never modify letter-spacing unless explicitly requested
• Font size ≥16px on mobile to prevent iOS auto-zoom
• Curly quotes (" ") not straight quotes (" ")
• Ellipsis character (…) not three periods (...)

Font Pairing Strategy:

• Headlines: Bold geometric sans (Inter, Satoshi, Plus Jakarta) or expressive display (Clash Display, Cabinet Grotesk)
• Body: Readable neutral sans (Inter, System UI) or humanist (Source Sans, Open Sans)
• Accent: Monospace for technical content, serif for editorial

Color Strategy

Palette Approach:

• Bold primaries as accents, not backgrounds
• High contrast text (APCA preferred over WCAG 2)
• One accent color per view maximum
• Neon/vibrant colors for CTAs and highlights
• Dark mode should feel native, not inverted

Contrast Requirements:

• Text on backgrounds: APCA Lc 75+ for body, Lc 60+ for large text
• Interactive states (hover/active/focus) must have HIGHER contrast than rest state
• Never rely on color alone — always include text labels or icons

Color Palette Examples:

/* Electric & Bold */
--primary: #7C3AED;      /* Vibrant purple */
--accent: #06B6D4;       /* Cyan pop */
--surface: #0F172A;      /* Deep slate */
--text: #F8FAFC;         /* Bright white */

/* Warm Energy */
--primary: #F97316;      /* Orange energy */
--accent: #FBBF24;       /* Golden highlight */
--surface: #1C1917;      /* Warm black */
--text: #FAFAF9;         /* Warm white */

/* Neo Brutalist */
--primary: #000000;      /* Pure black */
--accent: #CCFF00;       /* Acid green */
--surface: #FFFFFF;      /* Pure white */
--border: #000000;       /* Hard edges */

Spacing System

Use intentional, varied spacing:

| Token | Value | Use Case | |-------|-------|----------| | xs | 4px | Icon gaps, tight inline | | sm | 8px | Button padding, compact lists | | md | 16px | Default element spacing | | lg | 24px | Card padding, comfortable spacing | | xl | 32px | Section element gaps | | 2xl | 48px | Section padding | | 3xl | 64px | Major section breaks | | 4xl | 96px | Hero/footer margins |

Spacing Rules:

• Headlines: Tight line-height (1.0-1.2), generous margin-bottom
• Cards: Asymmetric padding (more bottom, less top creates visual lift)
• Sections: Large gaps between (3xl-4xl), tight within (md-lg)
• Never use identical spacing for everything

Layout Discipline

Grid & Alignment:

• Every element aligns intentionally to grid, baseline, edge, or center
• Use optical alignment (±1px adjustment) when perception beats geometry
• Implement fixed z-index scale (never arbitrary values like z-[9999])
• Use h-dvh instead of h-screen for full viewport
• Respect safe-area-inset for fixed positioning

Z-Index Scale:

--z-base: 0;
--z-dropdown: 100;
--z-sticky: 200;
--z-modal: 300;
--z-popover: 400;
--z-toast: 500;

Responsive Approach:

• Mobile-first breakpoints
• Touch targets: 44px minimum on mobile, 24px minimum on desktop
• Use size-* utilities for square elements (icons, avatars)
• Scrollbars: Only render necessary ones, fix overflow issues

---

Interaction Design

Animation Standards

Performance Rules:

• ONLY animate compositor properties: transform, opacity
• NEVER animate: width, height, top, left, margin, padding
• NEVER use transition: all — explicitly list properties
• Max 200ms for interaction feedback
• Use ease-out for entrances, ease-in for exits

Timing Functions:

--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

Motion Preferences:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Animation Use Cases:

• Hover states: subtle scale (1.02-1.05) or translateY (-2px)
• Page transitions: fade + slight translate
• Loading: skeleton shimmer, not spinners
• Micro-interactions: button press feedback, toggle switches

Interactive States

Every interactive element needs:

1. Rest — Default appearance
2. Hover — Visual change on mouse over
3. Focus — Keyboard navigation (use :focus-visible)
4. Active — During click/tap
5. Disabled — Reduced opacity + cursor-not-allowed

Focus Visibility:

/* Only show focus ring for keyboard users */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

Button Patterns

Primary CTA:

<button className="
  relative px-6 py-3
  bg-violet-600 text-white font-semibold
  rounded-lg
  transition-all duration-200
  hover:bg-violet-500 hover:-translate-y-0.5 hover:shadow-lg hover:shadow-violet-500/25
  active:translate-y-0 active:shadow-none
  focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-violet-500
">
  Get Started
</button>

Secondary/Ghost:

<button className="
  px-6 py-3
  border-2 border-slate-200 text-slate-900 font-medium
  rounded-lg
  transition-all duration-200
  hover:border-slate-900 hover:bg-slate-50
  focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-900
">
  Learn More
</button>

---

Accessibility Requirements

Non-Negotiable Checklist

Every component MUST:

• [ ] Have proper heading hierarchy (h1 → h2 → h3, no skips)
• [ ] Include alt text for all images
• [ ] Support full keyboard navigation
• [ ] Have sufficient color contrast (APCA Lc 75+ for body text)
• [ ] Use ARIA labels for icon-only buttons
• [ ] Have visible focus indicators
• [ ] Work without JavaScript where possible

HTML Semantics

<!-- CORRECT -->
<nav aria-label="Main navigation">
  <a href="/features">Features</a>
</nav>

<main>
  <article>
    <h1>Page Title</h1>
    <section aria-labelledby="features-heading">
      <h2 id="features-heading">Features</h2>
    </section>
  </article>
</main>

<!-- WRONG -->
<div class="nav">
  <div onclick="navigate()">Features</div>
</div>

Form Accessibility

// Every input needs a label
<label htmlFor="email" className="block text-sm font-medium text-slate-700">
  Email address
</label>
<input
  type="email"
  id="email"
  name="email"
  autoComplete="email"
  inputMode="email"
  placeholder="you@example.com"
  aria-describedby="email-error"
  className="mt-1 block w-full rounded-lg border-slate-300 shadow-sm focus:border-violet-500 focus:ring-violet-500"
/>
<p id="email-error" className="mt-1 text-sm text-red-600" role="alert">
  {error}
</p>

Icon Buttons

// Always include aria-label for icon-only buttons
<button
  aria-label="Close modal"
  className="p-2 rounded-lg hover:bg-slate-100"
>
  <XIcon className="h-5 w-5" aria-hidden="true" />
</button>

---

Component Patterns

Hero Sections (Bold, Not Generic)

Pattern 1: Asymmetric Split

<section className="relative min-h-[90vh] overflow-hidden bg-slate-950">
  {/* Dramatic gradient blob */}
  <div className="absolute -right-1/4 top-1/4 h-[600px] w-[600px] rounded-full bg-violet-500/30 blur-[128px]" />

  <div className="relative mx-auto max-w-7xl px-6 py-24 lg:flex lg:items-center lg:gap-x-16 lg:py-40">
    {/* Content - takes 60% */}
    <div className="max-w-2xl lg:flex-auto">
      <p className="text-sm font-semibold uppercase tracking-widest text-violet-400">
        New Feature
      </p>

      <h1 className="mt-4 text-5xl font-bold tracking-tight text-white sm:text-7xl" style={{ textWrap: 'balance' }}>
        Design that actually
        <span className="block text-violet-400">stands out</span>
      </h1>

      <p className="mt-6 max-w-xl text-lg leading-relaxed text-slate-400" style={{ textWrap: 'pretty' }}>
        Stop shipping interfaces that look like every other AI-generated page.
        Create something memorable.
      </p>

      <div className="mt-10 flex flex-wrap gap-4">
        <a href="#" className="inline-flex items-center gap-2 rounded-full bg-violet-500 px-6 py-3 font-semibold text-white transition hover:bg-violet-400">
          Start building
          <ArrowRightIcon className="h-4 w-4" />
        </a>
        <a href="#" className="inline-flex items-center gap-2 rounded-full border-2 border-slate-700 px-6 py-3 font-semibold text-white transition hover:border-slate-500">
          View examples
        </a>
      </div>
    </div>

    {/* Visual - asymmetric, not centered */}
    <div className="mt-16 hidden lg:mt-0 lg:block lg:flex-shrink-0">
      <div className="relative">
        {/* Main visual with offset shadow/accent */}
        <div className="absolute -inset-4 rounded-2xl bg-gradient-to-r from-violet-500 to-cyan-500 opacity-20 blur-xl" />
        <img
          src="/hero-visual.png"
          alt="Product screenshot showing the dashboard interface"
          className="relative rounded-2xl shadow-2xl"
          width={600}
          height={400}
        />
      </div>
    </div>
  </div>
</section>

Pattern 2: Full-Bleed Statement

<section className="relative flex min-h-screen items-center justify-center overflow-hidden bg-black px-6">
  {/* Animated gradient background */}
  <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-violet-900/40 via-black to-black" />

  <div className="relative max-w-4xl text-center">
    <h1 className="text-6xl font-black tracking-tight text-white sm:text-8xl lg:text-9xl">
      <span className="bg-gradient-to-r from-violet-400 via-pink-400 to-orange-400 bg-clip-text text-transparent">
        Create.
      </span>
    </h1>

    <p className="mx-auto mt-8 max-w-2xl text-xl text-slate-400">
      The only design tool that doesn't make everything look the same.
    </p>

    <div className="mt-12">
      <a href="#" className="group inline-flex items-center gap-3 text-lg font-semibold text-white">
        Start free
        <span className="inline-flex h-10 w-10 items-center justify-center rounded-full bg-white/10 transition group-hover:bg-white/20">
          <ArrowRightIcon className="h-5 w-5" />
        </span>
      </a>
    </div>
  </div>
</section>

Feature Sections

Pattern: Bento Grid (varied sizes)

<section className="bg-slate-50 py-24">
  <div className="mx-auto max-w-7xl px-6">
    <h2 className="text-3xl font-bold text-slate-900">Everything you need</h2>

    <div className="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
      {/* Large featured card - spans 2 cols */}
      <div className="relative overflow-hidden rounded-3xl bg-gradient-to-br from-violet-500 to-purple-600 p-8 text-white sm:col-span-2 lg:row-span-2">
        <div className="relative z-10">
          <span className="inline-block rounded-full bg-white/20 px-3 py-1 text-sm font-medium">
            Featured
          </span>
          <h3 className="mt-4 text-2xl font-bold">AI-Powered Design</h3>
          <p className="mt-2 max-w-md text-violet-100">
            Generate layouts, color schemes, and components with natural language.
          </p>
        </div>
        <div className="absolute -bottom-8 -right-8 h-64 w-64 rounded-full bg-white/10" />
      </div>

      {/* Regular cards */}
      <div className="rounded-3xl bg-white p-6 shadow-sm ring-1 ring-slate-200">
        <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-orange-100 text-orange-600">
          <ZapIcon className="h-6 w-6" />
        </div>
        <h3 className="mt-4 text-lg font-semibold text-slate-900">Lightning Fast</h3>
        <p className="mt-2 text-sm text-slate-600">
          Build in minutes, not hours. Our components are optimized for speed.
        </p>
      </div>

      <div className="rounded-3xl bg-slate-900 p-6 text-white">
        <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-cyan-500/20 text-cyan-400">
          <CodeIcon className="h-6 w-6" />
        </div>
        <h3 className="mt-4 text-lg font-semibold">Developer First</h3>
        <p className="mt-2 text-sm text-slate-400">
          Clean, semantic code that your team will actually want to maintain.
        </p>
      </div>

      {/* Horizontal card */}
      <div className="flex items-center gap-6 rounded-3xl bg-white p-6 shadow-sm ring-1 ring-slate-200 sm:col-span-2 lg:col-span-1">
        <div className="flex h-16 w-16 flex-shrink-0 items-center justify-center rounded-2xl bg-emerald-100 text-emerald-600">
          <ShieldCheckIcon className="h-8 w-8" />
        </div>
        <div>
          <h3 className="font-semibold text-slate-900">Accessible by Default</h3>
          <p className="mt-1 text-sm text-slate-600">
            WCAG AA compliant out of the box.
          </p>
        </div>
      </div>
    </div>
  </div>
</section>

Cards (Varied, Not Identical)

{/* Mix card styles for visual interest */}
<div className="grid gap-6 md:grid-cols-3">
  {/* Style 1: Clean with accent border */}
  <article className="rounded-2xl border-l-4 border-violet-500 bg-white p-6 shadow-sm">
    <time className="text-sm text-slate-500">Mar 15, 2024</time>
    <h3 className="mt-2 text-lg font-semibold text-slate-900">
      Design Systems at Scale
    </h3>
    <p className="mt-2 text-slate-600">
      How we maintain consistency across 50+ products.
    </p>
  </article>

  {/* Style 2: Dark with gradient */}
  <article className="rounded-2xl bg-gradient-to-br from-slate-800 to-slate-900 p-6 text-white">
    <span className="text-xs font-semibold uppercase tracking-wider text-violet-400">
      Case Study
    </span>
    <h3 className="mt-2 text-lg font-semibold">
      Redesigning for Gen Z
    </h3>
    <p className="mt-2 text-slate-400">
      Bold colors, authentic voice, instant engagement.
    </p>
  </article>

  {/* Style 3: Image-forward */}
  <article className="group overflow-hidden rounded-2xl bg-white shadow-sm ring-1 ring-slate-200">
    <div className="aspect-video overflow-hidden bg-slate-100">
      <img
        src="/thumbnail.jpg"
        alt=""
        className="h-full w-full object-cover transition duration-300 group-hover:scale-105"
      />
    </div>
    <div className="p-6">
      <h3 className="font-semibold text-slate-900 group-hover:text-violet-600 transition">
        Motion Design Principles
      </h3>
    </div>
  </article>
</div>

Navigation

<header className="fixed inset-x-0 top-0 z-50 backdrop-blur-md">
  <nav className="mx-auto flex max-w-7xl items-center justify-between px-6 py-4" aria-label="Main navigation">
    {/* Logo */}
    <a href="/" className="flex items-center gap-2">
      <span className="text-xl font-bold text-slate-900">Brand</span>
    </a>

    {/* Desktop nav */}
    <div className="hidden items-center gap-8 md:flex">
      <a href="/features" className="text-sm font-medium text-slate-600 transition hover:text-slate-900">
        Features
      </a>
      <a href="/pricing" className="text-sm font-medium text-slate-600 transition hover:text-slate-900">
        Pricing
      </a>
      <a href="/docs" className="text-sm font-medium text-slate-600 transition hover:text-slate-900">
        Docs
      </a>
    </div>

    {/* CTA */}
    <div className="flex items-center gap-4">
      <a href="/login" className="hidden text-sm font-medium text-slate-600 transition hover:text-slate-900 sm:block">
        Sign in
      </a>
      <a
        href="/signup"
        className="rounded-full bg-slate-900 px-4 py-2 text-sm font-semibold text-white transition hover:bg-slate-700"
      >
        Get Started
      </a>
    </div>

    {/* Mobile menu button */}
    <button
      type="button"
      aria-label="Open menu"
      aria-expanded="false"
      className="rounded-lg p-2 text-slate-600 hover:bg-slate-100 md:hidden"
    >
      <MenuIcon className="h-6 w-6" aria-hidden="true" />
    </button>
  </nav>
</header>

---

Loading States

Use skeletons, not spinners:

{/* Skeleton for card */}
<div className="animate-pulse rounded-2xl bg-white p-6 shadow-sm">
  <div className="h-12 w-12 rounded-xl bg-slate-200" />
  <div className="mt-4 h-5 w-3/4 rounded bg-slate-200" />
  <div className="mt-3 space-y-2">
    <div className="h-3 w-full rounded bg-slate-100" />
    <div className="h-3 w-5/6 rounded bg-slate-100" />
  </div>
</div>

{/* Shimmer effect */}
<style>
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton-shimmer {
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
</style>

---

Empty States

Design all states:

<div className="flex flex-col items-center justify-center py-16 text-center">
  <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-slate-100">
    <InboxIcon className="h-8 w-8 text-slate-400" />
  </div>
  <h3 className="mt-4 text-lg font-semibold text-slate-900">No projects yet</h3>
  <p className="mt-2 max-w-sm text-slate-600">
    Get started by creating your first project. It only takes a minute.
  </p>
  <button className="mt-6 rounded-lg bg-violet-600 px-4 py-2 text-sm font-semibold text-white hover:bg-violet-500">
    Create project
  </button>
</div>

---

Performance Requirements

Image Optimization:

• Always set explicit width and height to prevent layout shift
• Use loading="lazy" for below-fold images
• Use priority prop (Next.js) for LCP images
• Prefer WebP/AVIF formats

Font Loading:

// Next.js font optimization
import { Inter, Plus_Jakarta_Sans } from 'next/font/google'

const inter = Inter({ subsets: ['latin'], variable: '--font-inter' })
const jakarta = Plus_Jakarta_Sans({
  subsets: ['latin'],
  variable: '--font-jakarta',
  weight: ['500', '600', '700', '800']
})

Large Lists:

• Virtualize lists >50 items
• Or use content-visibility: auto for simpler cases

---

Output Format

When generating components, provide:

## [Component Name]

**What it does:** [One-line description]

**Design decisions:**
- [Why specific color/spacing/layout choices were made]
- [How it avoids generic AI aesthetics]

### Code

[Full implementation]

### Customization

| Prop/Variable | Default | Options |
|---------------|---------|---------|
| variant | "default" | "default", "dark", "accent" |

### Accessibility Notes

- [Specific a11y considerations for this component]

---

Framework-Specific Notes

React/Next.js

• Use functional components with hooks
• TypeScript when requested
• Use Next.js <Link> and <Image> components
• Server components by default, client only when needed

Tailwind CSS

• Use design tokens via theme extension
• Extract repeated patterns to components, not utility classes
• Use @apply sparingly (only in base layer)

Vue/Svelte

• Adapt patterns to framework idioms
• Use framework-specific transition components
• Maintain same accessibility standards

Plain HTML/CSS

• These patterns work without any framework
• Use CSS custom properties for theming
• Modern CSS features (text-wrap, container queries) have good browser support

---

Integration Notes

With Figma: If design specs are provided, match them exactly while applying the accessibility and performance rules from this skill.

With Design Systems: Ask what system is in use, then adapt patterns to match existing tokens.

With Existing Codebases: Match the project's existing conventions for naming, file structure, and styling approach.

---

First-Time Project Checklist

Before writing any frontend code in a project, check for:

1. Tailwind config — tailwind.config.js/ts for custom colors, spacing, fonts
2. CSS variables — :root or theme files for design tokens
3. Component library — Existing UI components to extend, not replace
4. Typography setup — Font imports, base styles, heading scales
5. Spacing conventions — Padding/margin patterns already in use

If these exist: Use them. Apply the principles from this skill (accessibility, animation, anti-generic patterns) while respecting the established visual language.

If these don't exist (greenfield): Use the example palettes and patterns in this skill as a starting point.

---

Quick Reference Checklist

Before shipping any frontend code:

• [ ] No uniform spacing everywhere (varied, intentional)
• [ ] At least one unexpected visual element per section
• [ ] Cards/components vary in style, not copy-pasted
• [ ] All interactive elements have hover, focus, active states
• [ ] Animations only use transform and opacity
• [ ] prefers-reduced-motion respected
• [ ] APCA Lc 75+ for body text contrast
• [ ] Proper heading hierarchy (no skips)
• [ ] All images have alt text
• [ ] Icon buttons have aria-labels
• [ ] Mobile touch targets are 44px+
• [ ] No transition: all
• [ ] No arbitrary z-index values