skills.rest
Jhabbig
JhabbigCOMMUNITY
Explore all skills by this author →
GitHub

visual-design-foundations

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
One-click install
npx skills add https://github.com/Jhabbig/Habbig --skill visual-design-foundations-jhabbig
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
launchapp-devlaunchapp-dev
38

design-token-audit

Audit design token usage across multi-project design systems to identify inconsistencies and gaps.

Official
Advanced
hakushunhakushun

tailwind-design-system

Creates scalable design systems with Tailwind CSS v4 and semantic tokens.

Community
Advanced
csim-sgcsim-sg

daisy-ui

Build UI components with DaisyUI v5 and Tailwind CSS 4.

Community
Intermediate
an8079an8079
4

code-review

Review Python scripts for style violations and error handling deficiencies.

Community
Intermediate