bolder

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:

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

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."

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. Weekly Installs17.7KRepositorypbakaus/impeccableGitHub Stars10.2KFirst Seen14 days agoSecurity AuditsGen Agent Trust HubPassSocketPassSnykPassInstalled oncodex17.5Kopencode17.4Kgithub-copilot17.3Kgemini-cli17.3Kcursor17.3Kamp17.3K