Menu
Design token patterns and naming conventions. Use when searching for token architecture, naming strategies, or design system patterns.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Angular Material components quick reference. Use when searching for Material component APIs, theming patterns, or CDK utilities.
Comprehensive patterns for BEM, OOCSS, SMACSS, ITCSS, and CUBE CSS with selection guides and implementation strategies
Comprehensive enterprise CSS architecture patterns for large-scale applications with design systems, governance, and team workflows
Comprehensive Leaflet patterns for custom markers, styled popups, controls, GeoJSON, clustering, and dark mode. Use when searching for Leaflet styling, marker customization, popup design, or interactive map features.
Comprehensive map styling patterns for Leaflet, Mapbox, and GIS visualizations. Use when searching for map theming, marker styling, popup designs, or choropleth patterns.
Comprehensive Mapbox GL JS patterns for custom styles, 3D visualization, animations, and data-driven maps. Use when searching for Mapbox styling, 3D buildings, heat maps, or advanced map visualizations.
| name | token-patterns |
| description | Design token patterns and naming conventions. Use when searching for token architecture, naming strategies, or design system patterns. |
A comprehensive reference guide for design token patterns, naming conventions, transformation strategies, and platform-specific formats. This skill provides architecture guidance for building scalable, maintainable design systems with 30+ searchable token patterns and real-world examples.
Pattern: [block]__[element]--[modifier]
{
"color__button--primary": "#0070F3",
"color__button--secondary": "#666666",
"spacing__button--large": "16px",
"spacing__button--small": "8px"
}
Use Cases:
The CTI (Category-Type-Item) pattern is the industry-standard approach for token naming. It provides hierarchical, searchable, and maintainable naming across all platforms.
Pattern: {category}-{type}-{item}
{
"color-background-primary": "#FFFFFF",
"color-background-secondary": "#F5F5F5",
"color-text-primary": "#000000",
"color-text-secondary": "#666666",
"color-border-light": "#EEEEEE",
"color-border-dark": "#CCCCCC"
}
Components:
Pattern: {category}-{type}-{subtype}-{item}
{
"color-text-interactive-primary": "#0070F3",
"color-text-interactive-hover": "#005BCB",
"color-text-interactive-disabled": "#CCCCCC",
"color-background-surface-elevated": "#FAFAFA",
"color-background-surface-overlay": "rgba(0, 0, 0, 0.5)"
}
Pattern: {category}-{type}-{item}-{number}
{
"color-gray-50": "#FAFAFA",
"color-gray-100": "#F5F5F5",
"color-gray-200": "#EEEEEE",
"color-gray-300": "#E0E0E0",
"color-gray-400": "#BDBDBD",
"color-gray-500": "#9E9E9E",
"color-gray-600": "#757575",
"color-gray-700": "#616161",
"color-gray-800": "#424242",
"color-gray-900": "#212121"
}
Semantic naming focuses on the purpose rather than the appearance of tokens, making designs more flexible and maintainable.
Pattern: Describe what the token is used for, not what it looks like
{
"color-action-primary": "#0070F3",
"color-action-secondary": "#CCCCCC",
"color-feedback-success": "#00B341",
"color-feedback-warning": "#FFA500",
"color-feedback-error": "#FF4444",
"color-feedback-info": "#0099FF",
"color-border-subtle": "#E0E0E0",
"color-border-prominent": "#999999"
}
Benefits:
{
"color-button-default-foreground": "#FFFFFF",
"color-button-default-background": "#0070F3",
"color-button-hover-background": "#0061E8",
"color-button-active-background": "#0051CC",
"color-button-disabled-foreground": "#CCCCCC",
"color-button-disabled-background": "#F5F5F5"
}
{
"color-accent": "#0070F3",
"color-accent-hover": "#005BCB",
"color-neutral-primary": "#000000",
"color-neutral-secondary": "#666666",
"color-neutral-tertiary": "#AAAAAA",
"color-positive": "#00B341",
"color-negative": "#FF4444"
}
{
"color-brand-primary": "#0070F3",
"color-brand-secondary": "#FF6B35",
"color-status-success": "#00B341",
"color-status-warning": "#FFA500",
"color-status-error": "#FF4444",
"color-status-info": "#0099FF",
"color-surface-primary": "#FFFFFF",
"color-surface-secondary": "#F5F5F5",
"color-surface-tertiary": "#EEEEEE",
"color-surface-inverse": "#1F1F1F",
"color-text-primary": "#000000",
"color-text-secondary": "#666666",
"color-text-tertiary": "#999999",
"color-text-inverse": "#FFFFFF",
"color-border-subtle": "#E0E0E0",
"color-border-medium": "#BDBDBD",
"color-border-strong": "#666666",
"color-overlay-light": "rgba(255, 255, 255, 0.8)",
"color-overlay-dark": "rgba(0, 0, 0, 0.5)"
}
{
"typography-font-family-base": "system-ui, -apple-system, sans-serif",
"typography-font-family-heading": "Georgia, serif",
"typography-font-family-mono": "Menlo, monospace",
"typography-font-size-xs": "12px",
"typography-font-size-sm": "14px",
"typography-font-size-base": "16px",
"typography-font-size-lg": "18px",
"typography-font-size-xl": "20px",
"typography-font-size-2xl": "24px",
"typography-font-size-3xl": "32px",
"typography-font-weight-light": "300",
"typography-font-weight-regular": "400",
"typography-font-weight-medium": "500",
"typography-font-weight-semibold": "600",
"typography-font-weight-bold": "700",
"typography-line-height-tight": "1.2",
"typography-line-height-normal": "1.5",
"typography-line-height-relaxed": "1.8",
"typography-letter-spacing-tight": "-0.02em",
"typography-letter-spacing-normal": "0em",
"typography-letter-spacing-wide": "0.05em"
}
{
"spacing-0": "0",
"spacing-xs": "4px",
"spacing-sm": "8px",
"spacing-md": "16px",
"spacing-lg": "24px",
"spacing-xl": "32px",
"spacing-2xl": "48px",
"spacing-3xl": "64px",
"spacing-4xl": "96px",
"spacing-gutter-sm": "8px",
"spacing-gutter-md": "16px",
"spacing-gutter-lg": "24px",
"spacing-inset-xs": "4px",
"spacing-inset-sm": "8px",
"spacing-inset-md": "16px",
"spacing-inset-lg": "24px",
"spacing-stack-xs": "4px",
"spacing-stack-sm": "8px",
"spacing-stack-md": "16px"
}
{
"sizing-xs": "64px",
"sizing-sm": "128px",
"sizing-md": "256px",
"sizing-lg": "512px",
"sizing-xl": "1024px",
"sizing-auto": "auto",
"sizing-full": "100%",
"sizing-min": "min-content",
"sizing-max": "max-content",
"sizing-fit": "fit-content"
}
{
"border-radius-0": "0",
"border-radius-sm": "2px",
"border-radius-md": "4px",
"border-radius-lg": "8px",
"border-radius-xl": "12px",
"border-radius-2xl": "16px",
"border-radius-full": "9999px",
"border-width-thin": "1px",
"border-width-medium": "2px",
"border-width-thick": "4px",
"border-style-solid": "solid",
"border-style-dashed": "dashed",
"border-style-dotted": "dotted"
}
{
"elevation-shadow-xs": "0 1px 2px rgba(0, 0, 0, 0.05)",
"elevation-shadow-sm": "0 1px 3px rgba(0, 0, 0, 0.1)",
"elevation-shadow-md": "0 4px 6px rgba(0, 0, 0, 0.1)",
"elevation-shadow-lg": "0 10px 15px rgba(0, 0, 0, 0.1)",
"elevation-shadow-xl": "0 20px 25px rgba(0, 0, 0, 0.1)",
"elevation-shadow-2xl": "0 25px 50px rgba(0, 0, 0, 0.15)",
"elevation-z-index-dropdown": "1000",
"elevation-z-index-sticky": "500",
"elevation-z-index-fixed": "1000",
"elevation-z-index-modal": "1100"
}
{
"motion-duration-fast": "100ms",
"motion-duration-base": "200ms",
"motion-duration-slow": "300ms",
"motion-easing-linear": "linear",
"motion-easing-ease-in": "cubic-bezier(0.4, 0, 1, 1)",
"motion-easing-ease-out": "cubic-bezier(0, 0, 0.2, 1)",
"motion-easing-ease-in-out": "cubic-bezier(0.4, 0, 0.2, 1)",
"motion-transition-fast": "all 100ms ease-in-out",
"motion-transition-base": "all 200ms ease-in-out",
"motion-transition-slow": "all 300ms ease-in-out"
}
{
"opacity-0": "0",
"opacity-10": "0.1",
"opacity-20": "0.2",
"opacity-30": "0.3",
"opacity-40": "0.4",
"opacity-50": "0.5",
"opacity-60": "0.6",
"opacity-70": "0.7",
"opacity-80": "0.8",
"opacity-90": "0.9",
"opacity-100": "1"
}
Token transformations convert design tokens into platform-specific outputs. This is critical for supporting web, mobile, and other platforms.
Input (JSON):
{
"color-primary": "#0070F3",
"spacing-md": "16px"
}
Output (CSS):
:root {
--color-primary: #0070F3;
--spacing-md: 16px;
}
.component {
background-color: var(--color-primary);
padding: var(--spacing-md);
}
Input (JSON):
{
"color-primary": "#0070F3",
"spacing-md": "16px"
}
Output (SCSS):
$color-primary: #0070F3;
$spacing-md: 16px;
.component {
background-color: $color-primary;
padding: $spacing-md;
}
Input (JSON):
{
"color-primary": "#0070F3",
"spacing-md": "16px"
}
Output (TypeScript):
export const tokens = {
color: {
primary: '#0070F3'
},
spacing: {
md: '16px'
}
} as const;
export type Tokens = typeof tokens;
// Usage
const bgColor: string = tokens.color.primary;
const padding: string = tokens.spacing.md;
// Tokens object structure
export const tokens = {
color: {
brand: {
primary: '#0070F3',
secondary: '#FF6B35'
},
status: {
success: '#00B341',
error: '#FF4444'
}
},
spacing: {
xs: '4px',
sm: '8px',
md: '16px'
}
};
// Access
tokens.color.brand.primary // '#0070F3'
tokens.spacing.md // '16px'
struct DesignTokens {
struct Colors {
static let primary = UIColor(hex: "#0070F3")
static let secondary = UIColor(hex: "#FF6B35")
}
struct Spacing {
static let xs: CGFloat = 4
static let sm: CGFloat = 8
static let md: CGFloat = 16
}
}
// Usage
let primaryColor = DesignTokens.Colors.primary
let padding = DesignTokens.Spacing.md
object DesignTokens {
object Colors {
const val Primary = "#0070F3"
const val Secondary = "#FF6B35"
}
object Spacing {
const val Xs = 4
const val Sm = 8
const val Md = 16
}
}
// Usage
val primaryColor = DesignTokens.Colors.Primary
val padding = DesignTokens.Spacing.Md
{
"$schema": "http://json-schema.org/draft-07/schema#",
"type": "object",
"properties": {
"color": {
"type": "object",
"properties": {
"primary": {
"type": "string",
"pattern": "^#[0-9A-F]{6}$"
}
}
},
"spacing": {
"type": "object",
"properties": {
"md": {
"type": "string",
"pattern": "^[0-9]+(px|rem|em)$"
}
}
}
}
}
/* Light Mode */
:root {
--color-primary: #0070F3;
--color-text: #000000;
--spacing-md: 16px;
--border-radius-md: 4px;
}
/* Dark Mode */
@media (prefers-color-scheme: dark) {
:root {
--color-primary: #0088FF;
--color-text: #FFFFFF;
}
}
/* Usage */
.button {
background-color: var(--color-primary);
color: var(--color-text);
padding: var(--spacing-md);
border-radius: var(--border-radius-md);
}
module.exports = {
theme: {
extend: {
colors: {
primary: '#0070F3',
secondary: '#FF6B35',
gray: {
50: '#FAFAFA',
900: '#212121'
}
},
spacing: {
xs: '4px',
sm: '8px',
md: '16px'
},
fontSize: {
xs: '12px',
sm: '14px',
base: '16px'
},
borderRadius: {
sm: '2px',
md: '4px',
lg: '8px'
}
}
}
};
import { createMuiTheme } from '@mui/material/styles';
const theme = createMuiTheme({
palette: {
primary: {
main: '#0070F3',
light: '#0088FF',
dark: '#0051CC'
},
secondary: {
main: '#FF6B35'
},
success: {
main: '#00B341'
}
},
spacing: 8,
typography: {
fontFamily: 'system-ui',
fontSize: 16
}
});
{
"colors": {
"brand": {
"primary": {
"value": "#0070F3",
"type": "color",
"description": "Primary brand color"
}
}
},
"spacing": {
"md": {
"value": "16px",
"type": "dimension",
"description": "Medium spacing scale"
}
}
}
{
"base-color-primary": "#0070F3",
"color-primary": "{base-color-primary}",
"color-button-primary": "{color-primary}"
}
{
"base-blue-500": "#0070F3",
"color-action-primary": "{base-blue-500}",
"color-button-primary": "{color-action-primary}",
"color-button-hover": "color-action-primary-hover"
}
{
"base-neutral": "#000000",
"color-text": "{base-neutral}",
"color-text-button": "{color-text}",
"color-text-button-disabled": "opacity({color-text-button}, 0.5)"
}
{
"light": {
"base-bg": "#FFFFFF",
"color-bg-primary": "{base-bg}",
"color-text-primary": "#000000"
},
"dark": {
"base-bg": "#1F1F1F",
"color-bg-primary": "{base-bg}",
"color-text-primary": "#FFFFFF"
}
}
Best for: Simple applications, direct CSS variable mapping
{
"color-primary": "#0070F3",
"color-secondary": "#FF6B35",
"spacing-sm": "8px",
"spacing-md": "16px"
}
Best for: Complex design systems, component-based architectures
{
"color": {
"brand": {
"primary": "#0070F3",
"secondary": "#FF6B35"
},
"status": {
"success": "#00B341",
"error": "#FF4444"
}
},
"spacing": {
"scale": {
"xs": "4px",
"sm": "8px"
}
}
}
Best for: Component libraries, design systems
{
"button": {
"primary": {
"background": "#0070F3",
"foreground": "#FFFFFF",
"hover-background": "#005BCB",
"padding": "16px"
},
"secondary": {
"background": "#F5F5F5",
"foreground": "#000000"
}
},
"input": {
"background": "#FFFFFF",
"border": "#CCCCCC",
"padding": "12px"
}
}
{
"shadow-sm": {
"x": "0",
"y": "1px",
"blur": "3px",
"spread": "0",
"color": "rgba(0, 0, 0, 0.1)"
},
"shadow-md": {
"x": "0",
"y": "4px",
"blur": "6px",
"spread": "0",
"color": "rgba(0, 0, 0, 0.1)"
}
}
{
"typography-heading-1": {
"font-family": "{typography-font-family-heading}",
"font-size": "32px",
"font-weight": "700",
"line-height": "1.2",
"letter-spacing": "-0.02em"
},
"typography-body": {
"font-family": "{typography-font-family-base}",
"font-size": "16px",
"font-weight": "400",
"line-height": "1.5"
}
}
{
"border-subtle": {
"width": "1px",
"style": "solid",
"color": "#E0E0E0"
},
"border-strong": {
"width": "2px",
"style": "solid",
"color": "#666666"
}
}
{
"color-gray": {
"50": "#FAFAFA",
"100": "#F5F5F5",
"200": "#EEEEEE",
"300": "#E0E0E0",
"400": "#BDBDBD",
"500": "#9E9E9E",
"600": "#757575",
"700": "#616161",
"800": "#424242",
"900": "#212121"
}
}
{
"spacing-scale": {
"2xs": "2px",
"xs": "4px",
"sm": "8px",
"md": "16px",
"lg": "24px",
"xl": "32px",
"2xl": "48px",
"3xl": "64px"
}
}
{
"spacing-gutter": {
"mobile": "12px",
"tablet": "16px",
"desktop": "24px"
},
"font-size-body": {
"mobile": "14px",
"tablet": "16px",
"desktop": "16px"
}
}
{
"spacing-base": "4px",
"spacing-sm": "calc({spacing-base} * 2)",
"spacing-md": "calc({spacing-base} * 4)",
"spacing-lg": "calc({spacing-base} * 6)",
"color-opacity-50": "rgba({color-primary}, 0.5)"
}
{
"font-size-base": "16px",
"font-size-sm": "calc({font-size-base} * 0.875)",
"font-size-lg": "calc({font-size-base} * 1.125)",
"line-height-relaxed": "calc({font-size-base} * 1.8)"
}
{
"color-primary": {
"value": "#0070F3",
"type": "color",
"category": "Brand Colors",
"description": "Primary action color for buttons, links, and interactive elements",
"usage": ["buttons", "links", "focus-states"],
"deprecated": false,
"aliases": ["color-action", "color-interactive"]
},
"spacing-md": {
"value": "16px",
"type": "dimension",
"category": "Spacing Scale",
"description": "Medium spacing unit - standard padding for components",
"usage": ["padding", "margin", "gap"],
"deprecated": false,
"relatedTokens": ["spacing-sm", "spacing-lg"]
}
}
{
"tokens": {
"light": {
"color-bg": "#FFFFFF",
"color-text": "#000000"
},
"dark": {
"color-bg": "#1F1F1F",
"color-text": "#FFFFFF"
},
"highContrast": {
"color-bg": "#000000",
"color-text": "#FFFF00"
}
}
}
{
"color-primary": "#0070F3",
"color-brand": "{color-primary}",
"color-interactive": "{color-primary}",
"color-link": "{color-primary}",
"color-focus": "{color-primary}"
}
{
"tokens": {
"base": {
"font-size-body": "16px"
},
"web": {
"font-size-body": "16px"
},
"ios": {
"font-size-body": "17px"
},
"android": {
"font-size-body": "18px"
}
}
}
| Category | Type | Examples | Purpose |
|---|---|---|---|
| Color | Semantic | primary, secondary, success, error | Brand identity, status, feedback |
| Spacing | Scale | xs, sm, md, lg, xl | Padding, margin, gaps |
| Typography | Font/Scale | font-family, font-size, font-weight | Text styling, hierarchy |
| Border | Radius/Style | radius, width, style | Component corners, dividers |
| Elevation | Shadow/Z-index | shadow-sm, z-index-modal | Depth, layering |
| Motion | Duration/Easing | duration-fast, easing-ease-out | Transitions, animations |
| Opacity | Alpha | 0-100 | Transparency, visibility |
| Scale | Values | Use Case |
|---|---|---|
| Color | 50-900 (step 50) | Grayscale, brand colors |
| Spacing | xs, sm, md, lg, xl, 2xl | Padding, margin, gaps |
| Font Size | xs, sm, base, lg, xl, 2xl, 3xl | Typography hierarchy |
| Border Radius | 0, sm, md, lg, xl, 2xl, full | Component corners |
| Shadow | xs, sm, md, lg, xl, 2xl | Depth levels |
| Z-index | 1-1100 | Layer management |
| State | Token Suffix | Common Values |
|---|---|---|
| Default | -default | Primary color, standard spacing |
| Hover | -hover | Darker shade, lighter background |
| Active | -active | Darker background, pressed effect |
| Disabled | -disabled | Reduced opacity, gray color |
| Focus | -focus | Outline style, bright color |
color-focus - Focus indicator colorcolor-focus-visible - Keyboard focus colormotion-duration-fast - Quick animation durationmotion-duration-base - Standard animation durationmotion-easing-ease-in-out - Smooth easing functioncolor-background-primary - Primary backgroundcolor-background-secondary - Secondary backgroundcolor-border-light - Light border colorcolor-border-dark - Dark border colorcolor-brand-primary - Primary brand colorcolor-text-primary - Primary text colorcolor-text-secondary - Secondary text colorcolor-status-success - Success status colorcolor-status-error - Error status colorcolor-status-warning - Warning status colorcolor-disabled-foreground - Disabled text colorcolor-disabled-background - Disabled backgroundelevation-shadow-sm - Small shadowelevation-shadow-md - Medium shadowelevation-z-index-dropdown - Dropdown z-indexelevation-z-index-modal - Modal z-indexcolor-feedback-error - Error feedback colortypography-font-size-base - Base font sizetypography-font-family-base - Base font familytypography-font-weight-bold - Bold weightcolor-gray-50 - Lightest graycolor-gray-900 - Darkest grayspacing-gutter-md - Medium gutter spacingtypography-font-size-heading - Heading font sizecolor-hover-background - Hover backgroundcolor-status-info - Info status colorspacing-inset-md - Inset paddingtypography-line-height-normal - Normal line heighttypography-letter-spacing-normal - Normal letter spacingspacing-md - Medium spacingmotion-transition-base - Base transitioncolor-neutral-primary - Primary neutral coloropacity-50 - 50% opacitycolor-overlay-dark - Dark overlay colorspacing-padding-md - Medium paddingcolor-positive - Positive/success colorborder-radius-md - Medium border radiusspacing-sm - Small spacingelevation-shadow-lg - Large shadowcolor-surface-primary - Primary surfacecolor-status-success - Success statuscolor-text-primary - Primary texttypography-font-size-lg - Large font sizemotion-transition-slow - Slow transitioncolor-status-warning - Warning status colortypography-font-weight-semibold - Semibold weightelevation-z-index-sticky - Sticky z-indexelevation-z-index-modal - Modal z-indexcolor-primary-hovercolor-button-primary better than color-blue-default, -hover, -active, -disabledLast Updated: 2024 | For design system architects, token managers, and design ops professionals