Skip to content
7 Seventh UI CSS

Foundations

Bitbucket Figma

Color Tokens

Source: Figma Primitives/Color, node 2198:8510.

Neutral Colors

Neutral

  1. Neutral-100--sui-color-neutral-100#fafafa
  2. Neutral-200--sui-color-neutral-200#f0f0f0
  3. Neutral-300--sui-color-neutral-300#e8e8e8
  4. Neutral-400--sui-color-neutral-400#d9d9d9
  5. Neutral-500--sui-color-neutral-500#adadad
  6. Neutral-600--sui-color-neutral-600#707070
  7. Neutral-700--sui-color-neutral-700#595959
  8. Neutral-800--sui-color-neutral-800#373737
  9. Neutral-900--sui-color-neutral-900#262626
  10. Neutral-1000--sui-color-neutral-1000#1a1a1a

Neutral Alpha Light

  1. Neutral-alpha-light-100A--sui-color-neutral-alpha-light-100argba(38, 38, 38, 0.04)
  2. Neutral-alpha-light-200A--sui-color-neutral-alpha-light-200argba(38, 38, 38, 0.08)
  3. Neutral-alpha-light-300A--sui-color-neutral-alpha-light-300argba(38, 38, 38, 0.16)
  4. Neutral-alpha-light-400A--sui-color-neutral-alpha-light-400argba(38, 38, 38, 0.24)
  5. Neutral-alpha-light-500A--sui-color-neutral-alpha-light-500argba(38, 38, 38, 0.32)
  6. Neutral-alpha-light-600A--sui-color-neutral-alpha-light-600argba(38, 38, 38, 0.4)

White

  1. White-1000--sui-color-white-1000#ffffff
  2. White-100A--sui-color-white-100argba(255, 255, 255, 0.05)
  3. White-200A--sui-color-white-200argba(255, 255, 255, 0.1)
  4. White-300A--sui-color-white-300argba(255, 255, 255, 0.2)
  5. White-400A--sui-color-white-400argba(255, 255, 255, 0.4)
  6. White-500A--sui-color-white-500argba(255, 255, 255, 0.7)
  7. White-600A--sui-color-white-600argba(255, 255, 255, 0.8)
  8. White-700A--sui-color-white-700argba(255, 255, 255, 0.85)
  9. White-800A--sui-color-white-800argba(255, 255, 255, 0.9)
  10. White-900A--sui-color-white-900argba(255, 255, 255, 0.95)

Neutral Alpha Dark

  1. Neutral-alpha-dark-100A--sui-color-neutral-alpha-dark-100argba(13, 13, 13, 0.24)
  2. Neutral-alpha-dark-200A--sui-color-neutral-alpha-dark-200argba(217, 217, 217, 0.04)
  3. Neutral-alpha-dark-300A--sui-color-neutral-alpha-dark-300argba(217, 217, 217, 0.08)
  4. Neutral-alpha-dark-400A--sui-color-neutral-alpha-dark-400argba(217, 217, 217, 0.12)
  5. Neutral-alpha-dark-500A--sui-color-neutral-alpha-dark-500argba(217, 217, 217, 0.14)
  6. Neutral-alpha-dark-600A--sui-color-neutral-alpha-dark-600argba(217, 217, 217, 0.2)

Black

  1. Black-1000--sui-color-black-1000#0d0d0d
  2. Black-100A--sui-color-black-100argba(13, 13, 13, 0.05)
  3. Black-200A--sui-color-black-200argba(13, 13, 13, 0.1)
  4. Black-300A--sui-color-black-300argba(13, 13, 13, 0.2)
  5. Black-400A--sui-color-black-400argba(13, 13, 13, 0.4)
  6. Black-500A--sui-color-black-500argba(13, 13, 13, 0.7)
  7. Black-600A--sui-color-black-600argba(13, 13, 13, 0.8)
  8. Black-700A--sui-color-black-700argba(13, 13, 13, 0.85)
  9. Black-800A--sui-color-black-800argba(13, 13, 13, 0.9)
  10. Black-900A--sui-color-black-900argba(13, 13, 13, 0.95)

Color Palettes

Blue

  1. Blue-100--sui-color-blue-100#e0efff
  2. Blue-200--sui-color-blue-200#c7e1ff
  3. Blue-300--sui-color-blue-300#75b6ff
  4. Blue-400--sui-color-blue-400#2e8fff
  5. Blue-400A--sui-color-blue-400a#30b4fc
  6. Blue-500--sui-color-blue-500#0f7fff
  7. Blue-600--sui-color-blue-600#004ba0
  8. Blue-700--sui-color-blue-700#003c80
  9. Blue-800--sui-color-blue-800#002d61
  10. Blue-900--sui-color-blue-900#001f42
  11. Blue-1000--sui-color-blue-1000#001733

