mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-14 23:26:39 +03:00
Paul BakausandClaude Opus 4.5
7c3e76663b
Commands updated with specific improvements: - audit: Added Design Anti-Patterns section (pure gray, gray-on-color, nested cards, bounce/elastic, redundant copy) - polish: Updated easing guidance, added tinted neutrals and gray-on-color checks - animate: Added Timing & Easing section with quart/quint/expo curves, bounce/elastic warning - bolder: Fixed color section (avoid purple-blue gradients), proper easing - quieter: Added tinted grays guidance, gray-on-color fix - simplify: Added nested cards warning, redundant copy removal - colorize: Added OKLCH recommendation, gray-on-color fix - clarify: Added redundant copy and placeholder-as-label warnings - delight: Fixed spring animation to use ease-out-quart Also fixed gray-on-color wording across all files: - Use "shade of the background color" not "tinted text" 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
107 lines
5.3 KiB
Markdown
107 lines
5.3 KiB
Markdown
---
|
|
name: bolder
|
|
description: Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability.
|
|
args:
|
|
- name: target
|
|
description: The feature or component to make bolder (optional)
|
|
required: false
|
|
---
|
|
|
|
Increase visual impact and personality in designs that are too safe, generic, or visually underwhelming, creating more engaging and memorable experiences.
|
|
|
|
## 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)
|
|
|
|
**CRITICAL**: "Bolder" doesn't mean chaotic or garish. It means distinctive, memorable, and confident. Think intentional drama, not random chaos.
|
|
|
|
## 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, monospace as accent
|
|
|
|
### 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
|
|
- **Background treatments**: Gradients, mesh patterns, noise textures, geometric patterns
|
|
- **Blur effects**: Glassmorphism, backdrop blur, depth effects
|
|
- **Borders & frames**: Thick borders, decorative frames, custom shapes
|
|
- **Custom elements**: Illustrative elements, custom icons, decorative details
|
|
|
|
### 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:
|
|
|
|
- **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?
|
|
|
|
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.
|
|
|