Color
Colors shape brand identity and ensures consistent visual experiences across products.
Search
Color Palettes
The color palettes in Kernel are carefully curated to provide a versatile and cohesive set of hues that support various design needs. These palettes are not tied to a single product but are part of an evolving library available for consistent use across projects.
Yellow 100
#FFFBE6
AAA
Yellow 200
#FFF3B1
AAA
Yellow 300
#FFED8B
AAA
Yellow 400
#FFE556
AAA
Yellow 500
#FFE035
AAA
Yellow 600
#FFD803
AAA
Yellow 700
#E8C503
AAA
Yellow 800
#B59902
AAA
Yellow 900
#8C7702
AAA
Yellow 1000
#6B5B01
AAA
Violet 100
#E9E9EC
AAA
Violet 200
#CBCAD2
AAA
Violet 300
#A2A0AE
AAA
Violet 400
#7D7B8E
AAA
Violet 500
#524F69
AAA
Violet 600
#272343
AAA
Violet 700
#211E39
AAA
Violet 800
#1C1930
AAA
Violet 900
#161426
AAA
Violet 1000
#12101E
AAA
Green 100
#E6F6EE
AAA
Green 200
#C2E9D5
AAA
Green 300
#91D8B4
AAA
Green 400
#5EC691
AAA
Green 500
#2EB570
AAA
Green 600
#00A550
AAA
Green 700
#008C44
AAA
Green 800
#007539
AAA
Green 900
#005E2E
AAA
Green 1000
#004A24
AAA
Red 100
#FFE6E6
AAA
Red 200
#FFC4C2
AAA
Red 300
#FF9591
AAA
Red 400
#FF635E
AAA
Red 500
#FF342E
AAA
Red 600
#FF0800
AAA
Red 700
#D90700
AAA
Red 800
#B50600
AAA
Red 900
#910500
AAA
Red 1000
#730400
AAA
Blue 100
#E6F1FF
AAA
Blue 200
#C2DDFF
AAA
Blue 300
#91C2FF
AAA
Blue 400
#5EA5FF
AAA
Blue 500
#2E8AFF
AAA
Blue 600
#0070FF
AAA
Blue 700
#005FD9
AAA
Blue 800
#0050B5
AAA
Blue 900
#004091
AAA
Blue 1000
#003273
AAA
Orange 100
#FFF6E6
AAA
Orange 200
#FFE8C2
AAA
Orange 300
#FFD691
AAA
Orange 400
#FFC35E
AAA
Orange 500
#FFB12E
AAA
Orange 600
#FFA000
AAA
Orange 700
#D98800
AAA
Orange 800
#B57200
AAA
Orange 900
#915B00
AAA
Orange 1000
#734800
AAA
Neutral 100
#FFFFFF
AAA
Neutral 200
#FCFCFC
AAA
Neutral 300
#F5F5F5
AAA
Neutral 400
#F1F1F1
AAA
Neutral 500
#E2E2E2
AAA
Neutral 600
#ABABAB
AAA
Neutral 700
#8C8C8C
AA
Neutral 800
#6A6A6A
AA
Neutral 900
#3B3B3B
AAA
Neutral 1000
#262626
AAA
Neutral 1100
#1F1F1F
AAA
Neutral 1200
#141414
AAA
Neutral 1300
#000000
AAA
Neutral 100A
#3B3B3B
Neutral 200A
#262626
Neutral 300A
#1F1F1F
Neutral 400A
#141414
Neutral 500A
#000000
Accessibility Note
Kernel’s color palettes are designed with accessibility at their core, adhering to WCAG AA and AAA contrast standards for foreground and background combinations.
Each palette includes accessible color pairings that enhance readability and usability.
Design system users are encouraged to carefully evaluate color combinations within their designs to maintain these standards and ensure the best possible user experience.
The Concept of Color Tokens
System Tokens
We define System tokens that adapt the Core tokens for context-specific usage, such as backgrounds, text, and icons.
Status
green-100
color-background-success-010
green-600
color-background-success-020
green-900
color-background-success-030
green-100
green-600
color-text-success-020
System tokens are derived from Core tokens and are designed for specific purposes within a design, such as defining backgrounds, text, or icons. It’s important to use tokens based on their intended context rather than visual similarity, as each token is purpose-built to ensure clarity, consistency, and accessibility across designs.
Component-Specific Tokens
Component-specific tokens are tailored for individual UI elements, ensuring consistency and flexibility in their design. These tokens are derived from system tokens, which in turn are built upon core tokens. This hierarchical structure allows for scalable and cohesive design adjustments.
yellow-600
#FFD803
color-background-brand-030
button-color-background-brand-filled-enabled
Button
For instance, the button-color-background-brand-filled-enabled token in a button component is a component-specific token. It is derived from the system token color-background-brand-030 , which itself is rooted in the core token yellow-600 . This structured approach ensures that changes at any level of the hierarchy propagate consistently throughout the design system.
button-color-background-brand-filled-enabled
color-background-brand-030
yellow-600