UX/UI Design System
Work project at Keywords AI
Why Design System Needed?
Consistency of products
Better Communication
Clarity to Developers
Efficient when Design
Easier Teamwork
Colors
Primary Colors —
Our primary color palette is comprised of a neutral gray and our Violet. Violet is to be used sparingly such as primary call to actions, links, and areas of emphasis. Everywhere else our grayscale is to be be used, especially for giving depth.
Violet - 400
#8561c5
Secondary Colors —
Our secondary color palette is mainly of grey scales used to contrast light and dark modes. Neutral light colors are designed to be used in light mode, and neutral dark colors are designed to be used in dark mode. The scale of violet is designed to be used with primary colors on pages and visual elements that need to be emphasized out of brand color.
light yellow -400
#ec9d40
neutral light -300
#d1d1d1
neutral dark -600
#333333
dark blue -600
#009db0
Neutral dark -900
#191919
neutral light -200
#e0e0e0
neutral dark -500
#505050
dark yellow -600
#d2780f
More coming…
Neutral light -50
#f8f8f8
neutral light -500
#bbbbbb
neutral dark -700
#252525
light red -400
#dc5959
dark red -600
#c02b2b
These act as "secondary" or "supporting" colors to the primary color. These are useful for grabbing attention or to support your primary/brand color. They're also useful for components such as labels and badges.
violet -50
#f03bf8
Feedback Colors —
violet -200
#b9a4de
violet -600
#5e35a7
violet -800
#392065
Feedback colors emphasis different semantic states. They're used to provide visual feedback and/or warnings to users as they use our interface. Error colors are used across error states and in "destructive" actions. They communicate a destructive/negative action, such as removing a user from our team.
Warning colors can communicate that an action is potentially destructive or "on hold." These colors are commonly used in confirmations to grab the users' attention.
Success colors communicate a positive action, a positive trend, or a successful confirmation.
Accent Colors —
light blue -200
#8ad9e2
light green -400
#58975b
neutral light -100
#eaeaea
neutral dark -300
#8a8a8a
dark green -600
#2a722e