mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-12 14:16:28 +03:00
Paul BakausandClaude Opus 4.5
fe5741d01b
Reduced to most impactful items only: - Typography: modular scale, distinctive fonts, avoid overused fonts - Color: off-whites/near-blacks, modern CSS, no gray on color, always tint - Layout: visual rhythm, asymmetry, grid-breaking, no card obsession, modals are lazy - Motion: no layout animation, no bounce/elastic - Interaction: no redundant copy - Responsive: don't hide mobile functionality 9 categories, ~15 items total - lean and focused. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
40 lines
1.4 KiB
Markdown
40 lines
1.4 KiB
Markdown
---
|
|
patterns:
|
|
- name: Typography
|
|
items:
|
|
- Use a modular type scale
|
|
- Pair a distinctive display font with a refined body font
|
|
- name: Color & Contrast
|
|
items:
|
|
- Use off-whites and near-blacks for softer, sophisticated feel
|
|
- Use the latest CSS has to offer for color and gradients
|
|
- name: Layout & Space
|
|
items:
|
|
- Create visual rhythm through varied spacing
|
|
- Use asymmetry and unexpected compositions
|
|
- Break the grid intentionally for emphasis
|
|
antipatterns:
|
|
- name: Typography
|
|
items:
|
|
- Don't use overused fonts like Arial or Inter
|
|
- name: Color & Contrast
|
|
items:
|
|
- Don't use gray text on colored backgrounds
|
|
- Don't use pure gray or black. Always tint - pure black/gray never appears in nature.
|
|
- name: Layout & Space
|
|
items:
|
|
- Don't wrap everything in cards
|
|
- Don't nest cards inside cards
|
|
- Modals are lazy. Only use modals if there's truly no better alternative
|
|
- name: Motion
|
|
items:
|
|
- 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 repeat the same information (redundant headers, intro restating heading, etc.)
|
|
- name: Responsive
|
|
items:
|
|
- Don't hide critical functionality on mobile
|
|
---
|