skills.rest
jitenkr2030
jitenkr2030COMMUNITY
Explore all skills by this author →
WebsiteGitHub

visual-design-foundations

Define typography, color, spacing, and iconography design tokens for UI systems.

Updated Mar 5, 2026
Search Tags:#typography#spacing#style-guide#visual-design#design-tokens#iconography#color-system
One-click install
npx skills add https://github.com/jitenkr2030/QR-Based-Guard-Attendance-Patrol-Proof-System --skill visual-design-foundations-jitenkr2030
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-design-foundations
Source: https://github.com/jitenkr2030/QR-Based-Guard-Attendance-Patrol-Proof-System/tree/main/skills/visual-design-foundations
Command: npx skills add https://github.com/jitenkr2030/QR-Based-Guard-Attendance-Patrol-Proof-System --skill visual-design-foundations-jitenkr2030

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Visual design inconsistencies across products lead to fragmented user experiences. This skill provides a framework to unify typography, color, spacing, and iconography into a single, accessible visual language.

Core Features & Use Cases

  • Establishing design tokens for a new project
  • Creating or refining a spacing and sizing system
  • Selecting and pairing typefaces
  • Building accessible color palettes
  • Designing icon systems and visual assets
  • Improving visual hierarchy and readability
  • Auditing designs for visual consistency
  • Implementing dark mode or theming

Quick Start

Create a cohesive visual design foundation by defining typography scale, spacing tokens, color tokens, and iconography guidelines for your 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 new project?▼

You establish visual design foundations by defining typography scales, spacing grids, color tokens, and iconography guidelines into a unified style guide. This framework ensures consistency and accessibility across real-world UI tasks.

What is the best way to build an accessible color palette for UI?▼

Building an accessible color palette involves establishing color governance with defined tokens that meet accessibility benchmarks for contrast and readability. This ensures your visual system remains inclusive while supporting scalable theming like dark mode.

How do I set up a spacing and sizing system for design consistency?▼

Setting up a spacing system requires defining a spacing grid using scalable design tokens that govern sizing across your UI. This framework eliminates visual inconsistencies and ensures cohesive layouts throughout your products.

Can I use this visual design framework to audit existing style guides?▼

Yes, you can audit existing style guides by reviewing them against established typography scales, spacing grids, and accessibility benchmarks. This process identifies visual inconsistencies and helps maintain cohesive design governance across products.

Does this approach support implementing dark mode and theming?▼

Yes, implementing dark mode and theming is supported through defined color tokens and governance systems. By structuring your visual design foundations with scalable tokens, you can seamlessly toggle between themes while maintaining accessibility benchmarks.

Related Skills

Explore More Design & Creative Skills→
xpert-aixpert-ai
8

ideate

Generate three distinct on-brand UI design variants from confirmed briefs.

Official
Intermediate
bykoleksii-hardobykoleksii-hardo

ckm:design-system

Generate CSS variables from design tokens JSON configurations.

Community
Advanced
ihlamuryihlamury
73

planetscale-ui-skills

Enforce Planetscale UI design tokens, dark mode, Inter font, and 4px grid.

Community
Intermediate
mikeparcewskimikeparcewski
8

screenshot

Analyze UI screenshots for layout, color, typography, and design consistency.

Community
Intermediate