Skip to content

Color Primitives

Complete raw color ramps for audit and token construction. Product code never consumes these values directly.

Color / inventory

Primitive color system

These are the raw ingredients, not an application API. Product and component code consume semantic or material roles; this inspector exposes the primitives so every ramp can be audited.

Absolute

Absolute white and black endpoints.

02
  1. white#FFFFFF
  2. black#000000

Neutral

Achromatic UI ramp for text, icons, and neutral structure.

14
  1. 0#FFFFFF
  2. 25#FCFCFC
  3. 50#F7F7F7
  4. 100#EFEFEF
  5. 200#DFDFDF
  6. 300#C9C9C9
  7. 400#A8A8A8
  8. 500#808080
  9. 600#626262
  10. 700#474747
  11. 800#303030
  12. 900#202020
  13. 950#121212
  14. 1000#000000

Mineral

Warm white ramp for calm application canvases and paper-like planes.

12
  1. 25#FEFDFB
  2. 50#FAF9F6
  3. 100#F4F2ED
  4. 200#E9E6DF
  5. 300#D9D5CC
  6. 400#BCB7AC
  7. 500#958F84
  8. 600#726D64
  9. 700#555149
  10. 800#393630
  11. 900#25231F
  12. 950#151411

Silver

Cool metallic ramp used by aluminum material recipes.

12
  1. 25#FCFDFD
  2. 50#F7F8F8
  3. 100#EFF0F0
  4. 200#E4E5E4
  5. 300#D5D7D6
  6. 400#BEC1C0
  7. 500#A0A4A3
  8. 600#7C8180
  9. 700#5A5F5E
  10. 800#3A3E3D
  11. 900#252827
  12. 950#121414

Graphite

Cool black ramp used by graphite and dark-anodized material recipes.

13
  1. 25#F7F9FA
  2. 50#EEF1F3
  3. 100#DDE2E5
  4. 200#C2CAD0
  5. 300#9EA9B1
  6. 400#77838C
  7. 500#5A656D
  8. 600#424B52
  9. 700#30373C
  10. 800#22282C
  11. 900#171C1F
  12. 950#0E1214
  13. 1000#07090A

Signal Orange

Industrial signal ramp. Reserved for state, focus, and scarce emphasis.

12
  1. 25#FFF9F5
  2. 50#FFF1E8
  3. 100#FFE0CC
  4. 200#FFC09A
  5. 300#FF9A61
  6. 400#FF742F
  7. 500#FF5A1F
  8. 600#EE430F
  9. 700#C9320A
  10. 800#9F290E
  11. 900#7F2511
  12. 950#451005

Information Blue

Cool optical and informational ramp.

12
  1. 25#F7FAFF
  2. 50#EEF5FF
  3. 100#DCEAFF
  4. 200#BDD7FF
  5. 300#90BBFF
  6. 400#659BFA
  7. 500#4B7DEB
  8. 600#365FD0
  9. 700#2E4DAA
  10. 800#293F86
  11. 900#26386A
  12. 950#17213F

AI Violet

Spectral glass and AI-state ramp.

12
  1. 25#FBFAFF
  2. 50#F5F2FF
  3. 100#ECE6FF
  4. 200#DCD0FF
  5. 300#C6ADFF
  6. 400#AA82FF
  7. 500#8D5CF5
  8. 600#7440DB
  9. 700#6033B6
  10. 800#502E94
  11. 900#432878
  12. 950#29134F

Optical Cyan

Optical edge and secondary information ramp.

12
  1. 25#F4FCFF
  2. 50#E7F9FF
  3. 100#CFF3FF
  4. 200#A8E9FA
  5. 300#70D8F1
  6. 400#38BFE2
  7. 500#16A2C7
  8. 600#117FA1
  9. 700#146781
  10. 800#17536A
  11. 900#174659
  12. 950#082E3C

Success Green

Success and healthy-system ramp.

12
  1. 25#F5FEF8
  2. 50#EAFBF0
  3. 100#D2F5DE
  4. 200#A7EBC0
  5. 300#70D99A
  6. 400#3CC275
  7. 500#20A85B
  8. 600#168747
  9. 700#166B3B
  10. 800#165532
  11. 900#14462B
  12. 950#082719

Warning Amber

Warning and attention ramp distinct from Uxome signal orange.

12
  1. 25#FFFCF2
  2. 50#FFF8DF
  3. 100#FDEFC0
  4. 200#F9DE86
  5. 300#F4C84B
  6. 400#EDAF21
  7. 500#D98F0B
  8. 600#BA6B06
  9. 700#954A0A
  10. 800#793B10
  11. 900#643212
  12. 950#3A1906

Danger Red

Danger and destructive-action ramp.

12
  1. 25#FFF8F7
  2. 50#FFF0EE
  3. 100#FFE0DC
  4. 200#FFC5BD
  5. 300#FF9D90
  6. 400#FA6B59
  7. 500#E84937
  8. 600#D12F20
  9. 700#AF2519
  10. 800#91231B
  11. 900#78231D
  12. 950#410E0A

Material Transparency

Material highlights, contacts, scrims, and overlays.

20
  1. white-04rgba(255, 255, 255, 0.04)
  2. white-08rgba(255, 255, 255, 0.08)
  3. white-12rgba(255, 255, 255, 0.12)
  4. white-16rgba(255, 255, 255, 0.16)
  5. white-24rgba(255, 255, 255, 0.24)
  6. white-32rgba(255, 255, 255, 0.32)
  7. white-48rgba(255, 255, 255, 0.48)
  8. white-64rgba(255, 255, 255, 0.64)
  9. white-80rgba(255, 255, 255, 0.80)
  10. white-92rgba(255, 255, 255, 0.92)
  11. black-04rgba(0, 0, 0, 0.04)
  12. black-08rgba(0, 0, 0, 0.08)
  13. black-12rgba(0, 0, 0, 0.12)
  14. black-16rgba(0, 0, 0, 0.16)
  15. black-24rgba(0, 0, 0, 0.24)
  16. black-32rgba(0, 0, 0, 0.32)
  17. black-48rgba(0, 0, 0, 0.48)
  18. black-64rgba(0, 0, 0, 0.64)
  19. black-80rgba(0, 0, 0, 0.80)
  20. black-92rgba(0, 0, 0, 0.92)

Spectral Glass

Sparse optical tints for glass, illumination, and generative media—not routine controls.

06
  1. ice#DCEBFF
  2. blue#8FB5FF
  3. lilac#C9B7FF
  4. rose#FFD1E8
  5. mint#C7F4E8
  6. apricot#FFD2AE