메뉴
Design token patterns and naming conventions. Use when searching for token architecture, naming strategies, or design system patterns.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
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