Skip to main content
Give us your valuable feedback

It will help us understand how we can serve you better

Give feedback

Foundation

Color System

Color plays a key role in creating products with effective interfaces and user experiences.

banner-Color System
Square Icon

Selected Theme

Select brand or tribe name to preview style

Others

Usage

Colors system leverages a purposeful set of color styles as the perfect starting point for any brand or project. When it comes to color, contrast is critical for ensuring text is legible.

Primary Colors

The primary color is your “brand” color, and is used across all interactive elements such as buttons, links, inputs, etc. This color can define the overall feel and can elicit emotion.

#FBFAFF
primary25
#F5F3FF
primary50
#ECE9FE
primary100
#DDD6FE
primary200
#C3B5FD
primary300
#A48AFB
primary400
#875BF7
primary500
#7839EE
primary600
#6927DA
primary700
#5720B7
primary800
#491C96
primary900
<Box background="primary25">...</Box>
<Box background="primary50">...</Box>
<Box background="primary100">...</Box>
<Box background="primary200">...</Box>
<Box background="primary300">...</Box>
<Box background="primary400">...</Box>
<Box background="primary500">...</Box>
<Box background="primary600">...</Box>
<Box background="primary700">...</Box>


Secondary Palette

The secondary colors is color highlight or complement the primary color. These are to be used sparingly to make the UI elements stand out. These colors are also usually defined in the brand guidelines.

#F5F8FF
secondary25
#EFF4FF
secondary50
#D1E0FF
secondary100
#B2CCFF
secondary200
#84ADFF
secondary300
#528BFF
secondary400
#2970FF
secondary500
#155EEF
secondary600
#004EEB
secondary700
#0040C1
secondary800
#00359E
secondary900
<Box background="secondary25">...</Box>
<Box background="secondary50">...</Box>
<Box background="secondary100">...</Box>
<Box background="secondary200">...</Box>
<Box background="secondary300">...</Box>
<Box background="secondary400">...</Box>
<Box background="secondary500">...</Box>
<Box background="secondary600">...</Box>
<Box background="secondary700">...</Box>


Tertiary Palette

The tertiary color is a neutral color and is the foundation of the color system. Almost everything in UI design — text, form fields, backgrounds, dividers, outline card — are usually gray.

#FCFCFD
tertiary25
#F9FAFB
tertiary50
#F2F4F7
tertiary100
#EAECF0
tertiary200
#D0D5DD
tertiary300
#98A2B3
tertiary400
#667085
tertiary500
#475467
tertiary600
#344054
tertiary700
#1D2939
tertiary800
#101828
tertiary900
<Box background="tertiary25">...</Box>
<Box background="tertiary50">...</Box>
<Box background="tertiary100">...</Box>
<Box background="tertiary200">...</Box>
<Box background="tertiary300">...</Box>
<Box background="tertiary400">...</Box>
<Box background="tertiary500">...</Box>
<Box background="tertiary600">...</Box>
<Box background="tertiary700">...</Box>


Semantic Colors

Semantic colours communicate important status to the user such as success, information, warning or error. These colours should be used paired with text, an icon or both to fulfill their purpose in the best way possible.

Success

Success colors communicate a positive action, postive trend, or a successful confirmation. If you’re using green as your primary color, it can be helpful to introduce a different hue for your success green.

#F6FEF9
success25
#ECFDF3
success50
#D1FADF
success100
#A6F4C5
success200
#6CE9A6
success300
#32D583
success400
#12B76A
success500
#039855
success600
#027A48
success700
#05603A
success800
#054F31
success900
<Box background="success25">...</Box>
<Box background="success50">...</Box>
<Box background="success100">...</Box>
<Box background="success200">...</Box>
<Box background="success300">...</Box>
<Box background="success400">...</Box>
<Box background="success500">...</Box>
<Box background="success600">...</Box>
<Box background="success700">...</Box>


Warning

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.

#FFFCF5
warning25
#FFFAEB
warning50
#FEF0C7
warning100
#FEDF89
warning200
#FEC84B
warning300
#FDB022
warning400
#F79009
warning500
#DC6803
warning600
#B54708
warning700
#93370D
warning800
#7A2E0E
warning900
<Box background="warning25">...</Box>
<Box background="warning50">...</Box>
<Box background="warning100">...</Box>
<Box background="warning200">...</Box>
<Box background="warning300">...</Box>
<Box background="warning400">...</Box>
<Box background="warning500">...</Box>
<Box background="warning600">...</Box>
<Box background="warning700">...</Box>


Information

Information colors can communicate that an action is informative section or
these colors are commonly used in awareness for users’ attention.

#F5FAFF
information25
#EFF8FF
information50
#D1E9FF
information100
#B2DDFF
information200
#84CAFF
information300
#53B1FD
information400
#2E90FA
information500
#1570EF
information600
#175CD3
information700
#1849A9
information800
#194185
information900
<Box background="information25">...</Box>
<Box background="information50">...</Box>
<Box background="information100">...</Box>
<Box background="information200">...</Box>
<Box background="information300">...</Box>
<Box background="information400">...</Box>
<Box background="information500">...</Box>
<Box background="information600">...</Box>
<Box background="information700">...</Box>


Error

Error colors are used across error states and in “destructive” actions. They communicate a destructive/negative action, such as removing a user from your team.

#FFFBFA
error25
#FEF3F2
error50
#FEE4E2
error100
#FECDCA
error200
#FDA29B
error300
#F97066
error400
#F04438
error500
#D92D20
error600
#B42318
error700
#912018
error800
#7A271A
error900
<Box background="error25">...</Box>
<Box background="error50">...</Box>
<Box background="error100">...</Box>
<Box background="error200">...</Box>
<Box background="error300">...</Box>
<Box background="error400">...</Box>
<Box background="error500">...</Box>
<Box background="error600">...</Box>
<Box background="error700">...</Box>