Green

  1. Green-100--sui-color-green-100#dff6e9
  2. Green-200--sui-color-green-200#c3eed6
  3. Green-300--sui-color-green-300#88ddad
  4. Green-400--sui-color-green-400#61d192
  5. Green-500--sui-color-green-500#30cf76
  6. Green-600--sui-color-green-600#28a961
  7. Green-700--sui-color-green-700#168848
  8. Green-800--sui-color-green-800#15753f
  9. Green-900--sui-color-green-900#105b31
  10. Green-1000--sui-color-green-1000#0c4526

Turquoise

  1. Turquoise-100--sui-color-turquoise-100#cef3ed
  2. Turquoise-200--sui-color-turquoise-200#9be1d8
  3. Turquoise-300--sui-color-turquoise-300#62d0c2
  4. Turquoise-400--sui-color-turquoise-400#50bbaf
  5. Turquoise-500--sui-color-turquoise-500#36a094
  6. Turquoise-600--sui-color-turquoise-600#1e8b7f
  7. Turquoise-700--sui-color-turquoise-700#02786d
  8. Turquoise-800--sui-color-turquoise-800#005e55
  9. Turquoise-900--sui-color-turquoise-900#00443d
  10. Turquoise-1000--sui-color-turquoise-1000#002b26

Purple

  1. Purple-100--sui-color-purple-100#f1e0ff
  2. Purple-200--sui-color-purple-200#e7c8ff
  3. Purple-300--sui-color-purple-300#d28fff
  4. Purple-400--sui-color-purple-400#c762ff
  5. Purple-500--sui-color-purple-500#c847ff
  6. Purple-600--sui-color-purple-600#c02bff
  7. Purple-700--sui-color-purple-700#ab00e7
  8. Purple-800--sui-color-purple-800#8600b6
  9. Purple-900--sui-color-purple-900#630087
  10. Purple-1000--sui-color-purple-1000#42005b

Pink

  1. Pink-100--sui-color-pink-100#fee7ed
  2. Pink-200--sui-color-pink-200#fbc7d5
  3. Pink-300--sui-color-pink-300#f888ae
  4. Pink-400--sui-color-pink-400#f65495
  5. Pink-500--sui-color-pink-500#e62881
  6. Pink-600--sui-color-pink-600#c8206f
  7. Pink-700--sui-color-pink-700#b21a61
  8. Pink-800--sui-color-pink-800#9d1756
  9. Pink-900--sui-color-pink-900#74103e
  10. Pink-1000--sui-color-pink-1000#4e0627

Orange

  1. Orange-100--sui-color-orange-100#ffefe5
  2. Orange-200--sui-color-orange-200#ffc8a8
  3. Orange-300--sui-color-orange-300#ffaa7a
  4. Orange-400--sui-color-orange-400#ff833d
  5. Orange-500--sui-color-orange-500#ff6914
  6. Orange-600--sui-color-orange-600#ff6005
  7. Orange-700--sui-color-orange-700#cc5500
  8. Orange-800--sui-color-orange-800#c24600
  9. Orange-900--sui-color-orange-900#993800
  10. Orange-1000--sui-color-orange-1000#863404

Red

  1. Red-100--sui-color-red-100#ffe5e5
  2. Red-200--sui-color-red-200#ffc2c2
  3. Red-300--sui-color-red-300#ff8080
  4. Red-400--sui-color-red-400#ff4242
  5. Red-500--sui-color-red-500#ff2424
  6. Red-600--sui-color-red-600#eb151c
  7. Red-700--sui-color-red-700#bc1016
  8. Red-800--sui-color-red-800#9a1317
  9. Red-900--sui-color-red-900#881115
  10. Red-1000--sui-color-red-1000#5c0a0d

Yellow

  1. Yellow-100--sui-color-yellow-100#fff5d6
  2. Yellow-200--sui-color-yellow-200#ffedb8
  3. Yellow-300--sui-color-yellow-300#ffe38f
  4. Yellow-400--sui-color-yellow-400#ffd966
  5. Yellow-500--sui-color-yellow-500#ffce3d
  6. Yellow-600--sui-color-yellow-600#fabd05
  7. Yellow-700--sui-color-yellow-700#d48f06
  8. Yellow-800--sui-color-yellow-800#bc7c05
  9. Yellow-900--sui-color-yellow-900#9f6904
  10. Yellow-1000--sui-color-yellow-1000#8b5304