skills.rest
Prathviraj-jadhav
Prathviraj-jadhavCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

visual-design-foundations

Apply typography, color, spacing, and iconography to create design tokens and style guides.

Updated Apr 11, 2026
Search Tags:#typography#visual-design#design-tokens#iconography#color-theory#spacing-system
One-click install
npx skills add https://github.com/Prathviraj-jadhav/nexgen-elit-website --skill visual-design-foundations-prathviraj-jadhav
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-design-foundations
Source: https://github.com/Prathviraj-jadhav/nexgen-elit-website/tree/main/.agent/skills/visual-design-foundations
Command: npx skills add https://github.com/Prathviraj-jadhav/nexgen-elit-website --skill visual-design-foundations-prathviraj-jadhav

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Bridge brand strategy and visual execution by applying typography, color theory, spacing, and iconography.

Core Features & Use Cases

  • Establish design tokens for consistent tokens across products and platforms.
  • Build comprehensive style guides to enforce typography, spacing, color, and iconography systems.
  • Align design outputs to improve visual hierarchy and accessibility across teams.

Quick Start

Create a starter visual design system by defining typography scale, spacing grid, color tokens, and an icon library for a new 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 design tokens for a visual design system?▼

Create design tokens by defining typography scales, grid-based spacing, semantic color tokens, and an icon library to establish consistent visual execution across products and platforms.

What is the best way to build a style guide for typography and spacing?▼

Build a comprehensive style guide by enforcing grid-based spacing systems, typography scales, and consistent iconography to align design outputs and improve visual hierarchy across teams.

Can I use semantic color tokens to improve accessibility in my design system?▼

Yes, you can apply semantic color tokens alongside typography and spacing guidelines to enforce accessible visual systems and improve visual hierarchy across projects.

How do I bridge brand strategy and visual execution across multiple platforms?▼

Bridge brand strategy and visual execution by applying color theory, typography, spacing, and iconography guidelines to establish cohesive visual systems across projects and platforms.

What do I need to establish a starter visual design system for a new project?▼

To establish a starter visual design system, define a typography scale, spacing grid, color tokens, and an icon library to ensure consistent visual execution across the new project.

Related Skills

Explore More Design & Creative Skills→
civictechdccivictechdc
1

visual-design-foundations

Creates visual systems with typography, color, spacing, and iconography guidelines.

Official
Intermediate
d3mingd3ming

frontend-design

Design frontend interfaces with visual thesis, interaction plans, and browser automation verification.

Community
Advanced
lemulemu

visual-design-foundations

Standardize typography, color, spacing, and iconography into design tokens and guidelines.

Community
Intermediate
arvindbattulaarvindbattula

design-typography

Audit font choices, hierarchy, and readability to produce consistent typography systems.

Community
Intermediate