skills.rest
duanbiao2000
duanbiao2000COMMUNITY
Explore all skills by this author →
WebsiteGitHub

visual-design-foundations

Define typography, color tokens, spacing scales, and iconography for visual design systems.

3|1|Updated Feb 3, 2026
Search Tags:#typography#spacing#visual-design#iconography#design-systems#color-theory
One-click install
npx skills add https://github.com/duanbiao2000/obsidianDoc26 --skill visual-design-foundations-duanbiao2000
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-design-foundations
Source: https://github.com/duanbiao2000/obsidianDoc26/tree/main/agents-main/plugins/ui-design/skills/visual-design-foundations
Command: npx skills add https://github.com/duanbiao2000/obsidianDoc26 --skill visual-design-foundations-duanbiao2000

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Design teams often struggle to build cohesive, scalable visual systems that align typography, color, spacing, and iconography across projects.

Core Features & Use Cases

  • Typography scale and line-height guidelines to establish hierarchy and readability.
  • 8-point spacing grid and tokens for consistent layouts across components.
  • Semantic color tokens and dark-mode strategy for accessible, maintainable palettes.
  • Scalable iconography system with tokens and guidelines for consistency.
  • Design-token workflows and style-guide foundations to support cross-project consistency.

Quick Start

Create a cohesive visual design foundation by defining typography, color tokens, spacing, and iconography for a brand.

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 that scales across multiple projects?▼

Build a cohesive visual design system by defining typography scales, semantic color tokens, 8-point spacing grids, and iconography guidelines to ensure consistent layouts across brand assets and products.

What is an 8-point spacing grid and how does it improve component layouts?▼

An 8-point spacing grid standardizes layout distances using multiples of eight, ensuring consistent visual rhythm and predictable component sizing across your design system tokens and style guides.

How do I create semantic color tokens that support dark mode?▼

Create semantic color tokens by mapping raw color values to contextual roles like surface or text, enabling maintainable palettes and accessible dark-mode strategies without hardcoding hex values.

What's the best way to establish typography hierarchy and readability for digital products?▼

Establish typography hierarchy by defining scale ratios, line-height guidelines, and font weights to create clear visual distinction and readability across your product interfaces and brand assets.

Can I use design tokens to manage iconography consistency across a product?▼

Yes, you can manage iconography consistency by defining scalable token systems and guidelines that standardize sizing, stroke widths, and styles across your entire design system.

Does this visual design approach work for both product interfaces and brand assets?▼

Yes, applying typography, color theory, spacing scales, and iconography fundamentals ensures cross-project consistency across tokens, style guides, and hierarchy improvements for both products and brand assets.

Related Skills

Explore More Design & Creative Skills→
apifyapify
239

Template for a customizable Skill Unit.

Official
Basic
zli5460zli5460
2

design-md

Create, validate, and export design tokens from structured files.

Community
Intermediate
lemulemu

visual-design-foundations

Standardize typography, color, spacing, and iconography into design tokens and guidelines.

Community
Intermediate
getcihubgetcihub
4

UI Design System

Define color palettes, typography, and reusable UI components for the Abacus dashboard.

Official
Intermediate