design-language-system
OfficialApply design tokens and brand colors.
Authorsgcarstrends
Version1.0.0
Installs0
System Documentation
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.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: design-language-system Download link: https://github.com/sgcarstrends/sgcarstrends/archive/main.zip#design-language-system Please download this .zip file, extract it, and install it in the .claude/skills/ directory.