Arctic Design
Get StartedFoundationsComponentsExamples
K

Colors Overview

The color palette in the Arctic Design system is divided into different categories, each represented by a specific type called ColorType. These categories include primary, secondary, success, info, warning, error, and grey. Each color type has a range of shades, from light to dark, defined by numeric keys such as 50, 100, 200, and so on, up to 900. This ensures a consistent gradient for each color, allowing for flexible usage across different UI elements.

In addition to these colors, the system includes a neutral color type defined by NeutralColorType. The neutral color is represented by two values: 0 for the lightest shade and 1000 for the darkest shade, providing a balanced contrast between light and dark neutral tones within the system.

This structure ensures a consistent and cohesive visual identity throughout the design system while maintaining flexibility in color usage.

Default Color palette

  • Primary
    main
    #0A47FF
  • 50
    #EBF0FF
  • 100
    #D1DDFF
  • 200
    #94AFFF
  • 300
    #3366FF
  • 400
    #245BFF
  • 500
    #0A47FF
  • 600
    #003DF5
  • 700
    #0034D1
  • 800
    #002DB3
  • 900
    #001C70
  • Success
    main
    #3BA552
  • 50
    #E9F7EC
  • 100
    #D2EFD8
  • 200
    #96D9A5
  • 300
    #48BD62
  • 400
    #40B058
  • 500
    #3BA552
  • 600
    #359249
  • 700
    #2F8341
  • 800
    #266934
  • 900
    #1C4F27
  • Info
    main
    #1C50AB
  • 50
    #E5EDFB
  • 100
    #CADBF6
  • 200
    #88ADEC
  • 300
    #215FCC
  • 400
    #1E59BD
  • 500
    #1C50AB
  • 600
    #19489A
  • 700
    #17428D
  • 800
    #123672
  • 900
    #0D254F
  • Warning
    main
    #E4A001
  • 50
    #FFF6E1
  • 100
    #FFEDC2
  • 200
    #FED980
  • 300
    #FEBE2A
  • 400
    #F9AE01
  • 500
    #E4A001
  • 600
    #CB8E01
  • 700
    #B78001
  • 800
    #986B01
  • 900
    #6B4B00
  • Error
    main
    #CA161C
  • 50
    #FDEDED
  • 100
    #FAD6D7
  • 200
    #F49A9D
  • 300
    #E61E25
  • 400
    #D8181E
  • 500
    #CA161C
  • 600
    #B31419
  • 700
    #A11217
  • 800
    #810E12
  • 900
    #650B0E
  • Grey
    main
    #BBBFC3
  • 50
    #FAFAFA
  • 100
    #F4F5F5
  • 200
    #ECEDEE
  • 300
    #E4E5E7
  • 400
    #D6D8DB
  • 500
    #BBBFC3
  • 600
    #93989F
  • 700
    #6D7278
  • 800
    #53565A
  • 900
    #27292A

Color Shades

The @arctic-kit/colors package offers a variety of additional color shades. Below is a list of the available shades.

aurora

50#e6edff
100#ccd9ff
200#99b3ff
300#669dff
400#3386ff
500#3366ff
600#2e5be6
700#294fcc
800#2444b3
900#1f3999

blue

50#F2F6FC
100#E9F0FB
200#C6D7F6
300#719DEA
400#4D7FD6
500#215FCC
600#1E56BA
700#174391
800#123778
900#0E2856

electricBlue

50#e9e8ff
100#c7c6ff
200#9ea1ff
300#707bff
400#485aff
500#0037ff
600#002df3
700#001ee6
800#0006dc
900#0000cd

grape

50#f8f0fc
100#f3d9fa
200#eebefa
300#e599f7
400#da77f2
500#cc5de8
600#be4bdb
700#ae3ec9
800#9c36b5
900#862e9c

green

50#F3FBF5
100#E5F6E8
200#C7EBCF
300#A5DFB2
400#84D396
500#48BD62
600#42AC59
700#338646
800#286836
900#1E4F29

grey

50#FAFAFA
100#F4F5F5
200#ECEDEE
300#E4E5E7
400#D6D8DB
500#BBBFC3
600#93989F
700#6D7278
800#53565A
900#27292A

indigo

50#edf2ff
100#dbe4ff
200#bac8ff
300#91a7ff
400#748ffc
500#5c7cfa
600#4c6ef5
700#4263eb
800#3b5bdb
900#364fc7

magenta

50#FFEBF7
100#FFD7EF
200#FEB3E1
300#FE8BD2
400#FD62C2
500#FD3DB5
600#F7029A
700#BB0274
800#7E014E
900#3D0126

mint

50#dcfaf6
100#a7f2e5
200#5eead5
300#00dec2
400#00d2b2
500#00c6a3
600#00b794
700#00a582
800#009473
900#007654

neutral

0#FFFFFF
1000#000000

orange

50#fff4e6
100#ffe8cc
200#ffd8a8
300#ffc078
400#ffa94d
500#ff922b
600#fd7e14
700#f76707
800#e8590c
900#d9480f

polarNight

50#d0d6e3
100#b4bbcc
200#97a0b5
300#6b7892
400#6b7792
500#5d6981
600#4c566a
700#434c5e
800#3b4252
900#2e3440

red

50#FEF5F5
100#FDE8E9
200#F9C7C8
300#F38E92
400#EB4B51
500#E61E25
600#D11B22
700#A3151A
800#8A0F14
900#610D10

slate

50#f1f7ff
100#e9f0ff
200#dfe5ff
300#ced4f0
400#aab0cb
500#8a90a9
600#626880
700#4f556c
800#30374c
900#0f172a

teal

50#e0f2f1
100#b2dfdb
200#80cbc4
300#4db6ac
400#26a69a
500#009688
600#00897b
700#00796b
800#00695c
900#004d40

violet

50#efe5ff
100#d5c0fe
200#b896ff
300#9867ff
400#7b41ff
500#5906ff
600#4900f9
700#2b00f1
800#0000ed
900#0000e9

yellow

50#FFFCF5
100#FFF1D1
200#FFE29D
300#FED370
400#FECB55
500#FEBE2A
600#E7AD26
700#B4871E
800#8C6917
900#6B5012