bolder

Increase visual impact and personality in designs that are too safe, generic, or visually underwhelming, creating more engaging and memorable experiences.

MANDATORY PREPARATION

Use the frontend-design skill — it contains design principles, anti-patterns, and the Context Gathering Protocol. Follow the protocol before proceeding — if no design context exists yet, you MUST run teach-impeccable first.

---

Assess Current State

Analyze what makes the design feel too safe or boring:

1. Identify weakness sources:

   • Generic choices: System fonts, basic colors, standard layouts
   • Timid scale: Everything is medium-sized with no drama
   • Low contrast: Everything has similar visual weight
   • Static: No motion, no energy, no life
   • Predictable: Standard patterns with no surprises
   • Flat hierarchy: Nothing stands out or commands attention

2. Understand the context:

   • What's the brand personality? (How far can we push?)
   • What's the purpose? (Marketing can be bolder than financial dashboards)
   • Who's the audience? (What will resonate?)
   • What are the constraints? (Brand guidelines, accessibility, performance)

If any of these are unclear from the codebase, STOP and call the AskUserQuestion tool to clarify.

CRITICAL: "Bolder" doesn't mean chaotic or garish. It means distinctive, memorable, and confident. Think intentional drama, not random chaos.

WARNING - AI SLOP TRAP: When making things "bolder," AI defaults to the same tired tricks: cyan/purple gradients, glassmorphism, neon accents on dark backgrounds, gradient text on metrics. These are the OPPOSITE of bold—they're generic. Review ALL the DON'T guidelines in the frontend-design skill before proceeding. Bold means distinctive, not "more effects."

Plan Amplification

Create a strategy to increase impact while maintaining coherence:

• Focal point: What should be the hero moment? (Pick ONE, make it amazing)
• Personality direction: Maximalist chaos? Elegant drama? Playful energy? Dark moody? Choose a lane.
• Risk budget: How experimental can we be? Push boundaries within constraints.
• Hierarchy amplification: Make big things BIGGER, small things smaller (increase contrast)

IMPORTANT: Bold design must still be usable. Impact without function is just decoration.

Amplify the Design

Systematically increase impact across these dimensions:

Typography Amplification

• Replace generic fonts: Swap system fonts for distinctive choices (see frontend-design skill for inspiration)
• Extreme scale: Create dramatic size jumps (3x-5x differences, not 1.5x)
• Weight contrast: Pair 900 weights with 200 weights, not 600 with 400
• Unexpected choices: Variable fonts, display fonts for headlines, condensed/extended widths, monospace as intentional accent (not as lazy "dev tool" default)

Color Intensification

• Increase saturation: Shift to more vibrant, energetic colors (but not neon)
• Bold palette: Introduce unexpected color combinations—avoid the purple-blue gradient AI slop
• Dominant color strategy: Let one bold color own 60% of the design
• Sharp accents: High-contrast accent colors that pop
• Tinted neutrals: Replace pure grays with tinted grays that harmonize with your palette
• Rich gradients: Intentional multi-stop gradients (not generic purple-to-blue)

Spatial Drama

• Extreme scale jumps: Make important elements 3-5x larger than surroundings
• Break the grid: Let hero elements escape containers and cross boundaries
• Asymmetric layouts: Replace centered, balanced layouts with tension-filled asymmetry
• Generous space: Use white space dramatically (100-200px gaps, not 20-40px)
• Overlap: Layer elements intentionally for depth

Visual Effects

