skills.rest
fishyer
fishyerCOMMUNITY
Explore all skills by this author →
GitHub

visual-design-foundations

Implement typography, color, and spacing systems for web and UI design.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill helps you build cohesive and accessible visual designs by applying typography, color theory, spacing systems, and iconography principles.

Core Features & Use Cases

  • Typography Scale: Establishes a modular scale for consistent typographic hierarchy.
  • Spacing System: Defines an 8-point grid and semantic spacing tokens for consistent layout.
  • Color System: Provides a comprehensive color system with semantic tokens and accessibility considerations.
  • Iconography: Offers guidance on icon sizing and component usage.
  • Best Practices: Lists common issues and solutions for design consistency, accessibility, and responsiveness.

Quick Start

Load the visual-design-foundations skill to understand typography, color, and spacing systems for cohesive design.

Frequently Asked Questions about visual-design-foundations

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

FAQPage Schema
How do I establish a consistent typography scale for web and UI design?▼

Establish a consistent typography scale by applying a modular scale to define typographic hierarchy. This approach ensures cohesive text sizing across interface components and design systems.

What is an 8-point grid spacing system and how does it improve layout consistency?▼

An 8-point grid spacing system defines semantic spacing tokens to structure UI layouts. Using this grid ensures consistent visual rhythm, alignment, and predictable spacing across all interface components.

How do I create a color system with semantic tokens and accessibility considerations?▼

Create an accessible color system by defining semantic tokens that map to specific UI roles. This ensures proper contrast ratios and consistent color usage across web and interface design components.

Do I need to understand CSS and design theory to build a visual design system?▼

Yes, you need CSS and design theory understanding to implement these visual design foundations. This knowledge is required for applying typography, color, and spacing systems to style guides and interface components.

What are the best practices for iconography sizing and usage in UI components?▼

Best practices for iconography involve following specific sizing guidelines to ensure visual consistency within UI components. Proper icon scaling maintains alignment with typography and spacing systems for accessible interfaces.

Related Skills

Explore More Design & Creative Skills→
yashvinthanyashvinthan

visual-design-foundations

Generate design tokens and style guides for accessible user interfaces.

Community
Intermediate
JhabbigJhabbig

visual-design-foundations

Establish visual design systems from typography, color, spacing, and iconography standards.

Community
Intermediate
KrisWemetKrisWemet

frontend-design

Guide designers and developers to create production-grade frontend interfaces with design tokens.

Community
Advanced
AshesOfTheUndeadAshesOfTheUndead

pacman

Standardize retro arcade UI design systems within Roblox frameworks.

Community
Intermediate