0178-visual-design-foundations

What problem does it solve?

This Skill helps teams avoid inconsistent UI styling by providing practical, reusable fundamentals for typography, spacing, color tokens, and iconography—improving visual hierarchy and accessibility.

Core Features & Use Cases

• Typography Scale Setup: Defines modular-type sizing, line-height guidance, responsive and fluid type patterns, and font loading considerations.
• Spacing System & Vertical Rhythm: Establishes an 8-point spacing grid and shows how to apply consistent component padding, section gaps, and prose rhythm.
• Accessible Color Tokens: Provides semantic token structure, dark mode theming strategy, and WCAG contrast targets with example contrast-check logic.
• Iconography Foundations: Introduces an icon sizing system and component patterns that support consistent icon rendering and accessibility.
• Use Case Examples: Supports design token creation, style guide refinement, theme rollouts (including dark mode), and visual consistency audits.

Quick Start

Ask the AI to generate a complete set of design tokens (type scale, 8-point spacing, semantic color palette with dark mode values, and icon sizing) for your product’s UI.