Material Light

Material Design 3 light color scheme

24 colors · 15 type styles · 6 radii · 6 spacing tokens

Colors

24 tokens

primary #6200EA
onPrimary #FFFFFF
primaryContainer #EADDFF
onPrimaryContainer #21005D
secondary #03DAC6
onSecondary #000000
secondaryContainer #B2F1E8
onSecondaryContainer #002117
tertiary #3700B3
onTertiary #FFFFFF
background #FFFFFF
onBackground #1C1B1F
surface #F5F5F5
onSurface #1C1B1F
surfaceVariant #E7E0EC
onSurfaceVariant #49454F
surfaceContainer #F3EDF7
surfaceContainerHigh #ECE6F0
surfaceContainerLow #F7F2FA
error #B3261E
onError #FFFFFF
outline #79747E
outlineVariant #CAC4D0
scrim #000000

Typography

15 styles

Default font family: Inter

Name Font size Weight Line height Letter spacing
displayLarge 57sp 400 64sp -0.25sp
displayMedium 45sp 400 52sp -
displaySmall 36sp 400 44sp -
headlineLarge 32sp 400 40sp -
headlineMedium 28sp 400 36sp -
headlineSmall 24sp 400 32sp -
titleLarge 22sp 400 28sp -
titleMedium 16sp 500 24sp 0.15sp
titleSmall 14sp 500 20sp 0.1sp
bodyLarge 16sp 400 24sp 0.5sp
bodyMedium 14sp 400 20sp 0.25sp
bodySmall 12sp 400 16sp 0.4sp
labelLarge 14sp 500 20sp 0.1sp
labelMedium 12sp 500 16sp 0.5sp
labelSmall 11sp 500 16sp 0.5sp

Shapes

6 radii

extraSmall: 4dpsmall: 8dpmedium: 12dplarge: 16dpextraLarge: 28dpfull: 9999dp

Spacing

6 tokens

none: 0dpextraSmall: 4dpsmall: 8dpmedium: 16dplarge: 24dpextraLarge: 32dp

Elevation

6 tokens

level0: 0dplevel1: 1dplevel2: 3dplevel3: 6dplevel4: 8dplevel5: 12dp

Other

10 tokens

Border

none: 0dpthin: 1dpmedium: 2dpthick: 4dp

Opacity

full: 1.0high: 0.87medium: 0.60disabled: 0.38overlay: 0.32divider: 0.12

In context

Preview the theme on real components

Sample app
Surface container low

Outer container, lowest emphasis

Surface container
Surface container high

Highest emphasis content sits here

Primary Secondary Tertiary
Something needs your attention
Tertiary tone for informational notes
Secondary tone confirms an action
Label Field value
i