skills.rest
sgcarstrends
sgcarstrendsOFFICIAL
Explore all skills by this author →
GitHub

design-language-system

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill standardizes the design language by documenting and applying tokens, CSS variables, and brand colors to ensure consistent visuals across components and charts.

Core Features & Use Cases

  • Design tokens: Document and share color tokens and semantic variables.
  • CSS variables & semantic classes: Encourage reuse of the brand palette.
  • Chart colour guides: Provide safe palettes for data visualization.

Quick Start

Implement the navy color token in a new React chart component and replace hex colors with tokens.

Frequently Asked Questions about design-language-system

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

FAQPage Schema
How do I standardize color usage across UI components with design tokens?▼

Design tokens standardize color usage by centralizing brand colors as CSS variables and semantic classes. Replace arbitrary hex values with token variables like var(--primary) and var(--chart-1), then apply them consistently across components and data visualizations to enforce a unified palette.

What's the best way to migrate existing hex colors to design tokens in my codebase?▼

Migrate hex colors by identifying arbitrary color values in your code, mapping them to the approved design token palette, and replacing them with CSS variables or HeroUI semantic classes. This ensures all colors reference the centralized design language and remain maintainable.

How do I apply a consistent color scheme to charts and data visualizations?▼

Apply chart color schemes by using the provided safe palettes from your design tokens instead of arbitrary colors. Use CSS variables and Tailwind color mappings to ensure all data visualizations pull from the approved brand palette and maintain visual consistency.

Can I use design tokens with Tailwind and HeroUI components?▼

Yes. Design tokens integrate with both Tailwind color mappings and HeroUI semantic classes. CSS variables work across all three, allowing you to style new components and enforce token-based colors consistently within your existing tech stack.

Why should I enforce design tokens in code reviews?▼

Enforcing design tokens in code reviews prevents color inconsistency and drift from the approved palette. It maintains brand integrity, simplifies maintenance, and catches arbitrary hex values before they fragment your design language across components.

Related Skills

Explore More Design & Creative Skills→
rungchan2rungchan2
2

design-system-generator

Generate design system documentation and color palettes from brand inputs.

Community
Intermediate
gileckgileck

theming-guidelines

Enforce semantic color tokens and consistent component styles in React/Next.js projects.

Community
Basic
beemanbeeman
12

heroui-react

Implement HeroUI v3 components in React with Tailwind CSS v4 theming.

Community
Intermediate
endlessblinkendlessblink

Implement UI/UX Fixes

Replace hardcoded values with design tokens and standardize UI components.

Community
Intermediate