Qibla
Deep emerald and gold — for the Qibla finder and any reverent compass display.
Colors
26 tokens
primary #D4AF37
onPrimary #1B2D24
primaryContainer #7C5E1F
onPrimaryContainer #FFE9A7
secondary #A8D5BA
onSecondary #103324
secondaryContainer #1F4D3A
onSecondaryContainer #C8E6D4
tertiary #E8C77E
onTertiary #3A2A05
tertiaryContainer #5A4108
onTertiaryContainer #FFE9B5
background #0E2A20
onBackground #F2EFE3
surface #103325
onSurface #F2EFE3
surfaceVariant #1A4031
onSurfaceVariant #C7D9CD
surfaceContainer #163B2C
surfaceContainerHigh #1B4636
surfaceContainerLow #0E2A20
error #FFB4AB
onError #690005
outline #C29A4A
outlineVariant #3D5C4F
scrim #000000
Typography
15 styles
Default font family: Cinzel
| Name | Font size | Weight | Line height | Letter spacing |
|---|---|---|---|---|
| displayLarge | 57sp | 500 | 64sp | -0.25sp |
| displayMedium | 45sp | 500 | 52sp | - |
| displaySmall | 36sp | 500 | 44sp | - |
| headlineLarge | 32sp | 500 | 40sp | - |
| headlineMedium | 28sp | 500 | 36sp | - |
| headlineSmall | 24sp | 500 | 32sp | - |
| titleLarge | 22sp | 500 | 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.50divider: 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