Material Dark

Material Design 3 dark color scheme

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

Colors

24 tokens

primary #BB86FC
onPrimary #000000
primaryContainer #4A148C
onPrimaryContainer #EADDFF
secondary #03DAC5
onSecondary #000000
secondaryContainer #005047
onSecondaryContainer #B2F1E8
tertiary #EDE7F6
onTertiary #000000
background #121212
onBackground #FFFFFF
surface #1E1E1E
onSurface #FFFFFF
surfaceVariant #49454F
onSurfaceVariant #CAC4D0
surfaceContainer #211F26
surfaceContainerHigh #2B2930
surfaceContainerLow #1D1B20
error #CF6679
onError #000000
outline #938F99
outlineVariant #49454F
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