IBM Carbon

IBM’s open-source design system: the White (light) and Gray 100 (dark) themes’ colour tokens, the spacing scale, corner radii, the IBM Plex type families and the type scale, from @carbon/themes, @carbon/layout and @carbon/type. Brought into Stoaken by the Stoaken team from IBM’s published open-source packages, unchanged, under its licence. Stoaken isn’t affiliated with or endorsed by IBM.

Enterprise Accessible Dark mode Web React Open source Corporate Semantic tokens Spacing scale Typography scale

0 likes1 view282 tokens2 modes

color.focuscolor.shadowcolor.overlaycolor.field-01color.field-02color.field-03color.layer-01color.layer-02color.layer-03color.highlightcolor.ai-overlaycolor.backgroundcolor.syntax-tagcolor.syntax-urlcolor.text-errorcolor.toggle-off

Mode

Colour

234 colours in 13 groups. Hover a swatch for its name.

color.layer 29

01#f4f4f4
02#ffffff
03#f4f4f4
hover-01#e8e8e8
hover-02#e8e8e8
hover-03#e8e8e8
accent-01#e0e0e0
accent-02#e0e0e0
accent-03#e0e0e0
active-01#c6c6c6
active-02#c6c6c6
active-03#c6c6c6
selected-01#e0e0e0
selected-02#e0e0e0
selected-03#e0e0e0
background-01#ffffff
background-02#f4f4f4
background-03#ffffff
accent-hover-01#d1d1d1
accent-hover-02#d1d1d1
accent-hover-03#d1d1d1
accent-active-01#a8a8a8
accent-active-02#a8a8a8
accent-active-03#a8a8a8
selected-inverse#161616
selected-disabled#8d8d8d
selected-hover-01#d1d1d1
selected-hover-02#d1d1d1
selected-hover-03#d1d1d1

color.ai 21

overlay#00114180
aura-end#ffffff00
aura-start#4589ff1a
border-end#78a9ff
drop-shadow#0f62fe1a
border-start#a6c8ffa3
inner-shadow#4589ff1a
aura-start-sm#4589ff29
border-strong#4589ff
aura-hover-end#ffffff00
aura-hover-start#4589ff52
popover-background#ffffff
skeleton-background#d0e2ff
popover-caret-bottom#78a9ff
popover-caret-center#a0c3ff
aura-hover-background#edf5ff
popover-shadow-outer-01#0043ce0f
popover-shadow-outer-02#0000000a
skeleton-element-background#4589ff
popover-caret-bottom-background#eaf1ff
popover-caret-bottom-background-actions#e9effa

color.syntax 88

tag#007d79
url#343a3f
atom#161616
bool#161616
link#0f62fe
list#161616
meta#198038
name#0f62fe
null#161616
self#007d79
type#007d79
unit#198038
brace#343a3f
color#161616
float#198038
local#0f62fe
paren#343a3f
quote#198038
escape#343a3f
number#198038
regexp#6929c4
string#161616
strong#161616
bracket#343a3f
comment#198038
content#161616
deleted#ffd7d9
heading#00539a
integer#198038
invalid#da1e28

color.chat 21

button#0f62fe
avatar-bot#6f6f6f
avatar-user#0f62fe
bubble-user#e0e0e0
header-text#161616
prompt-text#161616
avatar-agent#393939
bubble-agent#ffffff
button-hover#8d8d8d1f
bubble-border#e0e0e0
button-active#8d8d8d80
button-selected#8d8d8d33
bubble-user-text#161616
shell-background#ffffff
bubble-agent-text#161616
button-text-hover#0043ce
header-background#ffffff
prompt-background#ffffff
prompt-border-end#f4f4f400
prompt-border-start#f4f4f4
button-text-selected#525252

color.focus 3

focus#0f62fe
inset#ffffff
inverse#ffffff

color.text 9

error#da1e28
helper#6f6f6f
inverse#ffffff
primary#161616
disabled#16161640
on-color#ffffff
secondary#525252
placeholder#16161666
on-color-disabled#8d8d8d

color.support 11

info#0043ce
error#da1e28
success#24a148
warning#f1c21b
info-inverse#4589ff
caution-major#ff832b
caution-minor#f1c21b
error-inverse#fa4d56
success-inverse#42be65
warning-inverse#f1c21b
caution-undefined#8a3ffc

color.field 6

01#f4f4f4
02#ffffff
03#f4f4f4
hover-01#e8e8e8
hover-02#e8e8e8
hover-03#e8e8e8

color.icon 7

inverse#ffffff
primary#161616
disabled#16161640
on-color#ffffff
secondary#525252
interactive#0f62fe
on-color-disabled#8d8d8d

color.border 16

inverse#161616
tile-01#c6c6c6
tile-02#a8a8a8
tile-03#c6c6c6
disabled#c6c6c6
strong-01#8d8d8d
strong-02#8d8d8d
strong-03#8d8d8d
subtle-00#e0e0e0
subtle-01#c6c6c6
subtle-02#e0e0e0
subtle-03#c6c6c6

color.background 8

background#ffffff
brand#0f62fe
hover#8d8d8d1f
active#8d8d8d80
inverse#393939
selected#8d8d8d33
inverse-hover#474747
selected-hover#8d8d8d52

More colours 7

shadow#0000004d
overlay#00000099
highlight#d0e2ff
toggle-off#8d8d8d
interactive#0f62fe
skeleton-element#c6c6c6
skeleton-background#e8e8e8

Spacing, type and more

48 tokens in color-scheme: light, drawn as what they are.

radius 6

161rem
241.5rem
000px
020.125rem
040.25rem
080.5rem

spacing 13

104rem
115rem
126rem
1310rem
010.125rem
020.25rem
030.5rem
040.75rem
051rem
061.5rem
072rem
082.5rem
093rem

typography 29

Sizes

Aa1042px
Aa1148px
Aa1254px
Aa1360px
Aa1468px
Aa1576px
Aa1684px
Aa1792px
Aa18102px
Aa19112px
Aa20122px
Aa21132px
Aa22144px
Aa23156px
Aa0112px
Aa0214px
Aa0316px
Aa0418px
Aa0520px
Aa0624px
Aa0728px
Aa0832px
Aa0936px

Typefaces

The quick brown foxmono · IBM Plex Mono
The quick brown foxsans · IBM Plex Sans
The quick brown foxserif · IBM Plex Serif

Weights

Aalight300
Aaregular400
Aasemibold600

IBM Carbon is shared by Stoaken Curated under the Apache 2.0 licence. Stoaken hosts it; Stoaken Curated is responsible for what it contains. See something wrong? Use Report.