Token Naming Convention Reference Card
A printable one-page reference comparing 7 design token naming conventions side by side. Pin it next to your monitor.
What This Is
A one-page reference card comparing how 7 major design systems name their tokens. Based on the full Design Token Naming: 7 Systems Compared guide.
Pin it, bookmark it, or keep it open when naming new tokens.
The Comparison
Naming Pattern
| System | Pattern | Example |
|---|---|---|
| Salesforce (Lightning) | --slds-c-{component}-{property}-{variant} | --slds-c-button-color-background |
| IBM (Carbon) | $cds-{category}-{property}-{modifier} | $cds-button-primary-background |
| GitHub (Primer) | --color-{property}-{intent}-{modifier} | --color-fg-default |
| Adobe (Spectrum) | --spectrum-{component}-{property}-{variant} | --spectrum-button-background-color-default |
| Shopify (Polaris) | --p-{category}-{property}-{scale} | --p-color-bg-surface |
| GitLab (Pajamas) | $gl-{category}-{property}-{variant} | $gl-color-background-default |
| Material Design | --md-sys-{category}-{role} | --md-sys-color-primary |
Separator Style
| Separator | Systems Using It |
|---|---|
Hyphen - | Salesforce, GitHub, Adobe, Shopify, Material |
Dollar $ prefix | IBM, GitLab |
Dot . | Tokens Studio, Figma Variables |
Abbreviation Policy
| Approach | Systems | Examples |
|---|---|---|
| Full words | Salesforce, Adobe, IBM | background, foreground, border |
| Abbreviations | GitHub, Shopify | bg, fg |
| Mixed | Material, GitLab | sys (system), full property names |
Category Coverage
| Category | Common Names |
|---|---|
| Color | color, c |
| Spacing | spacing, space, gap |
| Typography | font, type, text |
| Border radius | radius, border-radius, corner |
| Shadow | shadow, elevation |
| Motion | motion, animation, duration |
| Size | size, sizing |
| Opacity | opacity, alpha |
Quick Decision Guide
| If you need… | Go with… |
|---|---|
| Maximum clarity, enterprise team | Full words (Salesforce/Adobe style) |
| Compact, developer-friendly | Abbreviations (GitHub/Shopify style) |
| Figma Variables compatible | Dot separator, slash groups |
| Style Dictionary compatible | Any, but test transforms |
| Multi-brand theming | Separate brand from intent (Shopify/Material) |
Try with Prompts
Ready-to-use prompts related to this guide
A prompt that analyzes your design token JSON and identifies issues like missing semantic layers, inconsistent naming, and accessibility gaps.
Translate brand guidelines (PDF, style guide) into a structured set of design tokens with proper naming and hierarchy.
A drop-in system prompt template for any Claude work that touches your design system. Cache it once, reuse it on every screen, audit, and component review.