skills.rest
motormetrics
motormetricsOFFICIAL
Explore all skills by this author →
Website𝕏@motormetricsGitHub

design-language-system

Document and implement Navy Blue design tokens as CSS variables for UI components and charts.

21|2|Updated Nov 5, 2023
Search Tags:#accessibility#dark-mode#css-variables#design-tokens#color-palette#design-language#ui-theming
One-click install
npx skills add https://github.com/motormetrics/motormetrics --skill design-language-system-motormetrics
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-language-system
Source: https://github.com/motormetrics/motormetrics/tree/main/.claude/skills/design-language-system
Command: npx skills add https://github.com/motormetrics/motormetrics --skill design-language-system-motormetrics

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Standardizes MotorMetrics' colour usage by documenting a Navy Blue design token system, eliminating ad-hoc colour choices and ensuring brand-consistent visuals.

Core Features & Use Cases

  • Colour system & tokens: Navy Blue palette, CSS variables, and token references across components and charts.
  • CSS variables & Semantic classes: Centralized tokens via CSS variables and HeroUI semantic classes for theme-consistent styling.
  • Migration & Accessibility: Guidelines for migrating existing colours and supporting dark mode and WCAG contrast in UI components.

Quick Start

Replace hardcoded colours with CSS variables and semantic classes in a new component.

Frequently Asked Questions about design-language-system

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

FAQPage Schema
How do I implement design tokens for consistent UI theming?▼

Implement design tokens by replacing hardcoded colours with CSS variables and semantic classes, ensuring centralized theme-consistent styling across all UI components and charts.

Does this design language system support dark mode and accessibility?▼

The design language system supports dark mode and accessibility by enforcing WCAG contrast considerations and semantic token usage across all UI components.

What is the best way to migrate existing colours to a design token system?▼

Migrate existing colours to the design token system by following documented guidelines to replace ad-hoc colour choices with standardized CSS variables and palette tokens.

How do CSS variables work with HeroUI semantic classes?▼

CSS variables work with HeroUI semantic classes by providing centralized token references that enforce brand-consistent visual styling and standardized theming.

Can I use these design tokens for chart colour theming?▼

You can use these design tokens for chart colour theming by applying the documented chart colour tokens to ensure colour consistency across data visualizations.

Why does my UI have inconsistent colours across components?▼

Inconsistent colours across components occur when using ad-hoc colour choices instead of a standardized design token system with centralized CSS variables.

Related Skills

Explore More Design & Creative Skills→
payloadcmspayloadcms
44.1k

ui4-review

Automate UI4 CSS migration reviews and auto-correct token violations.

Official
Intermediate
sgcarstrendssgcarstrends
21

design-language-system

Standardize UI and chart colors using navy design tokens and CSS variables.

Official
Basic
lexand-devlexand-dev

heroui-react

Develop React applications with HeroUI v3 components and Tailwind CSS v4 theming.

Community
Intermediate
teamniteoteamniteo
5

brand-designer

Generate WCAG-compliant brand color palettes using OKLCH hue rotation.

Official
Intermediate