Documentation Index
Fetch the complete documentation index at: https://docs.cognite.com/llms.txt
Use this file to discover all available pages before exploring further.
- Color draws attention and communicates meaning — use it purposefully, not decoratively.
- Use tokens as named. They reflect intended use and have been tested for it.
- Don’t adjust colors or opacity, and never use raw hex values — both break theming.
Color ramps
Color ramps are a sequential scale of tints and shades for a single hue (e.g.mountain-50 through mountain-950). Themed tokens map to specific steps on these ramps and swap their values between light and dark mode — so surface-default might point to mountain-50 in light mode and mountain-900 in dark mode.
Use themed tokens, not raw color ramps — unless a color must stay constant across light and dark mode.
Alpha values are semi-transparent overlays built from the color ramps. They are used primarily for charts or data visualizations and are therefore intentionally more muted. The map from 50-450 with 500 being for the base color for the light theme and 600-950 with 550 being the base color for the dark theme.
Mountain
Neutral base palette for text, surfaces, and borders.- Default
- Alpha (opacities)
mountain-white
#FFFFFF
mountain-10
#F9FAFA
mountain-50
#F1F2F3
mountain-100
#E4E6E8
mountain-200
#D4D7D9
mountain-300
#BBC0C4
mountain-400
#A5ABB1
mountain-450
#8B949A
mountain-500
#7C868E
mountain-550
#6D767E
mountain-600
#5E666D
mountain-650
#52595F
mountain-700
#40464A
mountain-800
#2D3134
mountain-900
#212426
mountain-950
#191B1D
mountain-black
#111213
Fjord
Primary decorative color used for charts.- Default
- Alpha (opacities)
fjord-50
#EFF2FD
fjord-100
#DFE5FC
fjord-200
#CCD5FA
fjord-300
#AEBDF7
fjord-400
#93A7F4
fjord-450
#728DF1
fjord-500
#5F7DEF
fjord-550
#486AED
fjord-600
#2F55EA
fjord-650
#1742E7
fjord-700
#1234B6
fjord-800
#0D2582
fjord-900
#0A1C61
fjord-950
#050F33
Nordic
Primary decorative color used for charts and Atlas AI.- Default
- Alpha (opacities)
nordic-50
#DAF9F2
nordic-100
#B4F2E5
nordic-200
#7FE9D2
nordic-300
#25D7B0
nordic-400
#21C09D
nordic-450
#1CA587
nordic-500
#1A967A
nordic-550
#17846C
nordic-600
#14735E
nordic-650
#116452
nordic-700
#0D4E40
nordic-800
#0A372D
nordic-900
#072922
nordic-950
#041511
Aurora
Primary decorative color used for charts and decorative elements.- Default
- Alpha (opacities)
aurora-50
#E7F9C6
aurora-100
#CFF38D
aurora-200
#ABE938
aurora-300
#90D217
aurora-400
#81BC14
aurora-450
#6EA112
aurora-500
#649210
aurora-550
#58810E
aurora-600
#4D700C
aurora-650
#43610B
aurora-700
#344C08
aurora-800
#253606
aurora-900
#1B2804
aurora-950
#0E1402
Dusk
Primary decorative color used for charts and decorative elements.- Default
- Alpha (opacities)
dusk-50
#F8EFF9
dusk-100
#F1E1F3
dusk-200
#E8CEEC
dusk-300
#DBB1E1
dusk-400
#CF97D7
dusk-450
#C078CB
dusk-500
#B765C4
dusk-550
#AD4EBB
dusk-600
#9940A6
dusk-650
#853790
dusk-700
#682C71
dusk-800
#4A1F50
dusk-900
#37173C
dusk-950
#1C0C1F
Sky
Seconadary decorative color used for Badges, Avatars, and illustrations.- Default
- Alpha (opacities)
sky-50
#DBF7FF
sky-100
#B7EFFE
sky-200
#84E4FE
sky-300
#25CFFD
sky-400
#02B9EA
sky-450
#029FC9
sky-500
#0290B6
sky-550
#017FA1
sky-600
#016E8C
sky-650
#01607A
sky-700
#014B60
sky-800
#013644
sky-900
#002832
sky-950
#00151A
Orange
Seconadary decorative color used for Badges, Avatars, and illustrations.- Default
- Alpha (opacities)
orange-50
#FEEFE6
orange-100
#FDE0CF
orange-200
#FCCDB0
orange-300
#FBAE7E
orange-400
#F98F4E
orange-450
#F7640A
orange-500
#E15A07
orange-550
#C75006
orange-600
#AD4506
orange-650
#963C05
orange-700
#762F04
orange-800
#542203
orange-900
#3E1902
orange-950
#210D01
Yellow
Seconadary decorative color used for Badges, Avatars, and illustrations.- Default
- Alpha (opacities)
yellow-50
#FFF4A2
yellow-100
#FFE834
yellow-200
#F3D700
yellow-300
#D8BF00
yellow-400
#C1AB00
yellow-450
#A69300
yellow-500
#968500
yellow-550
#857600
yellow-600
#736600
yellow-650
#645900
yellow-700
#4E4500
yellow-800
#373100
yellow-900
#292400
yellow-950
#151200
Pink
Seconadary decorative color used for Badges, Avatars, and illustrations.- Default
- Alpha (opacities)
pink-50
#FDEEF4
pink-100
#FBDEEA
pink-200
#F9CADD
pink-300
#F5A9C8
pink-400
#F28BB4
pink-450
#ED6199
pink-500
#E94487
pink-550
#E11A6A
pink-600
#C4175C
pink-650
#AB1451
pink-700
#881040
pink-800
#620B2E
pink-900
#490823
pink-950
#280513
Gray
Used for foucs states and secondary decorative color.- Default
- Alpha (opacities)
gray-50
#F0F2F9
gray-100
#E2E5F4
gray-200
#D0D6ED
gray-300
#B5BEE2
gray-400
#9DA9D9
gray-450
#818FCE
gray-500
#7081C7
gray-550
#5D70C0
gray-600
#4A5FB8
gray-650
#3F52A3
gray-700
#32417F
gray-800
#232E5A
gray-900
#1A2242
gray-950
#0D1122
Red
Maps to semantic status colors for destructive actions or critical alerts.- Default
- Alpha (opacities)
red-50
#FEEEF1
red-100
#FDDEE4
red-200
#FCCAD2
red-300
#FAA9B7
red-400
#F8899C
red-450
#F65E78
red-500
#F43D5C
red-550
#E90D32
red-600
#CB0B2C
red-650
#B20A26
red-700
#8D081F
red-800
#660616
red-900
#4E0411
red-950
#2C0209
Amber
Maps to semantic status colors for warnings.- Default
- Alpha (opacities)
amber-50
#FFF1D0
amber-100
#FFE3A2
amber-200
#FFD062
amber-300
#FCB100
amber-400
#E19E00
amber-450
#C18800
amber-500
#AF7B00
amber-550
#9B6D00
amber-600
#865E00
amber-650
#755200
amber-700
#5B4000
amber-800
#412D00
amber-900
#302200
amber-950
#181100
Green
Maps to semantic status colors for success.- Default
- Alpha (opacities)
green-50
#DDF9E7
green-100
#BBF3D0
green-200
#8BEAAE
green-300
#34DA71
green-400
#24C45E
green-450
#1FA851
green-500
#1C984A
green-550
#198741
green-600
#157538
green-650
#136631
green-700
#0F5026
green-800
#0A381B
green-900
#082A14
green-950
#04160A
Blue
Maps to semantic status colors for information.- Default
- Alpha (opacities)
blue-50
#E6F4FF
blue-100
#CEEAFF
blue-200
#AEDCFF
blue-300
#7CC6FF
blue-400
#4CB2FF
blue-450
#0B95FF
blue-500
#0086ED
blue-550
#0077D2
blue-600
#0067B6
blue-650
#005A9F
blue-700
#00477D
blue-800
#003259
blue-900
#002542
blue-950
#001423
Theme tokens
Semantic tokens are used for surfaces, text, borders, data visualizations and illustrations. They consist of base tokens, semantic tokens and decorative tokens.Base
Base tokens are used for most interactive elements and surfaces, which account for ~80-90% of the UI.Background
Surface, action, and state color tokens.- Light
- Dark
background
#FFFFFF
alternate-background
#F9FAFA
muted-background
#F1F2F3
card-background
#F9FAFA
primary-background
#212426
primary-background-hover
#40464A
secondary-background
#E4E6E8
secondary-background-hover
#D4D7D9
accent-background
#F1F2F3
accent-background-strong
#E4E6E8
input-active-background
#F9FAFA
active-background
#191B1D
active-background-hover
#2D3134
active-muted-background
#F1F2F3
active-muted-background-hover
#E4E6E8
popover-background
#FFFFFF
raised-background
#2D3134
disabled-background
#F1F2F3
background-fixed-light
#FFFFFF
background-fixed-dark
#212426
accent-background-fixed-dark
#2D3134
overlay-background
#000000
Foreground
Text, icon, and link color tokens.- Light
- Dark
foreground
#191B1D
secondary-foreground
#40464A
muted-foreground
#7C868E
disabled-foreground
#D4D7D9
link-foreground
#486AED
foreground-on-primary
#F1F2F3
foreground-on-active
#F1F2F3
foreground-fixed-light
#FFFFFF
foreground-fixed-dark
#191B1D
secondary-foreground-fixed-light
#D4D7D9
foreground-secondary-fixed-dark
#40464A
muted-foreground-fixed-light
#BBC0C4
Border and ring
Borders and focus-ring color tokens.- Light
- Dark
border
#E4E6E8
border-active
#191B1D
border-emphasized
#D4D7D9
border-fixed-light
#E4E6E8
border-on-dark
#2D3134
ring
#7081C7
ring-muted
#D0D6ED
ring-destructive
#CB0B2C
ring-destructive-muted
#FDDEE4
Semantic
Semantic tokens are used to communicate status and meaning and account for 5-10% of the UI.Background
Surface, action, and state color tokens.- Light
- Dark
info-background
#D0D6ED
info-background-hover
#B5BEE2
info-muted-background
#E2E5F4
success-background
#BBF3D0
success-background-hover
#8BEAAE
success-muted-background
#DDF9E7
warning-background
#FFE3A2
warning-background-hover
#FFD062
warning-muted-background
#FFF1D0
destructive-background
#FCCAD2
destructive-background-hover
#FAA9B7
destructive-muted-background
#FDDEE4
destructive-muted-background-hover
#FCCAD2
neutral-background
#E4E6E8
neutral-background-hover
#D4D7D9
neutral-muted-background
#F1F2F3
Foreground
Text and icon color tokens.- Light
- Dark
info-foreground
#4A5FB8
info-foreground-on-info
#32417F
success-foreground
#1C984A
success-foreground-on-success
#0F5026
warning-foreground
#C18800
warning-foreground-on-warning
#755200
destructive-foreground
#CB0B2C
destructive-foreground-on-critical
#8D081F
neutral-foreground
#52595F
neutral-foreground-on-neutral
#40464A
Decorative
Decorative tokens are used for Avatars, Badges and decorative elements and account for 5-10% of the UI.Background
Decorative background and hover tokens.- Light
- Dark
decorative-background-mountain
rgba(124, 134, 142, 0.2)
decorative-background-hover-mountain
rgba(124, 134, 142, 0.32)
decorative-background-fjord
rgba(95, 125, 239, 0.32)
decorative-background-hover-fjord
rgba(95, 125, 239, 0.5)
decorative-background-nordic
rgba(26, 150, 122, 0.2)
decorative-background-hover-nordic
rgba(26, 150, 122, 0.32)
decorative-background-aurora
rgba(100, 146, 16, 0.2)
decorative-background-hover-aurora
rgba(100, 146, 16, 0.32)
decorative-background-dusk
rgba(183, 101, 196, 0.32)
decorative-background-hover-dusk
rgba(183, 101, 196, 0.5)
decorative-background-orange
rgba(225, 90, 7, 0.32)
decorative-background-hover-orange
rgba(225, 90, 7, 0.5)
decorative-background-sky
rgba(2, 144, 182, 0.2)
decorative-background-hover-sky
rgba(2, 144, 182, 0.32)
Foreground
Decorative text and icon color tokens.- Light
- Dark
decorative-foreground-mountain
#2D3134
decorative-foreground-fjord
#1234B6
decorative-foreground-nordic
#0D4E40
decorative-foreground-aurora
#344C08
decorative-foreground-dusk
#682C71
decorative-foreground-orange
#762F04
decorative-foreground-sky
#014B60
Data visualizations
The following color tokens are semi-transparent color tokens derived from the alpha color ramps and are intended to be used on data visualizations such as charts. There are default and semantic color tokens for charts, which should be used appropriately. Choosing colors for data visualization- Single color, varying opacity works best for showing magnitude or intensity within one category — like a heatmap or density chart. Use the 1–6 scale in order.
- Multiple colors are for distinguishing unrelated categories — like separate data series in a line chart. Limit to what’s necessary; more colors add noise.
- Semantic colors (error, warning, success) should only appear when the data carries that meaning. Don’t repurpose them for neutral categories just for variety.
- Highlighting uses color to direct attention — keep most data in a neutral or muted state and use a prominent color only on the value that matters. If everything is highlighted, nothing is.
Default
Data visualization colors are ordered 1–6, from opaque to transparent. Use them in sequence.Fjord
Fjord colors are the default color choice for data visualization.- Light
- Dark
chart-fjord-color-1
rgba(95, 125, 239, 0.88)
chart-fjord-color-2
rgba(95, 125, 239, 0.68)
chart-fjord-color-3
rgba(95, 125, 239, 0.5)
chart-fjord-color-4
rgba(95, 125, 239, 0.32)
chart-fjord-color-5
rgba(95, 125, 239, 0.2)
chart-fjord-color-6
rgba(95, 125, 239, 0.1)
Nordic
Nordic colors are the secondary color choice for data visualization.- Light
- Dark
chart-nordic-color-1
rgba(26, 150, 122, 0.88)
chart-nordic-color-2
rgba(26, 150, 122, 0.68)
chart-nordic-color-3
rgba(26, 150, 122, 0.5)
chart-nordic-color-4
rgba(26, 150, 122, 0.32)
chart-nordic-color-5
rgba(26, 150, 122, 0.2)
chart-nordic-color-6
rgba(26, 150, 122, 0.1)
Dusk
Dusk colors are the tertiary color choice for data visualization.- Light
- Dark
chart-dusk-color-1
rgba(183, 101, 196, 0.88)
chart-dusk-color-2
rgba(183, 101, 196, 0.68)
chart-dusk-color-3
rgba(183, 101, 196, 0.5)
chart-dusk-color-4
rgba(183, 101, 196, 0.32)
chart-dusk-color-5
rgba(183, 101, 196, 0.2)
chart-dusk-color-6
rgba(183, 101, 196, 0.1)
Aurora
Aurora colors are the quaternary color choice for data visualization.- Light
- Dark
chart-aurora-color-1
rgba(100, 146, 16, 0.88)
chart-aurora-color-2
rgba(100, 146, 16, 0.68)
chart-aurora-color-3
rgba(100, 146, 16, 0.5)
chart-aurora-color-4
rgba(100, 146, 16, 0.32)
chart-aurora-color-5
rgba(100, 146, 16, 0.2)
chart-aurora-color-6
rgba(100, 146, 16, 0.1)
Orange
Orange colors are the quinary color choice for data visualization.- Light
- Dark
chart-orange-color-1
rgba(225, 90, 7, 0.88)
chart-orange-color-2
rgba(225, 90, 7, 0.68)
chart-orange-color-3
rgba(225, 90, 7, 0.5)
chart-orange-color-4
rgba(225, 90, 7, 0.32)
chart-orange-color-5
rgba(225, 90, 7, 0.2)
chart-orange-color-6
rgba(225, 90, 7, 0.1)
Semantic
Semantic colors should only be used to communicate status or meaning within data visualizations.Informational
Used to communicate informational or non-status within data visualizations.- Light
- Dark
chart-info-color-1
rgba(112, 129, 199, 0.88)
chart-info-color-2
rgba(112, 129, 199, 0.68)
chart-info-color-3
rgba(112, 129, 199, 0.5)
chart-info-color-4
rgba(112, 129, 199, 0.32)
chart-info-color-5
rgba(112, 129, 199, 0.2)
chart-info-color-6
rgba(112, 129, 199, 0.1)
Success
Used to communicate success or positive status within data visualizations.- Light
- Dark
chart-success-color-1
rgba(28, 152, 74, 0.88)
chart-success-color-2
rgba(28, 152, 74, 0.68)
chart-success-color-3
rgba(28, 152, 74, 0.5)
chart-success-color-4
rgba(28, 152, 74, 0.32)
chart-success-color-5
rgba(28, 152, 74, 0.2)
chart-success-color-6
rgba(28, 152, 74, 0.1)
Warning
Used to communicate warning or potential issues within data visualizations.- Light
- Dark
chart-warning-color-1
rgba(175, 123, 0, 0.88)
chart-warning-color-2
rgba(175, 123, 0, 0.68)
chart-warning-color-3
rgba(175, 123, 0, 0.5)
chart-warning-color-4
rgba(175, 123, 0, 0.32)
chart-warning-color-5
rgba(175, 123, 0, 0.2)
chart-warning-color-6
rgba(175, 123, 0, 0.1)
Error
Used to communicate error or negative status within data visualizations.- Light
- Dark
chart-error-color-1
rgba(244, 61, 92, 0.88)
chart-error-color-2
rgba(244, 61, 92, 0.68)
chart-error-color-3
rgba(244, 61, 92, 0.5)
chart-error-color-4
rgba(244, 61, 92, 0.32)
chart-error-color-5
rgba(244, 61, 92, 0.2)
chart-error-color-6
rgba(244, 61, 92, 0.1)
Neutral
Used to communicate neutral or non-status within data visualizations.- Light
- Dark
chart-neutral-color-1
rgba(124, 134, 142, 0.88)
chart-neutral-color-2
rgba(124, 134, 142, 0.68)
chart-neutral-color-3
rgba(124, 134, 142, 0.5)
chart-neutral-color-4
rgba(124, 134, 142, 0.32)
chart-neutral-color-5
rgba(124, 134, 142, 0.2)
chart-neutral-color-6
rgba(124, 134, 142, 0.1)
Gridlines
Used for the gridlines in charts.- Light
- Dark
chart-gridlines
#E4E6E8