skills.rest
NeuronioAzul
NeuronioAzulCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

visual-design-foundations

Apply typography, color, and spacing principles to create cohesive interface design systems.

Updated Apr 2, 2026
Search Tags:#typography#accessibility#style guide#visual design#color theory#iconography
One-click install
npx skills add https://github.com/NeuronioAzul/shipit --skill visual-design-foundations-neuronioazul
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-design-foundations
Source: https://github.com/NeuronioAzul/shipit/tree/main/.agents/skills/visual-design-foundations
Command: npx skills add https://github.com/NeuronioAzul/shipit --skill visual-design-foundations-neuronioazul

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill helps designers establish consistent visual languages by applying principles of typography, color, spacing, and iconography, ensuring visual harmony across products and interfaces.

Core Features & Use Cases

  • Design System Foundations: Build and refine style guides and design tokens for brand consistency.
  • Accessibility & Readability: Optimize color palettes and typography for inclusivity and clarity.
  • Use Case: A team is launching a mobile app and needs a scalable set of visual assets, including accessible color schemes and typography pairings for responsive layouts.

Quick Start

Use the visual design foundations skill to create a color palette and typography system for a new branding project.

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 a new UI project?▼

Create a visual design system by applying principles of typography, color, and spacing to produce cohesive interfaces. This Skill generates style tokens, typography scales, and color systems to establish consistent visual hierarchies across your product.

What is the best way to build accessible color palettes and typography scales?▼

Build accessible color palettes and typography scales by optimizing visual assets for inclusivity and clarity. The system applies foundational visual design principles to ensure readability and accessibility standards are met across responsive layouts.

Can I use this to generate design tokens for a mobile app style guide?▼

Yes, you can generate design tokens and style guides for a mobile app. It targets UI/UX designers and front-end developers needing systematic styling solutions, providing scalable visual assets like accessible color schemes and typography pairings.

How does systematic spacing and iconography improve visual harmony across interfaces?▼

Systematic spacing and iconography improve visual harmony by enforcing consistent visual languages. Applying these foundational design principles ensures interface elements align cohesively, maintaining brand consistency and structural balance throughout the product.

What do I need to implement consistent visual hierarchies for front-end development?▼

Implementing consistent visual hierarchies requires style tokens, typography scales, and color systems. These foundational elements allow front-end developers to translate visual design principles into structured, accessible, and scalable interface styling solutions.

Related Skills

Explore More Design & Creative Skills→
vobasevobase
59

teach-impeccable

Scan project files and write design context to CLAUDE.md.

Official
Intermediate
johnlindquistjohnlindquist
24

design

Manage design tokens and export them to CSS, JSON, and Tailwind config.

Community
Advanced
PeterHddPeterHdd
27

cleanui

Improve AI-generated user interfaces with design best practices and layout intelligence.

Community
Advanced
wpgauravwpgaurav
14

design-systems

Generate topic-specific design directions for web typography, color, motion, and grid.

Community
Advanced