Agent skill · design visual · wshobson
visual-design-foundations
Apply typography, color theory, spacing systems, and iconography principles to create cohesive visual designs. Use when establishing design tokens, building style guides, or improving visual hierarchy and consistency.
Why this skill is useful
Provides specific design token implementations and best practices for typography, color, and spacing that enhance visual design consistency.
What it needs
About 4k tokens when loaded. Last updated 2026-08-05. 38,570 stars on the source repository.
What this skill does
Visual Design Foundations Build cohesive, accessible visual systems using typography, color, spacing, and iconography fundamentals. When to Use This Skill 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 Core Systems 1. Typography Scale Modular Scale (ratio-based sizing): Line Height Guidelines: Text Type Line Height ----------- ------------- Headings 1.1 - 1.3 Body text 1.5 - 1.7 UI labels 1.2 - 1.4 2. Spacing System 8-point grid (industry standard): 3. Color System Semantic color tokens: Quick Start: Design Tokens in Tailwind Typography Best Practices Font Pairing Safe combinations: Heading: Inter / Body: Inter (single family) Heading: Playfair Display / Body: Source Sans Pro (contrast) Heading: Space Grotesk / Body: IBM Plex Sans (geometric) Responsive Typography Font Loading Color Theory Contrast Requirements (WCAG) Element Minimum Ratio ------------------ ------------- Body text 4.5:1 (AA) Large text (18px+) 3:1 (AA) UI components 3:1 (AA) Enhanced 7:1 (AAA) Dark Mode Strategy Color Accessibility Spacing Guidelines Component Spacing Visual Rhythm Iconography Icon Sizing System Icon Component Best Practices 1. Establish Constraints: Limit choices to maintain consistency 2. Document Decisions: Create a living style guide 3. Test Accessibility: Verify contrast, sizing, touch targets 4. Use Semantic Tokens: Name by purpose, not appearance 5. Design Mobile-First: Start with constraints, add complexity 6. Maintain Vertical Rhythm: Consistent spacing creates harmony 7. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills wshobson/visual-design-foundations