skills.rest
ArogyaReddy
ArogyaReddyCOMMUNITY
Explore all skills by this author →
GitHub

visual-design-foundations

Define typography, color, spacing, and iconography design tokens for web and mobile UI.

Updated Apr 19, 2026
Search Tags:#typography#design#color#spacing#style-guide#iconography
One-click install
npx skills add https://github.com/ArogyaReddy/https-github.com-wshobson-agents --skill visual-design-foundations-arogyareddy
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-design-foundations
Source: https://github.com/ArogyaReddy/https-github.com-wshobson-agents/tree/main/plugins/ui-design/skills/visual-design-foundations
Command: npx skills add https://github.com/ArogyaReddy/https-github.com-wshobson-agents --skill visual-design-foundations-arogyareddy

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Establishing consistent visual design systems across typography, color, spacing, and iconography to ensure accessibility and coherence.

Core Features & Use Cases

  • Establish typography scales, spacing tokens, and color palettes (including dark mode) for product UI.
  • Define and audit iconography, spacing systems, and token-driven design decisions with real-world examples such as a design system for a web app.
  • Create or refine a living style guide to maintain visual consistency across teams and platforms.

Quick Start

Create a cohesive visual design system outline covering typography, color, spacing, and icons for a new project.

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 cohesive visual design system for web and mobile projects?▼

To create a cohesive visual design system, you define typography scales, spacing grids, color tokens, and accessible iconography criteria, then apply them across UI components for web and mobile projects.

What is a design token and how does it maintain visual consistency across teams?▼

A design token stores visual design attributes like color and spacing as reusable variables. It ensures consistent UI component styling across platforms and maintains a living style guide for teams.

How do I ensure my color palette meets contrast guidelines for dark mode?▼

To meet contrast guidelines for dark mode, define color palettes using accessible color tokens that satisfy standard contrast ratios, ensuring readable typography and UI components in both light and dark themes.

Can I use this to audit existing iconography and spacing systems?▼

Yes, you can define and audit existing iconography and spacing systems by evaluating current UI components against established design tokens and accessibility criteria to ensure visual consistency.

What's the best way to establish a typography scale for product UI?▼

The best way to establish a typography scale is by defining structured font sizes and weights as design tokens, applying them systematically across product UI to ensure accessible and cohesive text styling.

Related Skills

Explore More Design & Creative Skills→
truchottruchot
2

direction-artistique

Define visual identity, brand language, and governance for projects.

Community
Advanced
mchien15mchien15

frontend-design

Convert design references into reusable HTML/CSS/JS components and design tokens.

Community
Advanced
ihlamuryihlamury
73

planetscale-ui-skills

Enforce Planetscale UI design tokens, dark mode, Inter font, and 4px grid.

Community
Intermediate
ihlamuryihlamury
73

brex-ui-skills

Enforce Brex UI design constraints for light-mode interfaces with Inter typography and a 4px grid.

Community
Intermediate