design-language-system

Name: design-language-system
Availability: InStock
Author: sgcarstrends

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

Ready to run

npx skills add https://github.com/sgcarstrends/sgcarstrends --skill design-language-system

💬 Prompt for ChatGPT / Claude Chat▼

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.