Overview Primitive tokens are the foundation of the Meteor Design System. They define raw values without semantic context. These tokens are used to build semantic tokens and can be accessed directly when needed.
In most cases, you should use semantic tokens instead of primitives in your application code. Primitives are primarily for building design systems and themes.
Color Primitives Color primitives provide the base color palette with shades ranging from 50 (lightest) to 900 or 950 (darkest).
Brand Colors CSS Variables
JSON Structure
--color-brand-50: #f0f6ff --color-brand-100: #c8ddff --color-brand-200: #9fc4ff --color-brand-300: #76aaff --color-brand-400: #4a8fff --color-brand-500: #0870ff --color-brand-600: #005cd7 --color-brand-700: #0042a0 --color-brand-800: #00296a --color-brand-900: #00153e --color-brand-950: #000c2b
Blue --color-blue-50: #eef6ff --color-blue-100: #cce5ff --color-blue-200: #a8d4ff --color-blue-300: #83c3ff --color-blue-400: #59b1ff --color-blue-500: #189eff --color-blue-600: #0081d4 --color-blue-700: #005b99 --color-blue-800: #00375f --color-blue-900: #001931
Zinc (Neutrals) Zinc provides the neutral gray scale used throughout the interface:
--color-zinc-0: #ffffff --color-zinc-50: #fafbfe --color-zinc-75: #f2f3f8 --color-zinc-100: #e2e3e9 --color-zinc-200: #cdced4 --color-zinc-300: #b9babf --color-zinc-400: #a5a6ab --color-zinc-500: #838489 --color-zinc-600: #696a6e --color-zinc-700: #3d3e42 --color-zinc-800: #2d2e32 --color-zinc-850: #26262b --color-zinc-900: #1e1e24 --color-zinc-950: #141418 --color-zinc-975: #101013 --color-zinc-1000: #09090b
Red (Critical) --color-red-50: #fff2f0 --color-red-100: #ffcfc9 --color-red-200: #ffa9a0 --color-red-300: #ff7f74 --color-red-400: #fc4945 --color-red-500: #e2262a --color-red-600: #c20017 --color-red-700: #90000e --color-red-800: #5e0006 --color-red-900: #360002
Green (Positive) --color-green-50: #e1ffe0 --color-green-100: #b0fbb0 --color-green-200: #86f98c --color-green-300: #73f27a --color-green-400: #4dde58 --color-green-500: #36d046 --color-green-600: #00ab26 --color-green-700: #007818 --color-green-800: #00470a --color-green-900: #002002
Orange (Attention) --color-orange-50: #fff3e3 --color-orange-100: #ffe6c4 --color-orange-200: #ffd9a2 --color-orange-300: #ffcb7e --color-orange-400: #ffbc51 --color-orange-500: #fbaf18 --color-orange-600: #cc8c00 --color-orange-700: #8f6000 --color-orange-800: #533600 --color-orange-900: #241500
Yellow --color-yellow-50: #fffef7 --color-yellow-100: #fff7d6 --color-yellow-200: #ffefb3 --color-yellow-300: #ffe88e --color-yellow-400: #ffe061 --color-yellow-500: #ffd702 --color-yellow-600: #cdac00 --color-yellow-700: #8d7600 --color-yellow-800: #4f4100 --color-yellow-900: #1e1800
Purple (Accent) --color-purple-50: #f5f4ff --color-purple-100: #e4e1ff --color-purple-200: #d4ceff --color-purple-300: #c4bbff --color-purple-400: #b5a8ff --color-purple-500: #a694ff --color-purple-600: #886fe9 --color-purple-700: #633bc6 --color-purple-800: #3e0091 --color-purple-900: #1c0049
Emerald --color-emerald-50: #ddffea --color-emerald-100: #aeffd0 --color-emerald-200: #80fbba --color-emerald-300: #74f0af --color-emerald-400: #67e4a4 --color-emerald-500: #57d998 --color-emerald-600: #00b472 --color-emerald-700: #007e4e --color-emerald-800: #00492b --color-emerald-900: #001f0f
Pink --color-pink-50: #fff1f5 --color-pink-100: #ffd8e4 --color-pink-200: #ffbed3 --color-pink-300: #ffa2c2 --color-pink-400: #ff83b1 --color-pink-500: #ff5ea1 --color-pink-600: #e42683 --color-pink-700: #a8005c --color-pink-800: #670036 --color-pink-900: #340018
Pumpkin --color-pumpkin-50: #fff2ec --color-pumpkin-100: #ffddcc --color-pumpkin-200: #ffc7aa --color-pumpkin-300: #ffb086 --color-pumpkin-400: #ff985e --color-pumpkin-500: #f88138 --color-pumpkin-600: #d46000 --color-pumpkin-700: #974200 --color-pumpkin-800: #5c2600 --color-pumpkin-900: #2c0e00
Cyan --color-cyan-50: #e8f8ff --color-cyan-100: #c3eeff --color-cyan-200: #9ce4ff --color-cyan-300: #79dbff --color-cyan-400: #4ad0fc --color-cyan-500: #2fc3f0 --color-cyan-600: #009ac0 --color-cyan-700: #006c88 --color-cyan-800: #004051 --color-cyan-900: #001c26
Slate --color-slate-50: #fafbfe --color-slate-100: #f0f3ff --color-slate-200: #e0e3f3 --color-slate-300: #cbcede --color-slate-400: #b6b9c9 --color-slate-500: #a3a6b5 --color-slate-600: #808392 --color-slate-700: #666977 --color-slate-800: #474a57 --color-slate-900: #2b2e3a --color-slate-950: #12141e
Scale Primitives The scale provides consistent sizing values for spacing, sizing, and layout:
CSS Variables
JSON Structure
--scale-size-0: 0 --scale-size-1: 0 .0625rem --scale-size-2: 0 .125rem --scale-size-4: 0 .25rem --scale-size-6: 0 .375rem --scale-size-8: 0 .5rem --scale-size-10: 0 .625rem --scale-size-12: 0 .75rem --scale-size-14: 0 .875rem --scale-size-16: 1rem --scale-size-18: 1 .125rem --scale-size-20: 1 .25rem --scale-size-24: 1 .5rem --scale-size-28: 1 .75rem --scale-size-32: 2rem --scale-size-36: 2 .25rem --scale-size-40: 2 .5rem --scale-size-48: 3rem --scale-size-56: 3 .5rem --scale-size-64: 4rem --scale-size-72: 4 .5rem --scale-size-80: 5rem --scale-size-96: 6rem --scale-size-128: 8rem --scale-size-160: 10rem --scale-size-192: 12rem --scale-size-224: 14rem --scale-size-256: 16rem --scale-size-9999: 624 .9375rem
Font Weight Primitives Font weight primitives provide numeric weight values:
--font-weight-100: 100 --font-weight-200: 200 --font-weight-300: 300 --font-weight-400: 400 --font-weight-500: 500 --font-weight-600: 600 --font-weight-700: 700 --font-weight-800: 800 --font-weight-900: 900
Using Primitive Tokens While semantic tokens are recommended for application development, primitives can be useful for:
Building Custom Themes :root { --my-custom-primary : var ( --color-purple-500 ); --my-custom-surface : var ( --color-zinc-50 ); }
Creating Custom Components .custom-badge { background-color : var ( --color-emerald-100 ); color : var ( --color-emerald-800 ); padding : var ( --scale-size-4 ) var ( --scale-size-8 ); }
Utility Classes .bg-brand-500 { background-color : var ( --color-brand-500 ); } .text-red-700 { color : var ( --color-red-700 ); } .p-16 { padding : var ( --scale-size-16 ); }
JSON Dictionary Access For tooling and build-time token processing, access the raw JSON dictionary:
import primitives from '@shopware-ag/meteor-tokens/foundation/primitives.json' ; console . log ( primitives . color . brand [ 500 ]. $value ); // "#0870ff" console . log ( primitives . scale . size [ 16 ]. $value ); // 16
Token Structure Each primitive token follows this structure:
{ "$value" : "#0870ff" , "$type" : "color" , "$description" : "" }
$value: The actual value of the token$type: The type of token (color, float, string)$description: Optional description for documentation
Reference Tables Color Scale Structure Shade Usage Lightness 50 Lightest tint ~97% 100 Very light ~90% 200 Light ~80% 300 Light-medium ~70% 400 Medium-light ~60% 500 Base color ~50% 600 Medium-dark ~40% 700 Dark ~30% 800 Very dark ~20% 900 Darkest ~10%
Spacing Scale Guide Token Pixels Rem Common Use scale-size-44px 0.25rem Minimal spacing scale-size-88px 0.5rem Tight spacing scale-size-1212px 0.75rem Small spacing scale-size-1616px 1rem Base spacing scale-size-2020px 1.25rem Medium spacing scale-size-2424px 1.5rem Large spacing scale-size-3232px 2rem Extra large spacing
For detailed semantic token usage, see the Usage Guide . Next Steps
Usage Guide Learn how to use semantic tokens in your application
Theme Customization Create custom themes using primitives