visual-design-foundations

Name: visual-design-foundations
Availability: InStock
Author: ekrem

Establish design tokens, style guides, and dark mode theming for visual systems.

Updated Mar 18, 2026

Search Tags:#typography #accessibility #spacing #visual-design #iconography #design-systems #color-system

Ready to run

npx skills add https://github.com/ekremmkasap/jarvis --skill visual-design-foundations-ekremmkasap

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: visual-design-foundations
Source: https://github.com/ekremmkasap/jarvis/tree/main/server/agent_prompts/wshobson/plugins/ui-design/skills/visual-design-foundations
Command: npx skills add https://github.com/ekremmkasap/jarvis --skill visual-design-foundations-ekremmkasap

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Visual designers often struggle to create and maintain cohesive visual systems across typography, color, spacing, and iconography, leading to inconsistent interfaces and longer design cycles.

Core Features & Use Cases

Establish typography scales, spacing grids, and color systems to build accessible, scalable design tokens.
Create and maintain style guides, icon systems, and theming to ensure visual consistency across products.
Audit designs for hierarchy, accessibility, and theming across light/dark modes and responsive breakpoints.

Quick Start

Open a design mock and apply the typography, color, spacing, and iconography guidelines to align with the brand system.

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 scalable design tokens for typography and color systems?▼

Build scalable design tokens by establishing typography scales, semantic color logic, and spacing grids to ensure visual consistency. This approach creates accessible, maintainable design tokens that support responsive breakpoints and theming across real-world products.

What is the best way to audit visual hierarchy for accessibility and dark mode?▼

Audit visual hierarchy by evaluating accessible contrast ratios, theming rules, and responsive breakpoints across light and dark modes. This process identifies inconsistencies in spacing and typography, ensuring interfaces meet accessibility standards while maintaining a cohesive visual system.

How do I create a consistent icon system for a design system?▼

Create a consistent icon system by defining iconography guidelines that align with your brand's visual design tokens. Applying standardized spacing and semantic color logic ensures icons integrate seamlessly into the broader design system across all responsive breakpoints.

Can I use semantic color logic to support both light and dark mode theming?▼

Semantic color logic supports light and dark mode theming by mapping color tokens to functional roles rather than raw hex values. This ensures accessible contrast is maintained automatically when switching between themes across your design system.

Why does my visual design system break across different responsive breakpoints?▼

Visual design systems break across responsive breakpoints when typography scales and spacing grids lack scalable design tokens. Establishing responsive typography and consistent spacing rules ensures interfaces adapt smoothly without losing visual hierarchy or accessibility.

Do I need a style guide to maintain spacing and typography consistency?▼

A style guide is essential for maintaining spacing and typography consistency. It documents your design tokens, scalable spacing grids, and iconography rules, ensuring teams apply cohesive visual systems efficiently and reducing inconsistent interface design cycles.