visual-design-foundations

Name: visual-design-foundations
Availability: InStock
Author: jacob-balslev

Guide palette, typography, spacing, density, and grouping choices for visual hierarchy audits.

1|Updated May 6, 2026

Search Tags:#typography #color palette #visual hierarchy #spacing rhythm #ui design audit #design system boundaries

Ready to run

npx skills add https://github.com/jacob-balslev/skill-graph --skill visual-design-foundations-jacob-balslev

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: visual-design-foundations
Source: https://github.com/jacob-balslev/skill-graph/tree/main/marketplace/skills/visual-design-foundations
Command: npx skills add https://github.com/jacob-balslev/skill-graph --skill visual-design-foundations-jacob-balslev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Visual-design-foundations helps you design and audit interface craft so users can scan quickly, understand hierarchy instantly, and experience a coherent visual tone.

Core Features & Use Cases

Visual direction for UI surfaces: Guides palette roles, typography roles, spacing rhythm, density, elevation, and grouping so visual hierarchy supports the underlying structure.
Design-audit checklist for polish: Provides practical verification points to catch issues like unclear primary content, inconsistent type roles, noisy elevation, and overly dense layouts.
Boundary-aware design routing: Prevents scope creep by explicitly handing off meaning semantics to semiotics, token/component governance to design-system-architecture, responsive structure to layout-composition, and accessibility compliance to a11y.

Quick Start

Ask for a visual audit of this screen by name, describing its purpose and tone, and request recommendations for palette roles, type roles, spacing and density rules, and the visual hierarchy priorities.

Frequently Asked Questions about visual-design-foundations

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I audit visual hierarchy in a user interface?▼

Visual hierarchy audit involves evaluating palette roles, typography roles, spacing rhythm, and grouping choices to ensure primary content is clear. This process catches issues like inconsistent type roles and noisy elevation.

What is spacing rhythm and how does it affect UI design?▼

Spacing rhythm is the systematic application of spatial intervals between UI elements. It affects UI design by controlling density and grouping, which directly impacts how quickly users can scan and comprehend visual hierarchy.

How do I structure a color palette for dashboard interfaces?▼

Structuring a color palette for dashboards involves defining specific palette roles for backgrounds, surfaces, text, and accents. This ensures visual hierarchy supports the underlying data structure and maintains a coherent visual tone.

When should I use a visual design audit instead of a design system audit?▼

Use a visual design audit when you need to assess visual hierarchy, palette roles, and spacing rhythm for scan speed and legibility. Choose a design system audit instead when you need token governance or component architecture validation.

What are the limitations of auditing visual hierarchy for web pages?▼

Auditing visual hierarchy focuses strictly on palette, typography, spacing, and density. It does not cover responsive layout structure, accessibility compliance, contrast validation, or meaning semantics, which require routing to specialized skills.