00 – Tokens

In a design system, tokens are a set of variables that define the visual properties of design elements such as colors, typography, spacing, and more. Tokens are used to ensure consistency and maintain a cohesive look and feel across all design assets. By defining these variables in a centralized location, it becomes easier to make global changes to the design system and ensure that all elements are updated accordingly. Tokens can also be shared across teams and projects, making it easier to maintain a consistent brand identity.

Colors

Color nameHex CodeUse
Dodger Blue#419EF9 Primary 
Royal Blue#296DB5Secondary 
Sea Green#00BF9ASuccess
Coral #FF9F89Alert 
Crimson #FF4A4ADanger
Orchid  #E66AD2Information
Dark Slate Blue#353C51Background 
Midnight Blue#27293DBlock background 

Typography

UseFont-FamilySizeWeightColors
Heading 1Poppins24px400#FFFFFF/#595959
Heading 2 Poppins17px400#FFFFFF/#595959
Heading 3Poppins30px800#FFFFFF/#595959
TextPoppins14px400#FFFFFF/#595959
Small textPoppins12px400#FFFFFF/#595959
EmphasisSegoe UI12px300#FFFFFF/#595959

Radius

ComponentBorder-radius
Cards6px
Buttons6px
Tags10px
Form fields6px