skills.rest
Kraits
KraitsCOMMUNITY
Explore all skills by this author →
GitHub

visual-design-foundations

Codify typography, spacing, color, and iconography into a cohesive design system.

Updated Apr 20, 2026
Search Tags:#typography#design#accessibility#tokens#visual-design#dark-mode#color-system
One-click install
npx skills add https://github.com/Kraits/cxc-ace --skill visual-design-foundations-kraits
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-design-foundations
Source: https://github.com/Kraits/cxc-ace/tree/main/skills-backup/visual-design-foundations
Command: npx skills add https://github.com/Kraits/cxc-ace --skill visual-design-foundations-kraits

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Inconsistent typography, color, spacing, and iconography across products stem from ad hoc visual decisions; this skill provides a cohesive foundation to standardize design tokens and style systems.

Core Features & Use Cases

  • Establish scalable typography scales, spacing systems, and color palettes to ensure cross-channel consistency.
  • Design and audit icon systems, semantic tokens, and accessible palettes including dark-mode theming.
  • Build live design tokens and style guides to accelerate product development and maintain visual parity across platforms.

Quick Start

Install dependencies and begin implementing a design tokens workflow using Tailwind as demonstrated in the guide.

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 design token system for typography and spacing?▼

To create a design token system, codify typography scales, spacing rules, and color palettes into structured tokens. This establishes a cohesive visual foundation that standardizes cross-channel consistency across web and mobile platforms.

What is the best way to build an accessible color palette with dark-mode support?▼

Building an accessible color palette with dark-mode support requires defining semantic tokens and running accessibility checks. This ensures WCAG compliance across both light and dark themes while maintaining visual parity.

How do I standardize visual language across web and mobile projects?▼

Standardize visual language by codifying typography, spacing, color, and iconography into a unified design system. Applying structured token systems and responsive rules ensures scalable visual consistency across different platforms.

Can I implement a design tokens workflow using Tailwind?▼

Yes, you can implement a design tokens workflow using Tailwind. The skill demonstrates how to translate structured typography, spacing, and color tokens into Tailwind configurations to accelerate product development.

Why do I need semantic tokens for my style guide?▼

Semantic tokens are needed for style guides to map raw visual values to their specific UI context, ensuring accessibility checks pass and enabling seamless dark-mode theming without breaking visual parity.

What are the limitations of using ad hoc visual decisions for product design?▼

Relying on ad hoc visual decisions leads to inconsistent typography, color, and spacing across products. Without a cohesive design token foundation, maintaining accessibility checks and cross-platform visual parity becomes difficult.

Related Skills

Explore More Design & Creative Skills→
Arbab1308Arbab1308

tailwind-patterns

Standardize Tailwind CSS v4 patterns with CSS-first architecture and design tokens.

Community
Advanced
joneqianjoneqian

ui-ux-pro-max

Translate design goals into UI systems with tokens, components, and guidelines.

Community
Advanced
frankxaifrankxai
31

UI/UX Design Expert

Provide UI/UX design guidance covering WCAG 2.2 accessibility and design systems.

Community
Intermediate
Gekkos-techGekkos-tech
4

style-systems

Enforce a predefined visual style system across web and advertising projects.

Official
Advanced