A web-based validator for W3C Design Tokens Community Group (DTCG) format tokens. This tool helps designers and developers validate their design token files against the official DTCG specification.
🔗 Live Demo | 📦 GitHub Repository
- ✅ Real-time validation against W3C DTCG specification
- 🎨 Support for all DTCG token types (color, dimension, typography, shadow, etc.)
- � Token references and alias resolution (
{token.path}syntax) - ♻️ Chained reference resolution with circular detection
- 📊 Detailed error analysis with suggestions
- 🌙 Dark/Light mode support
- 📱 Responsive design with Tailwind CSS
- 🧪 Comprehensive test suite - 109 tests passing
- Color - 14 color spaces (srgb, oklch, lab, lch, display-p3, etc.)
- Dimension - px, rem units with validation
- Font Family - string or array
- Font Weight - numeric (1-1000) or aliases (bold, normal, etc.)
- Duration - ms, s units
- Cubic Bezier - easing functions
- Number - unitless values
- Stroke Style - line styles for borders
- Typography - composite token (font family, size, weight, etc.)
- Shadow - composite token with full validation
- Gradient - stop positions and colors
- Border - composite token (color, width, style)
- Transition - composite token (duration, delay, timing)
- ✅ Token references (
{color.primary}) - ✅ Chained references (
{alias1}→{alias2}→ value) - ✅ Circular reference detection
- ✅ Type inheritance through references
- ✅ Component range validation (e.g., hue 0-360, saturation 0-100)
- ✅ "none" keyword support in color components
- ✅ Group-level type inheritance
Visit the live demo and paste your design tokens JSON to validate them. The validator will:
- Check token structure and naming conventions
- Validate token types against DTCG spec
- Verify value formats for each type
- Provide detailed error messages with suggestions
- Show validation statistics
# Install dependencies
npm install
# Start development server
npm run dev
# Run tests
npm test
# Run tests with UI
npm run test:ui
# Build for production
npm run build
# Preview production build
npm run previewDeploy to GitHub Pages:
npm run deploy- React 19 - UI framework
- Vite - Build tool
- Tailwind CSS 4 - Styling
- Vitest - Testing framework
- ESLint - Code linting
This validator implements the W3C Design Tokens Community Group specification version 2025.10, which is stable and recommended for implementation.
This is an independent, community-driven implementation of the DTCG specification. It is not an official W3C or Design Tokens Community Group project.
The validator aims to help designers and developers validate their design tokens against the stable 2025.10 version of the specification. While the spec may evolve in future versions, this implementation provides a solid foundation for working with design tokens today.
MIT