# 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:** ```css /* 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:** ```css --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:** ```css --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:** ```css @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:** ```css /* 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:** ```jsx ``` **Secondary/Ghost:** ```jsx ``` --- ## 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 ```html

Page Title

Features

Features
``` ### Form Accessibility ```jsx // Every input needs a label ``` ### Icon Buttons ```jsx // Always include aria-label for icon-only buttons ``` --- ## Component Patterns ### Hero Sections (Bold, Not Generic) **Pattern 1: Asymmetric Split** ```jsx
{/* Dramatic gradient blob */}
{/* Content - takes 60% */}

New Feature

Design that actually stands out

Stop shipping interfaces that look like every other AI-generated page. Create something memorable.

Start building View examples
{/* Visual - asymmetric, not centered */}
{/* Main visual with offset shadow/accent */}
Product screenshot showing the dashboard interface
``` **Pattern 2: Full-Bleed Statement** ```jsx
{/* Animated gradient background */}

Create.

The only design tool that doesn't make everything look the same.

Start free
``` ### Feature Sections **Pattern: Bento Grid (varied sizes)** ```jsx

Everything you need

{/* Large featured card - spans 2 cols */}
Featured

AI-Powered Design

Generate layouts, color schemes, and components with natural language.

{/* Regular cards */}

Lightning Fast

Build in minutes, not hours. Our components are optimized for speed.

Developer First

Clean, semantic code that your team will actually want to maintain.

{/* Horizontal card */}

Accessible by Default

WCAG AA compliant out of the box.

``` ### Cards (Varied, Not Identical) ```jsx {/* Mix card styles for visual interest */}
{/* Style 1: Clean with accent border */}

Design Systems at Scale

How we maintain consistency across 50+ products.

{/* Style 2: Dark with gradient */}
Case Study

Redesigning for Gen Z

Bold colors, authentic voice, instant engagement.

{/* Style 3: Image-forward */}

Motion Design Principles

``` ### Navigation ```jsx
``` --- ## Loading States **Use skeletons, not spinners:** ```jsx {/* Skeleton for card */}
{/* Shimmer effect */} ``` --- ## Empty States **Design all states:** ```jsx

No projects yet

Get started by creating your first project. It only takes a minute.

``` --- ## 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:** ```jsx // 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: ```markdown ## [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 `` and `` 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