skills.rest
felipesantiago-coder
felipesantiago-coderCOMMUNITY
Explore all skills by this author →
GitHub

visual-design-foundations

Standardize typography, color, spacing, and iconography for accessible UI design.

Updated Apr 7, 2026
Search Tags:#typography#visual design#design tokens#iconography#style guides#color accessibility#spacing systems
One-click install
npx skills add https://github.com/felipesantiago-coder/fluxo-quadra --skill visual-design-foundations-felipesantiago-coder
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-design-foundations
Source: https://github.com/felipesantiago-coder/fluxo-quadra/tree/main/skills/visual-design-foundations
Command: npx skills add https://github.com/felipesantiago-coder/fluxo-quadra --skill visual-design-foundations-felipesantiago-coder

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill eliminates the common pain points of disjointed, inaccessible, and inconsistent visual designs across digital products, which damage user experience, reduce brand cohesion, and create unnecessary rework for design and engineering teams.

Core Features & Use Cases

  • Typography Systems: Build modular type scales, implement responsive fluid typography, and select accessible font pairings for optimal readability across devices.
  • Color & Accessibility: Create WCAG-compliant color palettes, implement dark mode theming, and verify contrast ratios to ensure designs work for all users.
  • Spacing & Iconography: Standardize 8-point grid spacing systems, create consistent icon sizing rules, and maintain visual rhythm across all UI components.
  • Real-World Use Case: Use this Skill to build a complete design token system for a new e-commerce platform, ensuring all product pages, checkout flows, and marketing assets follow consistent visual rules from launch.

Quick Start

Use the visual-design-foundations skill to generate a full set of accessible design tokens for a new mobile app, including typography scales, semantic color variables, and 8-point spacing values aligned to WCAG standards.

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 design token system for a new mobile app?▼

To build a design token system, generate standardized semantic color variables, modular type scales, and 8-point spacing values aligned to WCAG standards. This eliminates inconsistent visual designs by providing accessible, reusable variables for web and mobile interfaces.

How do I create a WCAG-compliant color palette for dark mode?▼

Create a WCAG-compliant color palette by implementing dark mode theming and verifying contrast ratios to ensure designs work for all users. This process standardizes semantic color variables and eliminates inaccessible digital product designs that fail accessibility audits.

What's the best way to standardize UI component spacing and iconography?▼

Standardize UI component spacing and iconography by applying an 8-point grid spacing system and creating consistent icon sizing rules. This maintains visual rhythm across all UI components, eliminating disjointed and inconsistent visual designs across digital products.

How do I set up responsive fluid typography for web and mobile interfaces?▼

Set up responsive fluid typography by building modular type scales and selecting accessible font pairings for optimal readability across devices. This standardizes typography systems for UI components, ensuring consistent text rendering across web and mobile platforms.

Do I need an existing style guide to implement modular type scales?▼

You do not need an existing style guide to implement modular type scales. This skill provides standardized visual design foundations that can be used for style guide creation from scratch or to standardize existing UI components for web and mobile interfaces.

Why does my digital product design fail color accessibility compliance auditing?▼

Digital product designs fail color accessibility compliance auditing when they lack WCAG-conformant color contrast and semantic design token implementation. Verifying contrast ratios and creating compliant color palettes ensures designs meet accessibility standards for all users.

Related Skills

Explore More Design & Creative Skills→
Kirankumar2604Kirankumar2604

branding-generator

Generate brand identity kits with naming, color palettes, and typography.

Community
Advanced
vinnie357vinnie357
24

material-design

Implement Material Design 3 theming and components across Android, web, and Flutter.

Community
Intermediate
abbas133abbas133
1

ui-ux-expert

Guide teams in designing accessible, scalable UI with design tokens and WCAG compliance.

Community
Advanced
lehuuhau1231lehuuhau1231

lint-and-validate

Run linting and type checking across multiple programming ecosystems.

Community
Intermediate