visual-design-foundations

Name: visual-design-foundations
Availability: InStock
Author: jhabbig

Establish visual design systems from typography, color, spacing, and iconography standards.

Updated Apr 5, 2026

Search Tags:#typography #accessibility #design tokens #spacing #iconography #color systems

Ready to run

npx skills add https://github.com/Jhabbig/Habbig --skill visual-design-foundations-jhabbig

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: visual-design-foundations
Source: https://github.com/Jhabbig/Habbig/tree/main/.claude/plugins/wshobson/ui-design/skills/visual-design-foundations
Command: npx skills add https://github.com/Jhabbig/Habbig --skill visual-design-foundations-jhabbig

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps teams replace inconsistent, ad hoc UI styling with a clear visual foundation that improves readability, hierarchy, and brand consistency.

Core Features & Use Cases

Typography systems: Choose scale, weight, line height, and font pairing rules for headings, body text, and UI labels.
Color systems: Build semantic palettes, dark mode tokens, contrast-safe states, and accessible theme variants.
Spacing and iconography: Standardize rhythm, component padding, icon sizing, and touch targets so interfaces feel cohesive.
Use case: Use it when defining design tokens for a new product, reviewing a UI for consistency, or refining a style guide before implementation.

Quick Start

Ask for a complete visual foundation for your product UI, including typography, semantic colors, spacing scale, icon sizing, and dark mode tokens.

Frequently Asked Questions about visual-design-foundations

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I create a consistent visual design system for my product UI?▼

A visual design system establishes cohesive UI foundations using semantic design tokens for typography, color, spacing, and iconography. It improves readability, hierarchy, and brand consistency by replacing ad hoc styling with standardized, accessible theme variants.

What are semantic design tokens and when do I need them for a style guide?▼

Semantic design tokens map raw style values to functional roles like text, background, or spacing. You need them when defining a style guide to ensure accessible contrast, responsive type scales, and reusable spacing components across web and product interfaces.

Can I use this to build a dark mode color system with accessible contrast?▼

Yes, you can build semantic palettes and dark mode tokens with contrast-safe states. The system applies accessible theme variants to ensure your UI meets contrast requirements for both light and dark modes.

What's the best way to standardize spacing and icon sizing for web interfaces?▼

Standardize spacing and icon sizing by defining reusable spacing scale tokens and icon components. This standardizes visual rhythm, component padding, icon dimensions, and touch targets so that your product interfaces feel cohesive.

Why does my UI feel inconsistent and how do I audit visual consistency?▼

Your UI feels inconsistent due to ad hoc styling lacking standardized typography, color, and spacing rules. Perform a visual consistency audit using established design tokens to review hierarchy, readability, and brand alignment across your product interfaces.