Cyberpunk

Neon cyberpunk color palette

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

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

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