visual-design-foundations

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 : - 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) - Establish Constraints : Limit choices to maintain consistency - Document Decisions : Create a living style guide - Test Accessibility : Verify contrast, sizing, touch targets - Use Semantic Tokens : Name by purpose, not appearance - Design Mobile-First : Start with constraints, add complexity - Maintain Vertical Rhythm : Consistent spacing creates harmony - Limit Font Weights : 2-3 weights per family is sufficient - Inconsistent Spacing : Not using a defined scale - Poor Contrast : Failing WCAG requirements - Font Overload : Too many families or weights - Magic Numbers : Arbitrary values instead of tokens - Missing States : Forgetting...