Colors
Color is a foundational element in any design system. It defines the visual identity, sets the tone of the user experience, and enhances usability. A well-structured color system ensures consistency, accessibility, and scalability across products and platforms.
Neutral
Commonly used for typography, backgrounds, and interface elements to provide contrast and emphasis while maintaining a clean and elegant aesthetic.
White
#fff
Neutral-50
#f8f8f8
Neutral-100
#F4F5F6
Neutral-200
#E4E4E7
Neutral-300
#D4D4D8
Neutral-400
#A1A1AA
Neutral-500
#71717A
Neutral-600
#52525B
Neutral-800
#27272A
Primary
Establish a brand's core visual identity. Reinforcing recognition and strengthening brand association.
Primary-100
#DBEAFE
Primary-200
#BEDBFF
Primary-400
#51A2FF
Primary-600
#155DFC
Primary-800
#193CB8
Semantic
Info
Highlight important information, draw attention to key details, and guide users' focus.
Info-100
#dff2fe
Info-200
#b8e6fe
Info-400
#00bcff
Info-600
#0084d1
Info-800
#00598a
Success
Signify positive outcomes, achievements, or completed actions.
Success-100
#d0fae5
Success-200
#a4f4cf
Success-400
#00d492
Success-600
#009966
Success-800
#006045
Warning
Alert users to potential issues or important notices.
Warning-100
#fef3c6
Warning-200
#fee685
Warning-400
#ffb900
Warning-600
#e17100
Warning-800
#973c00
Danger
Indicate critical errors, risks, or situations that require immediate attention.
Danger-100
#ffe2e2
Danger-200
#ffc9c9
Danger-400
#ff6467
Danger-600
#e7000b
Danger-800
#9f0712