Skip to content
MENU

Soracom

Design System

Colors

Our color palette uses accents of bright colors backed by an overall neutral tone.

Color swatches 

Class: ds-*--color-celeste-dim --color-celeste-dim
CSS: var(--color-celeste-dim) var(--color-celeste-dim)
SCSS: $color-celeste-950 $color-celeste-950
Hex: #062022 #062022
Class: ds-*--color-celeste-darkest --color-celeste-darkest
CSS: var(--color-celeste-darkest) var(--color-celeste-darkest)
SCSS: $color-celeste-900 $color-celeste-900
Hex: #0a3639 #0a3639
Class: ds-*--color-celeste-darker --color-celeste-darker
CSS: var(--color-celeste-darker) var(--color-celeste-darker)
SCSS: $color-celeste-800 $color-celeste-800
Hex: #0e494d #0e494d
Class: ds-*--color-celeste-dark --color-celeste-dark
CSS: var(--color-celeste-dark) var(--color-celeste-dark)
SCSS: $color-celeste-700 $color-celeste-700
Hex: #15696e #15696e
Class: ds-*--color-celeste-shade --color-celeste-shade
CSS: var(--color-celeste-shade) var(--color-celeste-shade)
SCSS: $color-celeste-600 $color-celeste-600
Hex: #209ea6 #209ea6
Class: ds-*--color-celeste --color-celeste
CSS: var(--color-celeste) var(--color-celeste)
SCSS: $color-celeste $color-celeste
Hex: #34cdd7 #34cdd7
Class: ds-*--color-celeste-mid --color-celeste-mid
CSS: var(--color-celeste-mid) var(--color-celeste-mid)
SCSS: $color-celeste-400 $color-celeste-400
Hex: #68dde4 #68dde4
Class: ds-*--color-celeste-light --color-celeste-light
CSS: var(--color-celeste-light) var(--color-celeste-light)
SCSS: $color-celeste-300 $color-celeste-300
Hex: #a3ecf1 #a3ecf1
Class: ds-*--color-celeste-lighter --color-celeste-lighter
CSS: var(--color-celeste-lighter) var(--color-celeste-lighter)
SCSS: $color-celeste-200 $color-celeste-200
Hex: #c9f5f8 #c9f5f8
Class: ds-*--color-celeste-lightest --color-celeste-lightest
CSS: var(--color-celeste-lightest) var(--color-celeste-lightest)
SCSS: $color-celeste-100 $color-celeste-100
Hex: #e7fbfd #e7fbfd
Class: ds-*--color-celeste-bright --color-celeste-bright
CSS: var(--color-celeste-bright) var(--color-celeste-bright)
SCSS: $color-celeste-50 $color-celeste-50
Hex: #f6fefe #f6fefe
Class: ds-*--color-ink-dim --color-ink-dim
CSS: var(--color-ink-dim) var(--color-ink-dim)
SCSS: $color-ink-950 $color-ink-950
Hex: #0f1419 #0f1419
Class: ds-*--color-ink-darkest --color-ink-darkest
CSS: var(--color-ink-darkest) var(--color-ink-darkest)
SCSS: $color-ink-900 $color-ink-900
Hex: #1a2129 #1a2129
Class: ds-*--color-ink-darker --color-ink-darker
CSS: var(--color-ink-darker) var(--color-ink-darker)
SCSS: $color-ink-800 $color-ink-800
Hex: #242d37 #242d37
Class: ds-*--color-ink-dark --color-ink-dark
CSS: var(--color-ink-dark) var(--color-ink-dark)
SCSS: $color-ink-700 $color-ink-700
Hex: #34414e #34414e
Class: ds-*--color-ink-shade --color-ink-shade
CSS: var(--color-ink-shade) var(--color-ink-shade)
SCSS: $color-ink-600 $color-ink-600
Hex: #506275 #506275
Class: ds-*--color-ink --color-ink
CSS: var(--color-ink) var(--color-ink)
SCSS: $color-ink $color-ink
Hex: #718599 #718599
Class: ds-*--color-ink-mid --color-ink-mid
CSS: var(--color-ink-mid) var(--color-ink-mid)
SCSS: $color-ink-400 $color-ink-400
Hex: #91a6ba #91a6ba
Class: ds-*--color-ink-light --color-ink-light
CSS: var(--color-ink-light) var(--color-ink-light)
SCSS: $color-ink-300 $color-ink-300
Hex: #b8c9da #b8c9da
Class: ds-*--color-ink-lighter --color-ink-lighter
CSS: var(--color-ink-lighter) var(--color-ink-lighter)
SCSS: $color-ink-200 $color-ink-200
Hex: #d4e1ed #d4e1ed
Class: ds-*--color-ink-lightest --color-ink-lightest
CSS: var(--color-ink-lightest) var(--color-ink-lightest)
SCSS: $color-ink-100 $color-ink-100
Hex: #eaf2f9 #eaf2f9
Class: ds-*--color-ink-bright --color-ink-bright
CSS: var(--color-ink-bright) var(--color-ink-bright)
SCSS: $color-ink-50 $color-ink-50
Hex: #f7fafd #f7fafd
Class: ds-*--color-gray-dim --color-gray-dim
CSS: var(--color-gray-dim) var(--color-gray-dim)
SCSS: $color-gray-950 $color-gray-950
Hex: #161717 #161717
Class: ds-*--color-gray-darkest --color-gray-darkest
CSS: var(--color-gray-darkest) var(--color-gray-darkest)
SCSS: $color-gray-900 $color-gray-900
Hex: #242627 #242627
Class: ds-*--color-gray-darker --color-gray-darker
CSS: var(--color-gray-darker) var(--color-gray-darker)
SCSS: $color-gray-800 $color-gray-800
Hex: #313335 #313335
Class: ds-*--color-gray-dark --color-gray-dark
CSS: var(--color-gray-dark) var(--color-gray-dark)
SCSS: $color-gray-700 $color-gray-700
Hex: #474a4c #474a4c
Class: ds-*--color-gray-shade --color-gray-shade
CSS: var(--color-gray-shade) var(--color-gray-shade)
SCSS: $color-gray-600 $color-gray-600
Hex: #6b6f72 #6b6f72
Class: ds-*--color-gray --color-gray
CSS: var(--color-gray) var(--color-gray)
SCSS: $color-gray $color-gray
Hex: #929699 #929699
Class: ds-*--color-gray-mid --color-gray-mid
CSS: var(--color-gray-mid) var(--color-gray-mid)
SCSS: $color-gray-400 $color-gray-400
Hex: #afb2b5 #afb2b5
Class: ds-*--color-gray-light --color-gray-light
CSS: var(--color-gray-light) var(--color-gray-light)
SCSS: $color-gray-300 $color-gray-300
Hex: #cfd1d2 #cfd1d2
Class: ds-*--color-gray-lighter --color-gray-lighter
CSS: var(--color-gray-lighter) var(--color-gray-lighter)
SCSS: $color-gray-200 $color-gray-200
Hex: #e4e5e6 #e4e5e6
Class: ds-*--color-gray-lightest --color-gray-lightest
CSS: var(--color-gray-lightest) var(--color-gray-lightest)
SCSS: $color-gray-100 $color-gray-100
Hex: #f3f3f4 #f3f3f4
Class: ds-*--color-gray-bright --color-gray-bright
CSS: var(--color-gray-bright) var(--color-gray-bright)
SCSS: $color-gray-50 $color-gray-50
Hex: #fbfbfb #fbfbfb
Class: ds-*--color-blue-dim --color-blue-dim
CSS: var(--color-blue-dim) var(--color-blue-dim)
SCSS: $color-blue-950 $color-blue-950
Hex: #061222 #061222
Class: ds-*--color-blue-darkest --color-blue-darkest
CSS: var(--color-blue-darkest) var(--color-blue-darkest)
SCSS: $color-blue-900 $color-blue-900
Hex: #0a1f39 #0a1f39
Class: ds-*--color-blue-darker --color-blue-darker
CSS: var(--color-blue-darker) var(--color-blue-darker)
SCSS: $color-blue-800 $color-blue-800
Hex: #0e2a4d #0e2a4d
Class: ds-*--color-blue-dark --color-blue-dark
CSS: var(--color-blue-dark) var(--color-blue-dark)
SCSS: $color-blue-700 $color-blue-700
Hex: #153c6e #153c6e
Class: ds-*--color-blue-shade --color-blue-shade
CSS: var(--color-blue-shade) var(--color-blue-shade)
SCSS: $color-blue-600 $color-blue-600
Hex: #205ba6 #205ba6
Class: ds-*--color-blue --color-blue
CSS: var(--color-blue) var(--color-blue)
SCSS: $color-blue $color-blue
Hex: #347cd7 #347cd7
Class: ds-*--color-blue-mid --color-blue-mid
CSS: var(--color-blue-mid) var(--color-blue-mid)
SCSS: $color-blue-400 $color-blue-400
Hex: #689fe4 #689fe4
Class: ds-*--color-blue-light --color-blue-light
CSS: var(--color-blue-light) var(--color-blue-light)
SCSS: $color-blue-300 $color-blue-300
Hex: #a3c5f1 #a3c5f1
Class: ds-*--color-blue-lighter --color-blue-lighter
CSS: var(--color-blue-lighter) var(--color-blue-lighter)
SCSS: $color-blue-200 $color-blue-200
Hex: #c9def8 #c9def8
Class: ds-*--color-blue-lightest --color-blue-lightest
CSS: var(--color-blue-lightest) var(--color-blue-lightest)
SCSS: $color-blue-100 $color-blue-100
Hex: #e7f0fd #e7f0fd
Class: ds-*--color-blue-bright --color-blue-bright
CSS: var(--color-blue-bright) var(--color-blue-bright)
SCSS: $color-blue-50 $color-blue-50
Hex: #f6fafe #f6fafe
Class: ds-*--color-green-dim --color-green-dim
CSS: var(--color-green-dim) var(--color-green-dim)
SCSS: $color-green-950 $color-green-950
Hex: #031d10 #031d10
Class: ds-*--color-green-darkest --color-green-darkest
CSS: var(--color-green-darkest) var(--color-green-darkest)
SCSS: $color-green-900 $color-green-900
Hex: #05311b #05311b
Class: ds-*--color-green-darker --color-green-darker
CSS: var(--color-green-darker) var(--color-green-darker)
SCSS: $color-green-800 $color-green-800
Hex: #074224 #074224
Class: ds-*--color-green-dark --color-green-dark
CSS: var(--color-green-dark) var(--color-green-dark)
SCSS: $color-green-700 $color-green-700
Hex: #0a5f34 #0a5f34
Class: ds-*--color-green-shade --color-green-shade
CSS: var(--color-green-shade) var(--color-green-shade)
SCSS: $color-green-600 $color-green-600
Hex: #0f8f4f #0f8f4f
Class: ds-*--color-green --color-green
CSS: var(--color-green) var(--color-green)
SCSS: $color-green $color-green
Hex: #15c16b #15c16b
Class: ds-*--color-green-mid --color-green-mid
CSS: var(--color-green-mid) var(--color-green-mid)
SCSS: $color-green-400 $color-green-400
Hex: #3aeb93 #3aeb93
Class: ds-*--color-green-light --color-green-light
CSS: var(--color-green-light) var(--color-green-light)
SCSS: $color-green-300 $color-green-300
Hex: #87f5be #87f5be
Class: ds-*--color-green-lighter --color-green-lighter
CSS: var(--color-green-lighter) var(--color-green-lighter)
SCSS: $color-green-200 $color-green-200
Hex: #bafada #bafada
Class: ds-*--color-green-lightest --color-green-lightest
CSS: var(--color-green-lightest) var(--color-green-lightest)
SCSS: $color-green-100 $color-green-100
Hex: #e0fdef #e0fdef
Class: ds-*--color-green-bright --color-green-bright
CSS: var(--color-green-bright) var(--color-green-bright)
SCSS: $color-green-50 $color-green-50
Hex: #f4fff9 #f4fff9
Class: ds-*--color-yellow-dim --color-yellow-dim
CSS: var(--color-yellow-dim) var(--color-yellow-dim)
SCSS: $color-yellow-950 $color-yellow-950
Hex: #252406 #252406
Class: ds-*--color-yellow-darkest --color-yellow-darkest
CSS: var(--color-yellow-darkest) var(--color-yellow-darkest)
SCSS: $color-yellow-900 $color-yellow-900
Hex: #3e3c0b #3e3c0b
Class: ds-*--color-yellow-darker --color-yellow-darker
CSS: var(--color-yellow-darker) var(--color-yellow-darker)
SCSS: $color-yellow-800 $color-yellow-800
Hex: #54520f #54520f
Class: ds-*--color-yellow-dark --color-yellow-dark
CSS: var(--color-yellow-dark) var(--color-yellow-dark)
SCSS: $color-yellow-700 $color-yellow-700
Hex: #797516 #797516
Class: ds-*--color-yellow-shade --color-yellow-shade
CSS: var(--color-yellow-shade) var(--color-yellow-shade)
SCSS: $color-yellow-600 $color-yellow-600
Hex: #b6b121 #b6b121
Class: ds-*--color-yellow --color-yellow
CSS: var(--color-yellow) var(--color-yellow)
SCSS: $color-yellow $color-yellow
Hex: #dcd747 #dcd747
Class: ds-*--color-yellow-mid --color-yellow-mid
CSS: var(--color-yellow-mid) var(--color-yellow-mid)
SCSS: $color-yellow-400 $color-yellow-400
Hex: #e7e477 #e7e477
Class: ds-*--color-yellow-light --color-yellow-light
CSS: var(--color-yellow-light) var(--color-yellow-light)
SCSS: $color-yellow-300 $color-yellow-300
Hex: #f2f0ab #f2f0ab
Class: ds-*--color-yellow-lighter --color-yellow-lighter
CSS: var(--color-yellow-lighter) var(--color-yellow-lighter)
SCSS: $color-yellow-200 $color-yellow-200
Hex: #f9f7cf #f9f7cf
Class: ds-*--color-yellow-lightest --color-yellow-lightest
CSS: var(--color-yellow-lightest) var(--color-yellow-lightest)
SCSS: $color-yellow-100 $color-yellow-100
Hex: #fdfce9 #fdfce9
Class: ds-*--color-yellow-bright --color-yellow-bright
CSS: var(--color-yellow-bright) var(--color-yellow-bright)
SCSS: $color-yellow-50 $color-yellow-50
Hex: #fefef7 #fefef7
Class: ds-*--color-orange-dim --color-orange-dim
CSS: var(--color-orange-dim) var(--color-orange-dim)
SCSS: $color-orange-950 $color-orange-950
Hex: #251400 #251400
Class: ds-*--color-orange-darkest --color-orange-darkest
CSS: var(--color-orange-darkest) var(--color-orange-darkest)
SCSS: $color-orange-900 $color-orange-900
Hex: #3d2100 #3d2100
Class: ds-*--color-orange-darker --color-orange-darker
CSS: var(--color-orange-darker) var(--color-orange-darker)
SCSS: $color-orange-800 $color-orange-800
Hex: #5c2900 #5c2900
Class: ds-*--color-orange-dark --color-orange-dark
CSS: var(--color-orange-dark) var(--color-orange-dark)
SCSS: $color-orange-700 $color-orange-700
Hex: #8a4000 #8a4000
Class: ds-*--color-orange-shade --color-orange-shade
CSS: var(--color-orange-shade) var(--color-orange-shade)
SCSS: $color-orange-600 $color-orange-600
Hex: #cc6300 #cc6300
Class: ds-*--color-orange --color-orange
CSS: var(--color-orange) var(--color-orange)
SCSS: $color-orange $color-orange
Hex: #e67600 #e67600
Class: ds-*--color-orange-mid --color-orange-mid
CSS: var(--color-orange-mid) var(--color-orange-mid)
SCSS: $color-orange-400 $color-orange-400
Hex: #ffa53e #ffa53e
Class: ds-*--color-orange-light --color-orange-light
CSS: var(--color-orange-light) var(--color-orange-light)
SCSS: $color-orange-300 $color-orange-300
Hex: #ffca7a #ffca7a
Class: ds-*--color-orange-lighter --color-orange-lighter
CSS: var(--color-orange-lighter) var(--color-orange-lighter)
SCSS: $color-orange-200 $color-orange-200
Hex: #ffe0b3 #ffe0b3
Class: ds-*--color-orange-lightest --color-orange-lightest
CSS: var(--color-orange-lightest) var(--color-orange-lightest)
SCSS: $color-orange-100 $color-orange-100
Hex: #ffeed1 #ffeed1
Class: ds-*--color-orange-bright --color-orange-bright
CSS: var(--color-orange-bright) var(--color-orange-bright)
SCSS: $color-orange-50 $color-orange-50
Hex: #fff9eb #fff9eb
Class: ds-*--color-red-dim --color-red-dim
CSS: var(--color-red-dim) var(--color-red-dim)
SCSS: $color-red-950 $color-red-950
Hex: #220806 #220806
Class: ds-*--color-red-darkest --color-red-darkest
CSS: var(--color-red-darkest) var(--color-red-darkest)
SCSS: $color-red-900 $color-red-900
Hex: #390d0a #390d0a
Class: ds-*--color-red-darker --color-red-darker
CSS: var(--color-red-darker) var(--color-red-darker)
SCSS: $color-red-800 $color-red-800
Hex: #4d120e #4d120e
Class: ds-*--color-red-dark --color-red-dark
CSS: var(--color-red-dark) var(--color-red-dark)
SCSS: $color-red-700 $color-red-700
Hex: #6e1a15 #6e1a15
Class: ds-*--color-red-shade --color-red-shade
CSS: var(--color-red-shade) var(--color-red-shade)
SCSS: $color-red-600 $color-red-600
Hex: #a62820 #a62820
Class: ds-*--color-red --color-red
CSS: var(--color-red) var(--color-red)
SCSS: $color-red $color-red
Hex: #d73e34 #d73e34
Class: ds-*--color-red-mid --color-red-mid
CSS: var(--color-red-mid) var(--color-red-mid)
SCSS: $color-red-400 $color-red-400
Hex: #e47068 #e47068
Class: ds-*--color-red-light --color-red-light
CSS: var(--color-red-light) var(--color-red-light)
SCSS: $color-red-300 $color-red-300
Hex: #f1a7a3 #f1a7a3
Class: ds-*--color-red-lighter --color-red-lighter
CSS: var(--color-red-lighter) var(--color-red-lighter)
SCSS: $color-red-200 $color-red-200
Hex: #f8ccc9 #f8ccc9
Class: ds-*--color-red-lightest --color-red-lightest
CSS: var(--color-red-lightest) var(--color-red-lightest)
SCSS: $color-red-100 $color-red-100
Hex: #fde8e7 #fde8e7
Class: ds-*--color-red-bright --color-red-bright
CSS: var(--color-red-bright) var(--color-red-bright)
SCSS: $color-red-50 $color-red-50
Hex: #fef6f6 #fef6f6
Class: ds-*--color-magenta-dim --color-magenta-dim
CSS: var(--color-magenta-dim) var(--color-magenta-dim)
SCSS: $color-magenta-950 $color-magenta-950
Hex: #22061b #22061b
Class: ds-*--color-magenta-darkest --color-magenta-darkest
CSS: var(--color-magenta-darkest) var(--color-magenta-darkest)
SCSS: $color-magenta-900 $color-magenta-900
Hex: #390a2c #390a2c
Class: ds-*--color-magenta-darker --color-magenta-darker
CSS: var(--color-magenta-darker) var(--color-magenta-darker)
SCSS: $color-magenta-800 $color-magenta-800
Hex: #4d0e3c #4d0e3c
Class: ds-*--color-magenta-dark --color-magenta-dark
CSS: var(--color-magenta-dark) var(--color-magenta-dark)
SCSS: $color-magenta-700 $color-magenta-700
Hex: #6e1556 #6e1556
Class: ds-*--color-magenta-shade --color-magenta-shade
CSS: var(--color-magenta-shade) var(--color-magenta-shade)
SCSS: $color-magenta-600 $color-magenta-600
Hex: #a62082 #a62082
Class: ds-*--color-magenta --color-magenta
CSS: var(--color-magenta) var(--color-magenta)
SCSS: $color-magenta $color-magenta
Hex: #d734ab #d734ab
Class: ds-*--color-magenta-mid --color-magenta-mid
CSS: var(--color-magenta-mid) var(--color-magenta-mid)
SCSS: $color-magenta-400 $color-magenta-400
Hex: #e468c3 #e468c3
Class: ds-*--color-magenta-light --color-magenta-light
CSS: var(--color-magenta-light) var(--color-magenta-light)
SCSS: $color-magenta-300 $color-magenta-300
Hex: #f1a3db #f1a3db
Class: ds-*--color-magenta-lighter --color-magenta-lighter
CSS: var(--color-magenta-lighter) var(--color-magenta-lighter)
SCSS: $color-magenta-200 $color-magenta-200
Hex: #f8c9eb #f8c9eb
Class: ds-*--color-magenta-lightest --color-magenta-lightest
CSS: var(--color-magenta-lightest) var(--color-magenta-lightest)
SCSS: $color-magenta-100 $color-magenta-100
Hex: #fde7f7 #fde7f7
Class: ds-*--color-magenta-bright --color-magenta-bright
CSS: var(--color-magenta-bright) var(--color-magenta-bright)
SCSS: $color-magenta-50 $color-magenta-50
Hex: #fef6fc #fef6fc

Supported components 

The following SDS components support applying the full range of SDS colors simply by using the class suffix:

Colors should only be used if it is decorative only (i.e. do not use the –color-red if it is an alert/error, use the visual state instead).

Naming 

  • 950 dim
  • 900 darkest
  • 800 darker
  • 700 dark
  • 600 shade
  • 500 (color)
  • 400 mid
  • 300 light
  • 200 lighter
  • 100 lightest
  • 050 bright

Colors referenced using the number suffix are immutable - and do not change if dark mode is enabled.

Colors referenced using the named suffix will changed to the opposite numbered value if dark mode is enabled.

Accessibility 

Soracom are committed to complying with the WCAG AA standard for contrast ratios to ensure all our products and services are accessible to all users. To achieve this, careful consideration should be used when applying colors through our products.

The primary color celeste ( #34cdd7 ) does not pass WCAG AA color contrast standards when used for text on a white background, or when white text is used on a celeste background.

To meet accessibility requirements, celeste-600 ( #209ea6 ) should be used in those situations.

The following table shows the compliant and non-compliant combinations.