skills.rest
Baronki
BaronkiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

visual-design-foundations

Establish design tokens for typography, color, spacing, and iconography.

1|Updated Mar 21, 2026
Search Tags:#typography#design#accessibility#tokens#color#design-system#iconography
One-click install
npx skills add https://github.com/Baronki/KISWARM8.0 --skill visual-design-foundations-baronki
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-design-foundations
Source: https://github.com/Baronki/KISWARM8.0/tree/main/kiswarm7_remote/skills/visual-design-foundations
Command: npx skills add https://github.com/Baronki/KISWARM8.0 --skill visual-design-foundations-baronki

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill helps teams build cohesive, accessible visual systems that ensure typography, color, spacing, and iconography stay consistent across products.

Core Features & Use Cases

  • Establish typography systems, color palettes, spacing tokens, and icon systems to enforce consistency.
  • Build or audit style guides and design tokens to support theming and accessibility.
  • Real-world use case: align product UI with a shared visual language across platforms and maintain accessible contrast.

Quick Start

Provide a cohesive visual design outline for a new project, including typography, color, spacing, and icons.

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 design system with consistent typography and color tokens?▼

Establish a cohesive visual system by defining typography scales, color palettes, spacing tokens, and iconography. This approach ensures UI consistency and accessible contrast across different platforms and product themes.

What's the best way to audit a style guide for accessibility and theming?▼

Audit style guides by reviewing design tokens for color contrast, typography legibility, and spacing consistency. This validates accessibility considerations and ensures proper theming support across product UI.

How do design tokens work with typography and color systems?▼

Design tokens centralize typography scales, color palettes, and spacing values into a shared visual language. Applying these tokens maintains consistency and supports dynamic theming across multiple platforms.

Can I use this approach to align product UI across multiple platforms?▼

Yes, establishing a shared visual language with token-driven typography, color systems, and iconography aligns product UI across platforms. It maintains accessible contrast and visual consistency throughout different themes.

How do I establish an accessible color palette and spacing scale?▼

Build an accessible color palette and spacing scale by defining design tokens that enforce contrast standards. This approach integrates accessibility considerations directly into the foundational visual system.

Related Skills

Explore More Design & Creative Skills→
CrazySwamiCrazySwami
5

brand-guide

Generate HTML or Markdown brand guides documenting colors, typography, and responsive specs.

Community
Intermediate
Abrahan-EagleAbrahan-Eagle
1

zonix-ui-design

Reconcile visual design decisions into a cohesive Flutter UI system.

Community
Advanced
AshesOfTheUndeadAshesOfTheUndead

professional

Standardize Roblox UI design systems with semantic design tokens and WCAG 2.2 accessibility rules.

Community
Intermediate
projectedanxprojectedanx
1

concept-diagrams

Generates standalone HTML files with minimal SVG diagrams for educational and technical use.

Community
Intermediate