mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-12 22:26:38 +03:00
Paul BakausandClaude Opus 4.5
8e4f48566f
Removed items that are: - Accessibility 101 (WCAG, color blindness, reduced motion, focus indicators) - Basic design principles (hierarchy, readability, semantic tokens) - Well-known rules (2-3 fonts max, mobile-first, decorative body fonts) Kept items that fight specific AI biases: - Off-whites/near-blacks, dominant color with accents - Spacing scales, asymmetry, staggered reveals - Bounce/elastic easing ban, cards-on-cards - Gray text on color, placeholder-as-labels, generic errors Reduced from 60 items to 34 - more focused and actionable. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
63 lines
2.4 KiB
Markdown
63 lines
2.4 KiB
Markdown
---
|
|
patterns:
|
|
- name: Typography
|
|
items:
|
|
- Use a modular type scale (1.2, 1.25, 1.333, 1.5 ratios)
|
|
- Pair a distinctive display font with a refined body font
|
|
- Set body text at 16-18px minimum for readability
|
|
- Use proper line heights (1.4-1.6 for body, tighter for headings)
|
|
- name: Color & Contrast
|
|
items:
|
|
- Build palettes from a dominant color with intentional accents
|
|
- Use off-whites and near-blacks for softer, sophisticated feel
|
|
- name: Layout & Space
|
|
items:
|
|
- Use a spacing scale (4, 8, 12, 16, 24, 32, 48, 64, 96)
|
|
- Create visual rhythm through varied spacing
|
|
- Use asymmetry and unexpected compositions
|
|
- Break the grid intentionally for emphasis
|
|
- name: Motion
|
|
items:
|
|
- Use 150-300ms for micro-interactions
|
|
- Prefer transform and opacity (GPU-accelerated)
|
|
- Stagger reveals for orchestrated page loads
|
|
- name: Interaction
|
|
items:
|
|
- Write specific, helpful error messages
|
|
- name: Responsive
|
|
items:
|
|
- Use fluid typography (clamp for smooth scaling)
|
|
- Test landscape orientation on mobile
|
|
- Consider device capabilities (not just screen size)
|
|
antipatterns:
|
|
- name: Typography
|
|
items:
|
|
- Don't implement arbitrary font sizes without a scale
|
|
- name: Color & Contrast
|
|
items:
|
|
- Don't use gray text on colored backgrounds
|
|
- Don't use pure gray, pure black (#000), or pure white (#fff) - add subtle color tint
|
|
- Don't create palettes with arbitrary color choices
|
|
- name: Layout & Space
|
|
items:
|
|
- Don't wrap everything in cards
|
|
- Don't nest cards inside cards
|
|
- Don't make all spacing equal (variety creates hierarchy)
|
|
- Don't create hierarchy through size alone
|
|
- name: Motion
|
|
items:
|
|
- Don't use durations over 500ms for UI feedback
|
|
- Don't animate layout properties (width, height, padding, margin) - use transform instead
|
|
- Don't use bounce or elastic easing - they feel dated and tacky; use ease-out-quart/quint/expo
|
|
- name: Interaction
|
|
items:
|
|
- Don't use placeholder text as labels
|
|
- Don't show generic error messages
|
|
- Don't repeat the same information (redundant headers, intro restating heading, etc.)
|
|
- name: Responsive
|
|
items:
|
|
- Don't hide critical functionality on mobile
|
|
- Don't use device detection over feature detection
|
|
- Don't forget about landscape orientation
|
|
---
|