skills.rest
chaitin
chaitinOFFICIAL
Explore all skills by this author →
WebsiteGitHub

visual-design-foundations

Define typography scales, spacing tokens, and semantic color tokens for design systems.

5|10|Updated Jan 8, 2026
Search Tags:#typography#design#accessibility#tokens#color#spacing#iconography
One-click install
npx skills add https://github.com/chaitin/MonkeyCodeOfficialPlugins --skill visual-design-foundations-chaitin
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-design-foundations
Source: https://github.com/chaitin/MonkeyCodeOfficialPlugins/tree/main/skills/visual-design-foundations
Command: npx skills add https://github.com/chaitin/MonkeyCodeOfficialPlugins --skill visual-design-foundations-chaitin

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Teams struggle with inconsistent typography, spacing, color, and iconography across products, leading to fragmented user experiences and higher design debt.

Core Features & Use Cases

  • Typography scales, spacing tokens, semantic color tokens, and iconography to create cohesive visual systems.
  • Build and audit design tokens and style guides, ensuring accessibility and consistent theming across platforms.
  • Real-world scenario: apply tokens to a new product line to rapidly achieve a polished, accessible UI.

Quick Start

Apply tokens and typography across your UI to start.

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 using design tokens?▼

Create a cohesive visual design system by standardizing typography scales, spacing tokens, and semantic color tokens to eliminate fragmented user experiences and reduce design debt across products.

What are semantic color tokens and how do they support dark mode?▼

Semantic color tokens are structured design variables that define color roles rather than specific values, enabling consistent theming, accessibility guidelines, and dark-mode support across platforms.

How do I build a style guide with typography scales and spacing tokens?▼

Build a style guide by defining typography scales and spacing tokens within a structured framework, applying these tokens across your UI to ensure visual hierarchy and accessibility consistency.

Can I use design tokens for CSS and TypeScript workflows?▼

Yes, design tokens can be applied to CSS and TypeScript workflows, providing practical examples and a structured framework to standardize visual design elements across your product development.

Does this visual design framework include accessibility guidelines?▼

Yes, the visual design framework includes accessibility guidelines, ensuring that typography scales, color tokens, and iconography maintain accessible visual hierarchy across products.

What is the best way to standardize typography and iconography across products?▼

The best way to standardize typography and iconography is by documenting a cohesive visual design system with semantic tokens, ensuring consistent theming and reducing fragmented user experiences.

Related Skills

Explore More Design & Creative Skills→
niiiusburoniiiusburo

extract

Extract reusable UI components and design tokens from a codebase.

Community
Advanced
theodrosyimertheodrosyimer

tokens

Automate DTCG design token creation, validation, and building with Style Dictionary v5.

Community
Intermediate
PTKDrakePTKDrake
1

intentui

Enforce Intent UI component library conventions for React UI elements.

Community
Advanced
Overlord-ZOverlord-Z

style-master

Analyze frontend codebases to extract design tokens and detect styling inconsistencies.

Community
Advanced