Skip to content

CMF / recipes

Material color roles

Aluminum, graphite, polymer, rubber, and glass are coherent recipes. Signature aliases the color mode’s primary chassis—natural aluminum in Light and dark anodized graphite in Dark.

Aluminum

11 roles
shell
#E4E5E4#D5D7D6
panel
#EFF0F0#E4E5E4
control
#F7F8F8#EFF0F0
well
#D5D7D6#BEC1C0
edge
#7C8180#5A5F5E
seam
#BEC1C0#A0A4A3
text
#0E1214#0E1214
muted
#424B52#424B52
subtle
#5A656D#5A656D
highlight
rgba(255, 255, 255, 0.80)rgba(255, 255, 255, 0.64)
contact
rgba(0, 0, 0, 0.32)rgba(0, 0, 0, 0.48)

Graphite

11 roles
shell
#171C1F#171C1F
panel
#0E1214#0E1214
control
#22282C#22282C
well
#07090A#07090A
edge
#000000#000000
seam
#171C1F#171C1F
text
#F7F8F8#F7F8F8
muted
#9EA9B1#9EA9B1
subtle
#77838C#77838C
highlight
rgba(255, 255, 255, 0.12)rgba(255, 255, 255, 0.12)
contact
rgba(0, 0, 0, 0.64)rgba(0, 0, 0, 0.80)

Polymer

3 roles
shell
#22282C#22282C
edge
#0E1214#07090A
highlight
rgba(255, 255, 255, 0.08)rgba(255, 255, 255, 0.08)

Rubber

3 roles
shell
#07090A#000000
edge
#000000#07090A
highlight
rgba(255, 255, 255, 0.04)rgba(255, 255, 255, 0.04)

Glass

9 roles
clear
rgba(255, 255, 255, 0.64)rgba(255, 255, 255, 0.12)
smoke
rgba(0, 0, 0, 0.08)rgba(0, 0, 0, 0.32)
edge
rgba(255, 255, 255, 0.80)rgba(255, 255, 255, 0.24)
ice
#DCEBFF#BDD7FF
blue
#8FB5FF#659BFA
lilac
#C9B7FF#AA82FF
rose
#FFD1E8#FF9D90
mint
#C7F4E8#70D8F1
apricot
#FFD2AE#FF9A61

display

7 roles
glass
#07090A#000000
bed
#0E1214#07090A
bezel
#000000#000000
text
#FCFDFD#FCFDFD
muted
#9EA9B1#77838C
trace
#FF742F#FF742F
reflection
rgba(255, 255, 255, 0.08)rgba(255, 255, 255, 0.12)

Signature

12 roles
shell
#E4E5E4#171C1F
panel
#EFF0F0#0E1214
bed
#D5D7D6#07090A
control
#F7F8F8#22282C
well
#07090A#07090A
edge
#7C8180#000000
seam
#BEC1C0#171C1F
text
#0E1214#F7F8F8
muted
#424B52#9EA9B1
subtle
#5A656D#77838C
highlight
rgba(255, 255, 255, 0.80)rgba(255, 255, 255, 0.12)
contact
rgba(0, 0, 0, 0.32)rgba(0, 0, 0, 0.80)