skills.rest
boomNDS
boomNDSCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

visual-design-foundations

Create cohesive visual design systems with tokens, typography, color, spacing, and iconography.

Updated Mar 27, 2024
Search Tags:#typography#spacing#visual-design#iconography#design-systems#color-theory
One-click install
npx skills add https://github.com/boomNDS/new_portfolio --skill visual-design-foundations-boomnds
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-design-foundations
Source: https://github.com/boomNDS/new_portfolio/tree/main/.agents/skills/visual-design-foundations
Command: npx skills add https://github.com/boomNDS/new_portfolio --skill visual-design-foundations-boomnds

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Visual Design Foundations helps teams create cohesive, accessible design systems by aligning typography, color, spacing, and iconography across products.

Core Features & Use Cases

  • Establish design tokens for typography, color, spacing, and icons to ensure a scalable foundation.
  • Guide the creation of style guides and accessible visual patterns for multiple brands and products.
  • Audit visuals for consistency, support theming and dark mode, and streamline design-to-dev handoffs.

Quick Start

Describe your design system goals and I will generate a starter visual-design foundations outline.

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 from scratch?▼

To create a cohesive visual design system, you establish foundational design tokens for typography, color, spacing, and iconography. This Skill generates a starter outline and accessible visual patterns to align products and brands.

What are design tokens and how do they work for theming?▼

Design tokens are centralized variables for visual attributes like color and spacing. This Skill applies token-based theming to support scalable foundations, dark mode, and consistent visual outputs across multiple products.

How do I audit my existing visual design for consistency?▼

Auditing visual design for consistency involves evaluating typography, color systems, and spacing grids against established guidelines. This Skill helps review these elements to ensure accessible, cohesive patterns and streamlined handoffs.

Can I use this to generate a style guide for multiple brands?▼

Yes, you can generate style guides for multiple brands by defining scalable design tokens. This Skill guides the creation of accessible visual patterns and documentation tailored to support various brand identities and product lines.

What is the best way to align typography scales and spacing grids?▼

The best way to align typography scales and spacing grids is by mapping them to shared design tokens. This Skill provides token-based outputs to maintain proportional consistency and accessibility across your visual system.

Related Skills

Explore More Design & Creative Skills→
truchottruchot
2

direction-artistique

Define visual identity, brand language, and governance for projects.

Community
Advanced
bipinksbipinks
3

design-systems

Create token-based design systems with CSS variables and theming.

Community
Advanced
IFIR649IFIR649

visual-design-foundations

Build cohesive visual design systems with typography, color, spacing, and iconography tokens.

Community
Advanced
Prathviraj-jadhavPrathviraj-jadhav

visual-design-foundations

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

Community
Intermediate