visual-design-foundations

Establish design tokens, spacing systems, and color palettes for cohesive, accessible visual designs. Build cohesive, accessible visual systems using typography, color, spacing, and iconography fundamentals. Modular Scale (ratio-based sizing): Line Height Guidelines : 8-point grid (industry standard): Semantic color tokens : Safe combinations : - Provides modular typography scale, 8-point spacing grid, semantic color tokens, and iconography system with CSS variable templates - Includes WCAG contrast requirements (4.5:1 for body text, 3:1 for UI), dark mode implementation patterns, and font-pairing guidelines - Covers responsive typography with clamp() , color accessibility checking, and vertical rhythm techniques for visual consistency - Offers Tailwind configuration examples, icon sizing system, and best practices for establishing design constraints and documenting decisions - Establishing design tokens for a new project - Creating or refining a spacing and sizing system - Selecting and pairing typefaces - Building accessible color palettes - Designing icon systems and visual assets - Improving visual hierarchy and readability - Auditing designs for visual consistency - Implementing dark mode or theming - Heading: Inter / Body: Inter (single family) - Heading: Playfair Display / Body: Source Sans Pro (contrast) - Heading: Space Grotesk / Body: IBM Plex Sans (geometric) -...