css-design-tokens
CommunityDefine design tokens and a color system for UI.
Design & Creative#typography#design system#color palette#css variables#theme colors#css design tokens#spacing system
Authoralongor666
Version1.0.0
Installs0
System Documentation
What problem does it solve?
Teams struggle to maintain a consistent look across vehicle insurance UI without a centralized design system. This Skill provides a CSS design tokens and color system to standardize colors, spacing, and typography.
Core Features & Use Cases
- Design token definitions: color palette, spacing scale, typography scale
- CSS variables examples for charts, status colors, and surfaces
- Theming support with primary, neutral, and surface tokens
- Use Case: Apply tokens.css to a new UI to instantly align colors, spacing, and typography.
Quick Start
Import the tokens CSS into your project and start using tokens like --chart-primary-blue, --space-4, and --text-base.
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: css-design-tokens Download link: https://github.com/alongor666/daylyreport/archive/main.zip#css-design-tokens Please download this .zip file, extract it, and install it in the .claude/skills/ directory.