skills.rest
dominionism
dominionismCOMMUNITY
Explore all skills by this author →
GitHub

design-system

Implements frontend design systems with tokens, typography, color, motion, and component architecture.

1|Updated Mar 13, 2026
Search Tags:#typography#accessibility#responsive design#design system#css#design tokens#component architecture
One-click install
npx skills add https://github.com/dominionism/Noesis --skill design-system-dominionism
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/dominionism/Noesis/tree/main/assets/skills/design-system
Command: npx skills add https://github.com/dominionism/Noesis --skill design-system-dominionism

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building consistent, production-grade interfaces requires dozens of coordinated decisions about spacing, color, typography, and motion. Without a structured methodology, teams end up with hardcoded values, inconsistent spacing, inaccessible color contrast, and components missing critical states. ## Core Features & Use Cases - Design Token Systems: Defines spacing, shadow, radius, typography, and semantic color scales as CSS custom properties so no value is ever hardcoded. - Accessibility-First Color & Motion: Enforces WCAG AA contrast ratios, dark mode token sets, and prefers-reduced-motion handling. - Component Architecture: Structures components from tokens through primitives, composites, patterns, and templates, with a completeness checklist covering states, variants, and responsiveness. - Use Case: When building a new dashboard page, apply the layout grid, token scales, and component checklist to produce a responsive, accessible interface without inventing one-off values. ## Quick Start Use the design-system skill to build a responsive settings page with proper design tokens, accessible colors, and all component states.

Frequently Asked Questions about design-system

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

FAQPage Schema
How do I create a design token system in CSS?▼

Define tokens as CSS custom properties on :root, organized by purpose: spacing scales based on a 16px base unit, shadow and radius scales, and semantic color tokens like --color-accent and --color-text-primary. Components reference only these variables, never hardcoded values.

How to choose fonts for a web design system?▼

Select a high-x-height sans-serif or serif for body text at 14-16px, a distinctive display font for headings, and a monospace font that clearly distinguishes 0/O and 1/l/I for code. Pair one distinctive font with one neutral font to avoid competition.

What contrast ratio is required for WCAG AA compliance?▼

WCAG AA requires 4.5:1 contrast for body text, 3:1 for large text (18px+ or 14px+ bold), and 3:1 for UI components and graphical objects. Measure every text/background combination with a contrast checker rather than estimating.

How do I implement dark mode with CSS custom properties?▼

Define a separate token set inside a prefers-color-scheme: dark media query rather than inverting colors. Reduce saturation slightly on dark backgrounds, use lighter elevated surfaces instead of shadows for depth, and verify interactive states remain distinguishable.

What is the minimum touch target size for mobile buttons?▼

Buttons and icon buttons require a minimum 44x44px tap area per Apple HIG and WCAG 2.5.5, even if the visible icon is smaller. Form inputs should be at least 44px tall, and inline text links need 24px height with adequate spacing.

When should animation be avoided in UI design?▼

Avoid animation that serves no communicative purpose, such as decorative bouncing or parallax effects. Keep functional transitions between 150-300ms, and always honor prefers-reduced-motion by collapsing animation durations for users who request it.

Related Skills

Explore More Design & Creative Skills→
mewomewoliumewomewoliu
1

brand-director

Define brand positioning, personality, and visual identity into a Brand Framework.

Community
Advanced
schuettcschuettc
1

setup-frontend

Automate Vite + React frontend setup and deployment to S3 with CloudFront via CDK.

Community
Advanced
spencerpaulyspencerpauly
672

dark-mode-testing

Detect dark mode rendering defects by comparing light and dark browser states.

Community
Intermediate
tiantangcao1980-webtiantangcao1980-web
4

bootstrap

Create responsive interfaces with Bootstrap 5 components and Sass theming.

Community
Intermediate