visual-design-foundations

Standardize typography, color, spacing, and iconography with design tokens.

Updated Aug 23, 2026

Search Tags:#typography #design #spacing #style-guide #design-tokens #iconography #color-system

Ready to run

npx skills add https://github.com/vorynkavitaliy/openclaw-assistent --skill visual-design-foundations-vorynkavitaliy

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: visual-design-foundations
Source: https://github.com/vorynkavitaliy/openclaw-assistent/tree/main/.agents/skills/visual-design-foundations
Command: npx skills add https://github.com/vorynkavitaliy/openclaw-assistent --skill visual-design-foundations-vorynkavitaliy

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Guides design teams to apply typography, color theory, spacing systems, and iconography to create cohesive visual designs that scale across products and platforms.

Core Features & Use Cases

Establish design tokens for typography, color, spacing, and iconography.
Build and maintain style guides and pattern libraries to ensure consistent visual hierarchy.
Audit and improve accessibility, theming, and responsive behavior across light/dark modes.

Quick Start

Begin by auditing an existing design system and start applying tokens to typography, color, and spacing.

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 design tokens for typography and color systems?▼

Create design tokens by standardizing typography, color palettes, spacing, and iconography into reusable variables. This approach enforces token-based constraints to maintain visual consistency and accessible color contrasts across web and mobile themes.

What is the best way to audit visual accessibility and color contrast?▼

Audit visual accessibility by evaluating color contrasts and responsive behavior across light and dark modes. This process enforces accessible color systems and scalable spacing to ensure cohesive, accessible visual systems across products.

Can I use this approach to build a style guide for web and mobile products?▼

Yes, you can build and maintain style guides and pattern libraries for web and mobile products. This standardizes visual hierarchy and applies token-based design constraints to ensure consistent iconography and spacing across platforms.

How do I standardize spacing and iconography across different themes?▼

Standardize spacing and iconography by applying scalable spacing systems and consistent icon sets across themes. This enforces token-based design constraints to ensure visual hierarchy remains cohesive during light and dark mode theming.

Why does my design system lack visual consistency across platforms?▼

Your design system lacks consistency without standardized design tokens for typography, color, and spacing. Establishing a style guide with enforced token-based constraints resolves visual hierarchy issues across web and mobile projects.