# Token Naming Convention Reference Card

## Naming Patterns Compared

| 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 |

## Quick Decision Guide

| If you need... | Go with... |
|----------------|-----------|
| Maximum clarity, enterprise | Full words (Salesforce/Adobe) |
| Compact, dev-friendly | Abbreviations (GitHub/Shopify) |
| Figma Variables compatible | Dot separator, slash groups |
| Multi-brand theming | Separate brand from intent |

## Common Abbreviations

bg, fg, sm, md, lg, xl, xs, 2xl, 3xl

## Categories

color, space, size, radius, font, shadow, motion, opacity