md3-react provides a comprehensive set of Material Design 3 design tokens for colors, typography, shape, elevation, motion, and state.
Color Tokens
Primary Colors
| Token | Light | Dark | Usage |
|---|
primary | #6750A4 | #D0BCFF | Primary brand color |
onPrimary | #FFFFFF | #381E72 | Text/icons on primary |
primaryContainer | #EADDFF | #4F378B | Container backgrounds |
onPrimaryContainer | #21005D | #EADDFF | Text on primary container |
Secondary Colors
| Token | Light | Dark | Usage |
|---|
secondary | #625B71 | #CCC2DC | Secondary brand color |
onSecondary | #FFFFFF | #332D41 | Text/icons on secondary |
secondaryContainer | #E8DEF8 | #4A4458 | Container backgrounds |
onSecondaryContainer | #1D192B | #E8DEF8 | Text on secondary container |
Surface Colors
| Token | Light | Dark | Usage |
|---|
surface | #FEF7FF | #141218 | Default surface |
onSurface | #1D1B20 | #E6E0E9 | Text on surface |
surfaceVariant | #E7E0EC | #49454F | Variant surface |
surfaceContainer | #F3EDF7 | #211F26 | Container surface |
Error Colors
| Token | Light | Dark | Usage |
|---|
error | #B3261E | #F2B8B5 | Error states |
onError | #FFFFFF | #601410 | Text on error |
errorContainer | #F9DEDC | #8C1D18 | Error container |
onErrorContainer | #410E0B | #F9DEDC | Text on error container |
Typography Tokens
Scale
| Token | Font Size | Line Height | Weight | Usage |
|---|
displayLarge | 57px | 64px | 400 | Hero text |
displayMedium | 45px | 52px | 400 | Large headings |
displaySmall | 36px | 44px | 400 | Section headings |
headlineLarge | 32px | 40px | 400 | Page titles |
headlineMedium | 28px | 36px | 400 | Section titles |
headlineSmall | 24px | 32px | 400 | Card titles |
titleLarge | 22px | 28px | 400 | Large titles |
titleMedium | 16px | 24px | 500 | Medium titles |
titleSmall | 14px | 20px | 500 | Small titles |
labelLarge | 14px | 20px | 500 | Button text |
labelMedium | 12px | 16px | 500 | Tabs, chips |
labelSmall | 11px | 16px | 500 | Captions |
bodyLarge | 16px | 24px | 400 | Body text |
bodyMedium | 14px | 20px | 400 | Default body |
bodySmall | 12px | 16px | 400 | Supporting text |
Shape Tokens
| Token | Value | Usage |
|---|
none | 0px | No rounding |
extraSmall | 4px | Chips, small elements |
small | 8px | Buttons, inputs |
medium | 12px | Cards, dialogs |
large | 16px | Large cards |
extraLarge | 28px | FABs, large containers |
full | 9999px | Circular elements |
Elevation Tokens
| Token | Box Shadow | Usage |
|---|
level0 | none | Flat elements |
level1 | 0px 1px 2px rgba(0,0,0,0.3)... | Raised elements |
level2 | 0px 1px 2px rgba(0,0,0,0.3)... | Elevated buttons |
level3 | 0px 4px 8px rgba(0,0,0,0.15)... | Cards |
level4 | 0px 6px 10px rgba(0,0,0,0.15)... | Dialogs |
level5 | 0px 8px 12px rgba(0,0,0,0.15)... | Modals |
Motion Tokens
Duration
| Token | Value | Usage |
|---|
short1 | 50ms | Micro-interactions |
short2 | 100ms | Quick transitions |
short3 | 150ms | Standard short |
short4 | 200ms | Hover states |
medium1 | 250ms | Standard |
medium2 | 300ms | Expansion |
medium3 | 350ms | Complex |
medium4 | 400ms | Large elements |
Easing
| Token | Value | Usage |
|---|
standard | cubic-bezier(0.2, 0, 0, 1) | Default |
emphasized | cubic-bezier(0.2, 0, 0, 1) | Important transitions |
emphasizedDecelerate | cubic-bezier(0.05, 0.7, 0.1, 1) | Enter animations |
emphasizedAccelerate | cubic-bezier(0.3, 0, 0.8, 0.15) | Exit animations |
State Tokens
| Token | Value | Usage |
|---|
hover | 0.08 | Hover state opacity |
focus | 0.10 | Focus state opacity |
pressed | 0.10 | Pressed state opacity |
dragged | 0.16 | Drag state opacity |
disabled | 0.38 | Disabled content opacity |
disabledContainer | 0.12 | Disabled container opacity |