visual-design-foundations

Standardize typography, spacing, color, and iconography into a visual design system.

Updated Mar 25, 2026

Search Tags:#typography #accessibility #spacing #visual-design #iconography #design-systems #color-theory

Ready to run

npx skills add https://github.com/Shaarav4795/ScholarFlow --skill visual-design-foundations-shaarav4795

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: visual-design-foundations
Source: https://github.com/Shaarav4795/ScholarFlow/tree/main/.agents/skills/visual-design-foundations
Command: npx skills add https://github.com/Shaarav4795/ScholarFlow --skill visual-design-foundations-shaarav4795

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Inconsistent visual language across projects leads to poor usability and brand drift. This skill provides a structured approach to typography, color systems, spacing, and iconography to create cohesive visual designs.

Core Features & Use Cases

Establishing a scalable typography system (font sizes, line heights) to ensure readable hierarchy.
Building a consistent 8-point spacing grid and spacing rules for components.
Defining semantic color tokens and accessible palettes for theming and dark mode.
Designing cohesive iconography and asset guidelines.
Use Case: When starting a new project or updating an existing design system, implement tokens and style guides to ensure visual consistency across platforms.

Quick Start

Draft a cohesive visual design system outline for typography, color, spacing, and iconography.

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 for multiple products?▼

Create a cohesive visual design system by standardizing typography, color, spacing, and iconography into structured tokens and style guides to prevent brand drift and ensure UI consistency across platforms.

What is an accessible color palette and how do I define semantic color tokens?▼

An accessible color palette uses semantic color tokens to define theming rules for light and dark modes, ensuring readable contrast ratios across UI components while maintaining a consistent visual language.

How do I build a scalable typography system with proper hierarchy?▼

Build a scalable typography system by standardizing font sizes and line heights into a structured scale, ensuring readable hierarchy across components and preventing inconsistent text styling within your design system.

Can I use an 8-point spacing grid for UI component design?▼

Yes, you can apply an 8-point spacing grid to establish consistent spacing rules for UI components, ensuring structured alignment and predictable layout scaling across your entire visual design system.

What is the best way to standardize iconography guidelines in a design system?▼

The best way to standardize iconography is to define cohesive asset guidelines within your style guide, ensuring visual consistency and proper usage rules for all icons used across products.

When do I need to perform a UI audit for visual design consistency?▼

Perform a UI audit when updating an existing design system to identify inconsistencies in typography, spacing, or color tokens, ensuring the finalized style guide eliminates poor usability and brand drift.