How does it handle accessibility and color contrast?

It requires all color pairings to meet WCAG AA standards (4.5:1 for text) and utilizes the Okabe-Ito palette to ensure visibility for protanopia, deuteranopia, and tritanopia.

Does it include specific typography guidelines?

Yes, it provides a detailed typography scale where font sizes are paired with grid-snapped line heights and specific weights for hierarchy.

What is the primary spacing rule for this skill?

The skill enforces an 8px baseline grid for all spatial values, with 4px half-steps allowed only for micro-adjustments within components to ensure visual rhythm.

Can I use this for Mermaid diagrams?

Yes, the system is designed to map design tokens directly to Mermaid configuration properties, resulting in professional-grade diagrams.

Visual Design System Foundations

Name: Visual Design System Foundations
Author: nathanvale

bynathanvale

0•

Herramientas de Diseño

Implements professional design tokens and rules to create accessible, grid-aligned visual artifacts like diagrams, charts, and documentation.

This skill provides a comprehensive framework for creating high-quality visual artifacts within Claude. It enforces a strict 8px baseline grid for layout, ensures WCAG AA color contrast compliance, and utilizes the Okabe-Ito colorblind-safe palette for inclusive data visualization. By providing concrete tokens for typography, spacing, and stroke weights, it helps Claude generate consistent, polished, and professional-grade diagrams, charts, and presentations that scale perfectly across various display resolutions.

Características Principales

01Comprehensive typography scale with grid-snapped line heights

02Strict 8px baseline grid for consistent spatial rhythm and layout

03Accessibility-first Okabe-Ito colorblind-safe palettes for data viz

040 GitHub stars

05Standardized border and stroke scales for visual clarity and emphasis

06WCAG AA contrast-compliant color selection and pairing requirements

Casos de Uso

01Ensuring colorblind-safe data visualizations and charts in technical exports

02Generating accessible and professional Mermaid diagrams or flowcharts

03Designing consistent UI mockups or visual documentation layouts

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add nathanvale/side-quest-marketplace design-system

For use in Claude.ai and ChatGPT

Características Principales

01Comprehensive typography scale with grid-snapped line heights

02Strict 8px baseline grid for consistent spatial rhythm and layout

03Accessibility-first Okabe-Ito colorblind-safe palettes for data viz

040 GitHub stars

05Standardized border and stroke scales for visual clarity and emphasis

06WCAG AA contrast-compliant color selection and pairing requirements

Casos de Uso

01Ensuring colorblind-safe data visualizations and charts in technical exports

02Generating accessible and professional Mermaid diagrams or flowcharts

03Designing consistent UI mockups or visual documentation layouts

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add nathanvale/side-quest-marketplace design-system

For use in Claude.ai and ChatGPT