design-system

Apply design principles for color, typography, layout, and accessibility standards.

6|1|Updated Feb 10, 2026

Search Tags:#typography #design #ui #accessibility #layout #color theory #ux

Ready to run

npx skills add https://github.com/GrizzwaldHouse/cowork-skills --skill design-system-grizzwaldhouse

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/GrizzwaldHouse/cowork-skills/tree/main/skills/design-system
Command: npx skills add https://github.com/GrizzwaldHouse/cowork-skills --skill design-system-grizzwaldhouse

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a comprehensive set of design principles and best practices to ensure visual consistency, usability, and accessibility across all design outputs.

Core Features & Use Cases

Color Theory: Guidance on contrast ratios, color palettes, and semantic meaning.
Typography: Rules for font pairings, type scales, line height, and readability.
Layout: Principles for grids, spacing, alignment, and composition patterns.
Accessibility: Checklist to ensure designs meet WCAG standards.
Use Case: When designing a new dashboard, apply the 8px base spacing scale, choose a font pairing from the reference, and ensure all text meets WCAG AA contrast ratios.

Quick Start

Apply the design system principles to the attached wireframes for a new mobile app.

Frequently Asked Questions about design-system

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

FAQPage Schema

What design principles should I follow for visual consistency and accessibility?▼

Design principles for visual consistency include applying standard color theory, typography rules, layout grids, and WCAG accessibility checklists to ensure user-friendly and accessible digital and print materials.

How do I choose font pairings and type scales that meet readability standards?▼

To choose font pairings and type scales for readability, apply foundational typography rules that define line height, spacing, and font combinations to create visually appealing and accessible text.

Can I use a standard spacing scale to improve layout alignment in UI design?▼

Yes, you can use an 8px base spacing scale to improve layout alignment in UI design, ensuring consistent spacing, structural composition, and brand consistency across digital materials.

What's the best way to ensure my dashboard design meets WCAG accessibility standards?▼

The best way to ensure dashboard designs meet WCAG accessibility standards is to apply defined contrast ratios, semantic color palettes, and accessibility checklists during the visual output process.

Does this approach provide rules for color contrast ratios and semantic meaning?▼

Yes, this approach provides specific color theory guidance on contrast ratios, color palettes, and semantic meaning to guarantee visual consistency and accessibility across all design outputs.