Ocean
Deep ocean blue with calm light-blue and azure highlights.
Colors
26 tokens
primary #FFFFFF
onPrimary #0D47A1
primaryContainer #82B1FF
onPrimaryContainer #002171
secondary #82B1FF
onSecondary #0D47A1
secondaryContainer #448AFF
onSecondaryContainer #002171
tertiary #448AFF
onTertiary #FFFFFF
tertiaryContainer #1E88E5
onTertiaryContainer #FFFFFF
background #0D47A1
onBackground #FFFFFF
surface #1565C0
onSurface #FFFFFF
surfaceVariant #1976D2
onSurfaceVariant #BBDEFB
surfaceContainer #11569E
surfaceContainerHigh #1565C0
surfaceContainerLow #0A3D8A
error #FFCDD2
onError #5D0000
outline #82B1FF
outlineVariant #1976D2
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.90medium: 0.50disabled: 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
Featured card
Card uses primaryContainer with onPrimaryContainer text
Primary Secondary Tertiary
Label Field value