Initial commit with translated description

references/12-checklist-visual-style.md

@@ -0,0 +1,296 @@
+# Checklist: Improving Visual Style
+
+Systematic checks for visual design consistency and quality.
+
+---
+
+## Spacing
+
+Consistent rhythm creates visual harmony.
+
+### Spacing System
+
+☐ **Base unit defined** — Usually 4px or 8px
+☐ **Scale established** — e.g., 4, 8, 12, 16, 24, 32, 48, 64
+☐ **Consistent application** — Same spacing for same relationships
+
+### Spacing Types
+
+☐ **Padding** — Space inside containers
+☐ **Margin** — Space between elements
+☐ **Gap** — Space in flex/grid layouts
+☐ **Gutters** — Space between columns
+
+### Spacing Relationships
+
+☐ **Related items closer** — Law of Proximity
+☐ **Unrelated items farther** — Visual grouping
+☐ **Hierarchy through spacing** — More space = more importance
+☐ **Breathing room** — Adequate whitespace
+
+### Common Issues
+
+- Inconsistent spacing between similar elements
+- Too little whitespace (cramped)
+- Too much whitespace (disconnected)
+- Padding/margin not on the spacing scale
+
+---
+
+## Colors
+
+Color communicates meaning and creates hierarchy.
+
+### Color System
+
+☐ **Primary color** — Brand/action color
+☐ **Secondary color** — Supporting accent
+☐ **Neutral palette** — Grays for text, backgrounds, borders
+☐ **Semantic colors** — Error, success, warning, info
+
+### Color Usage
+
+☐ **Text colors** — Primary, secondary, disabled, placeholder
+☐ **Background colors** — Surface hierarchy (elevated, base, sunken)
+☐ **Border colors** — Default, focus, error
+☐ **Interactive states** — Hover, active, focus variations
+
+### Color Accessibility
+
+☐ **Contrast ratios** — 4.5:1 for normal text, 3:1 for large text
+☐ **Not color alone** — Don't rely solely on color to convey info
+☐ **Color blindness** — Test with simulators
+☐ **Dark mode** — Colors work in both modes
+
+### Common Issues
+
+- Too many colors (lack of cohesion)
+- Insufficient contrast
+- Inconsistent semantic usage (different reds for errors)
+- Color used as only differentiator
+
+---
+
+## Elevation
+
+Visual layers create depth and hierarchy.
+
+### Elevation Levels
+
+☐ **Level 0** — Base surface (no shadow)
+☐ **Level 1** — Slight elevation (cards, sections)
+☐ **Level 2** — Moderate elevation (dropdowns, popovers)
+☐ **Level 3** — High elevation (modals, dialogs)
+☐ **Level 4** — Highest elevation (toasts, tooltips above modals)
+
+### Shadow Properties
+
+☐ **Consistent direction** — Light source consistent
+☐ **Blur radius** — Increases with elevation
+☐ **Spread** — Usually minimal
+☐ **Opacity** — Decreases with distance
+☐ **Color** — Usually dark gray/black, can be colored
+
+### Elevation Usage
+
+☐ **Interactive elements** — Buttons may elevate on hover
+☐ **Overlay content** — Modals, drawers clearly elevated
+☐ **Sticky elements** — Headers/navs elevated when scrolling
+☐ **Focus indication** — Can supplement or replace outlines
+
+### Common Issues
+
+- Inconsistent shadow direction
+- Too many elevation levels
+- Shadows too harsh or too subtle
+- Elevation doesn't match interaction hierarchy
+
+---
+
+## Iconography
+
+Icons support comprehension and reduce text.
+
+### Icon System
+
+☐ **Single icon library** — Consistent style
+☐ **Consistent stroke/fill** — Don't mix styles
+☐ **Size scale** — 16, 20, 24, 32, 48 (or similar)
+☐ **Consistent grid** — Icons align to same grid
+
+### Icon Usage
+
+☐ **With text labels** — For unclear icons
+☐ **Standalone** — Only for universally understood (close, search, home)
+☐ **In buttons** — Left or right of text consistently
+☐ **In navigation** — Supplement text, not replace
+☐ **As status** — Error, success, warning indicators
+
+### Icon Accessibility
+
+☐ **Alt text/aria-label** — For meaningful icons
+☐ **aria-hidden** — For decorative icons
+☐ **Touch targets** — 44x44px minimum for tappable icons
+☐ **Color contrast** — Icons meet contrast requirements
+
+### Common Issues
+
+- Mixed icon styles (outline + filled)
+- Icons without labels where meaning unclear
+- Inconsistent icon sizes
+- Too many unique icons
+
+---
+
+## Typography
+
+Text is the primary interface. Make it work.
+
+### Type Scale
+
+☐ **Scale established** — Limited set of sizes (7-10)
+☐ **Consistent usage** — Same size for same purpose
+☐ **Responsive scaling** — Appropriate for device
+
+### Type Hierarchy
+
+☐ **H1-H6** — Clear heading hierarchy
+☐ **Body text** — Primary and secondary
+☐ **Captions/labels** — Small supporting text
+☐ **Display text** — Hero/feature text
+
+### Type Properties
+
+☐ **Line height** — 1.4-1.6 for body, 1.1-1.3 for headings
+☐ **Letter spacing** — Adjusted for size (tighter large, looser small)
+☐ **Font weight** — 2-3 weights max
+☐ **Max line length** — 45-75 characters for readability
+
+### Type Accessibility
+
+☐ **Minimum size** — 16px for body text
+☐ **Contrast** — 4.5:1 ratio
+☐ **Scalability** — Works when user zooms
+☐ **Font choice** — Legible at small sizes
+
+### Common Issues
+
+- Too many font sizes
+- Inconsistent line heights
+- Lines too long (hard to read)
+- Insufficient contrast on secondary text
+
+---
+
+## Imagery & Illustrations
+
+Visual content enhances understanding and tone.
+
+### Image Usage
+
+☐ **Consistent style** — Photography style or illustration style
+☐ **Appropriate aspect ratios** — Consistent crops
+☐ **Quality** — High resolution, appropriate compression
+☐ **Relevance** — Images support content, not decorate
+
+### Image Treatments
+
+☐ **Placeholders** — Loading states for images
+☐ **Error states** — Broken image handling
+☐ **Cropping** — Consistent crop ratios
+☐ **Filters/overlays** — Consistent treatment
+
+### Image Accessibility
+
+☐ **Alt text** — Descriptive for meaningful images
+☐ **Empty alt** — For decorative images
+☐ **Text in images** — Avoided or duplicated in HTML
+☐ **Color contrast** — Text over images readable
+
+### Illustration Guidelines
+
+☐ **Consistent style** — Same illustrator or style guide
+☐ **Color palette** — Within brand colors
+☐ **Stroke weights** — Consistent with icons
+☐ **Character design** — If using people, consistent representation
+
+---
+
+## Motion & Animation
+
+Movement creates meaning and delight.
+
+### Animation Purposes
+
+☐ **Feedback** — Response to user action
+☐ **Orientation** — Help users understand spatial relationships
+☐ **Attention** — Draw focus to important changes
+☐ **Continuity** — Smooth transitions between states
+
+### Animation Properties
+
+☐ **Duration** — 100-500ms typical (faster = less important)
+☐ **Easing** — Ease-out for entrances, ease-in for exits
+☐ **Consistency** — Same duration for same type of animation
+☐ **Purpose** — Every animation has a reason
+
+### Animation Best Practices
+
+☐ **Prefer transforms** — translate, scale, rotate, opacity (performant)
+☐ **Avoid layout thrash** — Don't animate width, height, position
+☐ **Reduce motion** — Respect prefers-reduced-motion
+☐ **Subtlety** — Most animations should be barely noticed
+
+### Common Issues
+
+- Animations too slow (feel sluggish)
+- Animations too fast (miss the feedback)
+- Gratuitous animation (no purpose)
+- Inconsistent easing/duration
+- Ignoring accessibility preferences
+
+---
+
+## Texture & Patterns
+
+Surface treatments add depth and character.
+
+### Texture Types
+
+☐ **Subtle gradients** — Add depth without distraction
+☐ **Background patterns** — Subtle, non-distracting
+☐ **Noise/grain** — Adds warmth to flat colors
+☐ **Glass effects** — Blur, transparency (use sparingly)
+
+### Usage Guidelines
+
+☐ **Subtlety** — Textures shouldn't compete with content
+☐ **Purpose** — Differentiate surfaces, add depth
+☐ **Consistency** — Same treatment for same surface type
+☐ **Performance** — Consider render cost
+
+### Common Issues
+
+- Textures too prominent
+- Inconsistent texture usage
+- Performance impact from complex textures
+- Reduced legibility from background patterns
+
+---
+
+## Visual Style Audit
+
+Quick checks for visual consistency:
+
+| Element | ✓ | Notes |
+|---------|---|-------|
+| Spacing on scale | | |
+| Color palette limited | | |
+| Contrast accessible | | |
+| Elevation consistent | | |
+| Single icon style | | |
+| Type scale limited | | |
+| Line heights consistent | | |
+| Images consistent style | | |
+| Animations purposeful | | |
+| Reduced motion respected | | |