Mastering the Design Token System

Design tokens are the foundation of Keystone’s styling system. They provide a single source of truth for colors, typography, spacing, and more.

What Are Design Tokens?

Design tokens are named values that represent design decisions. Instead of using hardcoded hex colors like #3B82F6, Keystone uses semantic tokens like “primary” that can be configured per brand.

How Keystone Uses Tokens

When you configure colors in the Keystone settings, they are output as CSS custom properties. Tailwind CSS then references these properties, ensuring every component automatically reflects your brand.

Exporting for PWAs

The best part? You can export your design tokens as a Tailwind config file for use in companion PWA projects, ensuring perfect brand consistency across all your web properties.