Best for
- Frontend and design-system teams using CSS, Tailwind, or DTCG
- Projects needing stable primitive token names and full JSON
- Teams prepared to map semantic roles and validate contrast
Chinese Color AtlasRESOURCE PACK
Buy now · DIGITAL DOWNLOAD
Frontend engineers · design-system builders
Frontend engineers · design-system builders
CSS and Tailwind Token Pack
One 161-color clean-source core in synchronized CSS, Tailwind, W3C DTCG, Figma Variables JSON, and canonical JSON formats.
What You Get
✓CSS custom properties for 161 exact-match MIT-source colors
✓Tailwind theme partial with stable token names
✓W3C DTCG design tokens for design-system handoff
✓Canonical JSON with RGB, HSL, CMYK, reliability, and explicit source rights
✓Figma Variables JSON using the same verified names and HEX values
Not for
- Needing visual Figma, ASE, or Procreate files
- Wanting a finished brand system without semantic mapping
CODE STRUCTURE PREVIEW
Keep traditional color names as primitives, then map them to product semantics
The developer pack does not decide brand, surface, or text roles for you. It provides stable primitives for mapping under your own accessibility and brand rules.
CSS
--cc-yanzhi: #9D2933;TAILWIND
colors: { 'cc-yanzhi': '#9D2933' }DTCG
"yanzhi": { "$type": "color", "$value": "#9D2933" }Only one public sample token is shown here. Complete 161-color clean-source CSS, Tailwind, DTCG, Figma Variables JSON, and canonical JSON remain in the paid ZIP.
FILE LIST
✓ CSS custom properties for 161 exact-match MIT-source colors
✓ Tailwind theme partial with stable token names
✓ W3C DTCG design tokens for design-system handoff
✓ Canonical JSON with RGB, HSL, CMYK, reliability, and explicit source rights
✓ Figma Variables JSON using the same verified names and HEX values
HOW TO USE
- Download and unzip the developer pack, then choose CSS, Tailwind, DTCG, or structured JSON for your stack.
- Import the file into a test branch and map primitive Chinese color names to your semantic roles before production use.
- Verify contrast, naming, and bundle impact in your project; keep the license and attribution notes with the handoff.
DELIVERY & SUPPORT
Delivered through Polar as cathycolor-developer-token-pack.zip. If files are missing, corrupted, or inaccessible, contact support@chinesecoloratlas.com.
Best-Fit Workflows
Built for Tailwind and CSS projects
Turn Chinese traditional colors into stable token names, CSS custom properties, Tailwind theme partials, and DTCG JSON.
Ready for design-system mapping
Keep color names in primitive tokens, then map them to semantic roles such as brand, surface, text, border, and accent.
More focused than the Complete Pack
Choose this pack when you only need web and product UI handoff, not Figma, Procreate, ASE, or AI prompt assets.
Free Samples
USING MULTIPLE TOOLS?
The Complete Pack bundles Figma, ASE, Procreate, CSS, Tailwind, and AI prompts together.
If you use more than one tool, the Complete Pack is the cleaner upgrade: one download covering design, development, and AI creation handoff.