visual-design-foundations

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

Establish typography, color, spacing, and iconography rules for consistent UIs.

Updated Aug 23, 2026

Search Tags:#typography #design #tokens #color #spacing #visual-design #iconography

Ready to run

npx skills add https://github.com/SpinBoxx/turborepo-boilerplate --skill visual-design-foundations-spinboxx

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: visual-design-foundations
Source: https://github.com/SpinBoxx/turborepo-boilerplate/tree/main/.agents/skills/visual-design-foundations
Command: npx skills add https://github.com/SpinBoxx/turborepo-boilerplate --skill visual-design-foundations-spinboxx

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Design teams often struggle to create cohesive visual languages across typography, color, spacing, and iconography, leading to inconsistent interfaces and higher QA costs.

Core Features & Use Cases

Establish design tokens for typography, color, and spacing to ensure consistency across products.
Build and maintain style guides and UI kits that document typography scales, color palettes, spacing grids, and icon systems.
Audit and improve visual hierarchy, accessibility, and theming (including dark mode) across platforms.

Quick Start

Create a cohesive visual design system by outlining typography scales, color tokens, spacing, and iconography guidelines.

Frequently Asked Questions about visual-design-foundations

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

FAQPage Schema

How do I build a cohesive visual design system with typography and color tokens?▼

To build a cohesive visual design system, establish standardized typography scales, color palettes, spacing grids, and iconography rules. This creates consistent tokens for unified UI components across multiple products.

What are design tokens and when do I need them for UI consistency?▼

Design tokens are standardized variables for typography, color, and spacing values. You need them to maintain visual consistency across products, reduce QA costs, and ensure interfaces adhere to a unified style guide.

Can I use this approach to audit visual hierarchy and accessibility across platforms?▼

Yes, you can audit and improve visual hierarchy and accessibility across platforms. This approach evaluates your typography, color contrast, and spacing rules to ensure interfaces meet accessibility and theming requirements.

How do I create dark mode theming rules for an existing UI style guide?▼

Creating dark mode theming rules involves defining alternative color tokens and adjusting visual hierarchy within your existing style guide. This ensures accessibility and consistent UIs when switching between light and dark themes.

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

The best way to standardize spacing and iconography is to define specific spacing grids and icon systems within a central style guide. This establishes clear rules that ensure consistent visual design across all products.

Do I need an existing UI kit to start defining visual design tokens?▼

No, you do not need an existing UI kit to start. You can outline typography scales, color tokens, spacing grids, and iconography guidelines from scratch to proactively build a cohesive visual design system.