visual-design-foundations

Provide typography, color, spacing, and iconography guidelines for design systems.

Updated May 30, 2026

Search Tags:#typography #accessibility #design system #visual design #color theory #iconography

Ready to run

npx skills add https://github.com/sandeshbagmare/AgenticQ --skill visual-design-foundations-sandeshbagmare

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: visual-design-foundations
Source: https://github.com/sandeshbagmare/AgenticQ/tree/main/examples/portfolio_site/.claude/plugins/ui-design/skills/visual-design-foundations
Command: npx skills add https://github.com/sandeshbagmare/AgenticQ --skill visual-design-foundations-sandeshbagmare

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill assists in creating a consistent and accessible visual design by providing foundational principles and guidelines for typography, color, spacing, and iconography.

Core Features & Use Cases

Typography Scale and Guidelines: Offers modular scale and line height recommendations for consistent text presentation.
Spacing System: Defines an 8-point grid system for maintaining visual rhythm and alignment.
Color System: Provides semantic color tokens and guidelines for accessibility.
Iconography: Offers a sizing system and a component for using SVG icons.
Best Practices: Includes guidelines for font pairing, responsive typography, readability, and font pairing.

Quick Start

Establish a design token for your new project using the visual-design-foundations skill.

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 cohesive design system for visual consistency?▼

Establish a cohesive design system by applying foundational guidelines for typography, color, spacing, and iconography. This approach ensures visual consistency and accessibility across your project components and style guides.

What is an 8-point grid system and how does it improve visual hierarchy?▼

An 8-point grid system is a spacing framework that defines visual rhythm and alignment. Using this system improves visual hierarchy by ensuring consistent spacing relationships between elements across your interface.

How do I create semantic color tokens for accessibility in CSS?▼

Create semantic color tokens by defining colors based on their purpose rather than raw values. This approach ensures accessibility by maintaining consistent contrast ratios and meaningful color usage across your design system.

Can I use this visual design foundation with responsive design principles?▼

Yes, this visual design foundation works with responsive design principles. It provides guidelines for responsive typography and modular scale recommendations that adapt text presentation across different viewport sizes.

What's the best way to structure a typography scale for web design?▼

Structure a typography scale using modular scale and line height recommendations. This method ensures consistent text presentation and readability while maintaining visual hierarchy across your web design components.

Do I need knowledge of HTML and CSS to implement these design system guidelines?▼

Yes, implementing these design system guidelines requires knowledge of HTML and CSS. Understanding responsive design principles is also necessary to properly apply the typography, color, and spacing systems.