skills.rest
GrizzwaldHouse
GrizzwaldHouseCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/GrizzwaldHouse/cowork-skills --skill design-system-grizzwaldhouse
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
aymenhamoudiiaymenhamoudii

teach-impeccable

Extract design tokens and brand assets into .impeccable.md.

Community
Intermediate
scanbottscanbott

frontend-theme

Apply Rawgrowth design system tokens, typography, and layout before writing UI code.

Community
Advanced
jaydubya818jaydubya818

ui-ux-designer

Create user personas, wireframes, and design systems for mobile apps.

Community
Advanced
flpbaladaflpbalada
23

visual-cues-cta-psychology

Guide user gaze toward CTAs using F/Z patterns and visual hierarchy.

Community
Basic