Cyberpunk
Neon cyberpunk color palette
Colors
24 tokens
primary#FF00FF
onPrimary#000000
primaryContainer#660066
onPrimaryContainer#FF99FF
secondary#00FFFF
onSecondary#000000
secondaryContainer#006666
onSecondaryContainer#99FFFF
tertiary#FFFF00
onTertiary#000000
background#0A0A1A
onBackground#E0E0FF
surface#1A1A2E
onSurface#E0E0FF
surfaceVariant#2A2A4E
onSurfaceVariant#B0B0D0
surfaceContainer#16162B
surfaceContainerHigh#202040
surfaceContainerLow#121225
error#FF3366
onError#000000
outline#6666AA
outlineVariant#44447A
scrim#000000
Typography
15 styles
Default font family: Orbitron
| Name | Font size | Weight | Line height | Letter spacing |
|---|---|---|---|---|
| displayLarge | 57sp | 700 | 64sp | -0.5sp |
| displayMedium | 45sp | 700 | 52sp | -0.25sp |
| displaySmall | 36sp | 600 | 44sp | - |
| headlineLarge | 32sp | 600 | 40sp | - |
| headlineMedium | 28sp | 600 | 36sp | - |
| headlineSmall | 24sp | 600 | 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 | 600 | 20sp | 0.1sp |
| labelMedium | 12sp | 600 | 16sp | 0.5sp |
| labelSmall | 11sp | 600 | 16sp | 0.5sp |
Shapes
6 radii
extraSmall: 2dpsmall: 4dpmedium: 6dplarge: 8dpextraLarge: 12dpfull: 9999dp
Spacing
6 tokens
none: 0dpextraSmall: 2dpsmall: 6dpmedium: 12dplarge: 20dpextraLarge: 28dp
Elevation
6 tokens
level0: 0dplevel1: 2dplevel2: 4dplevel3: 8dplevel4: 12dplevel5: 16dp
Other
10 tokens
Border
none: 0dpthin: 1dpmedium: 2dpthick: 3dp
Opacity
full: 1.0high: 0.92medium: 0.70disabled: 0.40overlay: 0.25divider: 0.15
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
PrimarySecondaryTertiary
LabelField value