• Dramatic shadows: Large, soft shadows for elevation (but not generic drop shadows on rounded rectangles)
• Background treatments: Mesh patterns, noise textures, geometric patterns, intentional gradients (not purple-to-blue)
• Texture & depth: Grain, halftone, duotone, layered elements—NOT glassmorphism (it's overused AI slop)
• Borders & frames: Thick borders, decorative frames, custom shapes (not rounded rectangles with colored border on one side)
• Custom elements: Illustrative elements, custom icons, decorative details that reinforce brand

Motion & Animation

• Entrance choreography: Staggered, dramatic page load animations with 50-100ms delays
• Scroll effects: Parallax, reveal animations, scroll-triggered sequences
• Micro-interactions: Satisfying hover effects, click feedback, state changes
• Transitions: Smooth, noticeable transitions using ease-out-quart/quint/expo (not bounce or elastic—they cheapen the effect)

Composition Boldness

• Hero moments: Create clear focal points with dramatic treatment
• Diagonal flows: Escape horizontal/vertical rigidity with diagonal arrangements
• Full-bleed elements: Use full viewport width/height for impact
• Unexpected proportions: Golden ratio? Throw it out. Try 70/30, 80/20 splits

NEVER:

• Add effects randomly without purpose (chaos ≠ bold)
• Sacrifice readability for aesthetics (body text must be readable)
• Make everything bold (then nothing is bold - need contrast)
• Ignore accessibility (bold design must still meet WCAG standards)
• Overwhelm with motion (animation fatigue is real)
• Copy trendy aesthetics blindly (bold means distinctive, not derivative)

Verify Quality

Ensure amplification maintains usability and coherence:

• NOT AI slop: Does this look like every other AI-generated "bold" design? If yes, start over.
• Still functional: Can users accomplish tasks without distraction?
• Coherent: Does everything feel intentional and unified?
• Memorable: Will users remember this experience?
• Performant: Do all these effects run smoothly?
• Accessible: Does it still meet accessibility standards?

The test: If you showed this to someone and said "AI made this bolder," would they believe you immediately? If yes, you've failed. Bold means distinctive, not "more AI effects."

Before / After

Bold is not "more effects." Bold is one committed decision pushed further than the safe version dared. These pairs show the difference.

1. Typography — safe medium to committed display

The "safe" version is indistinguishable from a thousand landing pages. The bold version makes a size decision and commits to it.

/* before — timid, no opinion, reads as a template */
.hero-title {
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: normal;
  font-family: system-ui, sans-serif;
}

/* after — display scale, tight tracking, opinionated weight */
.hero-title {
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-family: "Fraunces", "Söhne Breit", serif;
  text-wrap: balance;
}

2. Color — desaturated gray to dominant hue

A slate palette is safe because it refuses to take a position. Pick a hue and let it own the composition.

/* before — generic tech gray, indistinguishable from the next dashboard */
:root {
  --bg:      #f8fafc;
  --surface: #ffffff;
  --fg:      #0f172a;
  --accent:  #64748b; /* slate, no personality */
}

/* after — committed hue, dominant across the UI */
:root {
  --bg:      oklch(97% 0.03 25);      /* warm blush background */
  --surface: oklch(99% 0.01 25);
  --fg:      oklch(22% 0.05 25);
  --accent:  oklch(65% 0.24 25);      /* saturated terracotta owns 60% of the design */
  --accent-ink: oklch(35% 0.18 25);
}

body {
  background: var(--bg);
  color: var(--fg);
}

3. Composition — centered grid to asymmetric broken layout

Centered everything is the default. Break the grid on purpose and the page remembers you.

{/* before — safe, centered, perfectly balanced, forgettable */}
<section className="max-w-4xl mx-auto px-6 py-24 text-center">
  <h1 className="text-5xl font-bold mb-6">Build faster</h1>
  <p className="text-xl text-gray-600 mb-8 max-w-2xl mx-auto">
    The platform for teams that ship.
  </p>
  <button className="px-6 py-3 bg-violet-600 text-white rounded-lg">
    Get started
  </button>
</section>

{/* after — asymmetric, overlapping, tilted, room to breathe */}
<section className="relative min-h-screen overflow-hidden">
  <h1
    className="absolute left-[4vw] top-[18vh] text-[clamp(5rem,14vw,14rem)] font-black leading-[0.85] tracking-[-0.05em]"
    style={{ transform: "rotate(-2deg)" }}
  >
    Build
    <br />
    <span className="italic text-[--accent]">faster.</span>
  </h1>

  <p className="absolute right-[6vw] top-[55vh] max-w-xs text-lg leading-snug border-l-4 border-[--accent] pl-4">
    The platform for teams that ship.
  </p>

  <a
    href="/start"
    className="absolute bottom-[12vh] right-[8vw] text-2xl font-bold underline decoration-4 underline-offset-8 decoration-[--accent]"
  >
    Start building →
  </a>

  <div
    aria-hidden
    className="absolute -left-20 bottom-0 w-[40vw] h-[40vw] rounded-full bg-[--accent] opacity-20 blur-3xl"
  />
</section>

4. The rule — intentional maximalism, not random overdrive

BOLD:                                      SLOP:
- One committed hue dominates 60%+         - Random cyan/purple gradient
- Display-scale type (clamp to 6rem+)      - Four decorative effects stacked
- Tight tracking, heavy weight             - Glassmorphism on every card
- Broken grid with intent (rotation,       - Bounce easing on every animation
  overlap, asymmetry)                      - Gradient text on every heading
- Generous negative space around           - "More" as a substitute for
  the one hero moment                        "stronger"

Test: remove every effect except the single strongest decision. If the design still feels bold, you chose right. If it collapses, you were stacking effects to hide a lack of commitment.

---

Remember: Bold design is confident design. It takes risks, makes statements, and creates memorable experiences. But bold without strategy is just loud. Be intentional, be dramatic, be unforgettable.