skills.rest
civictechdc
civictechdcOFFICIAL
Explore all skills by this author →
WebsiteGitHub

visual-design-foundations

Creates visual systems with typography, color, spacing, and iconography guidelines.

1|Updated Jul 24, 2025
Search Tags:#typography#design#accessibility#spacing#style-guide#iconography#color-theory
One-click install
npx skills add https://github.com/civictechdc/votecatcher --skill visual-design-foundations-civictechdc
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-design-foundations
Source: https://github.com/civictechdc/votecatcher/tree/main/frontend/.agent/skills/visual-design-foundations
Command: npx skills add https://github.com/civictechdc/votecatcher --skill visual-design-foundations-civictechdc

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Visual design teams often struggle to create cohesive, accessible visual systems that scale across products and platforms, leading to inconsistent experiences.

Core Features & Use Cases

  • Establishing typography scales, color tokens, spacing systems, and iconography guidelines.
  • Building design tokens and style guides to ensure visual hierarchy and accessibility.
  • Real-world use: applying a unified design system across a product family to improve readability and brand consistency.

Quick Start

Define a unified typography scale, color tokens, and spacing system for a new project.

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

Create a cohesive visual design system by defining unified typography scales, color tokens, and spacing grids to establish a consistent UI hierarchy. This ensures brand consistency and accessibility across products and platforms.

What is a design token and how does it improve accessibility in UI hierarchy?▼

A design token codifies visual guidelines for typography scales, color palettes, and spacing systems. Using tokens ensures accessible contrast ratios and a consistent UI hierarchy across different product interfaces.

Can I use this visual design approach to build a style guide for multiple platforms?▼

Yes, you can apply this visual design approach to build style guides across multiple platforms. It codifies iconography and spacing guidelines, enabling designers to ensure accessibility and brand consistency across a product family.

What's the best way to establish a typography scale and spacing grid for a new project?▼

The best way to establish typography scales and spacing grids is to codify them into design tokens early. This creates a unified foundation for visual hierarchy and readability in your new project.

Why does my design system lack visual hierarchy and brand consistency across products?▼

Your design system lacks visual hierarchy and brand consistency because it does not use unified design tokens. Establishing codified typography scales, color tokens, and iconography guidelines solves this inconsistency.

Related Skills

Explore More Design & Creative Skills→
niiiusburoniiiusburo

extract

Extract reusable UI components and design tokens from a codebase.

Community
Advanced
Higashi-KotaHigashi-Kota

ui-theme

Generate CSS variables and Tailwind theme from JSON design tokens.

Community
Intermediate
HemanthTennetiHemanthTenneti

normalize

Normalize frontend UI components to match design system standards and tokens.

Community
Intermediate
bdbchbdbch
2

design-compliance

Audit web design compliance against contrast, spacing, typography, and hit target standards.

Community
Advanced