Design Tokens
1
Colours
The main colours used are primary, secondary & tertiary colours, aligned with the Corporate Identity of the company. The rest of the colours are generated based on these three main colours.
Each of these colours has been given classes so that it may be implemented appropriately throughout the website.
Each of these colours has been given classes so that it may be implemented appropriately throughout the website.
Primary Colours Shades:
Primary (#39AB52)
Hover (#2C853F)
Alt (#E0F4E4)
Alt Hover (#BBE7C3)
Secondary Colours Shades:
Primary (#AED058)
Hover (#98BE35)
Alt (#EFF6DF)
Alt Hover (#DBEAB7)
Tertiary Colours Shades:
Tertiery (#3959AC)
Hover (#263D74)
Alt (#CAD3E9)
Alt Hover (#A4B3D9)
Background Colours Shades:
Background (#F8FAF9)
Background Alt (#F1F7F3)
Typography Colours
Dark (#0B2210)
Paragraph (#4C5B4F)
Border (#4C5B4F)
Placeholder (#EAF9ED)
Alt Typography Colours for Dark Backgrounds
Light (#F9FAF9)
Paragpraph Alt (#D8F2DE)
Border Alt (#D8F2DE)
Placeholder Alt (#65CC7C)
Generic Colours Shades:
Black (#0D110E)
White (#F9FAF9)
Transparent
Tertiery (#3959AC)
Alert Colours
Success (#2C854A)
Warning (#F59E0B)
Error (#AC3939)
Extra User Colours
Extra 1 (#FED766)
Extra 2 (#FE8A71)
Extra 3 (#0E9AA7)
Extra 4 (#536878)
RGBA-based Utility Colours with Opacity
Primary rgba
(57, 171, 82)
(57, 171, 82)
Secondary rgba
(174, 208, 88)
(174, 208, 88)
Tertiary rgba
(57, 89, 172)
(57, 89, 172)
Dark rgba
(11, 34, 16)
(11, 34, 16)
Paragraph rgba
(76, 91, 79)
(76, 91, 79)
Black rgba
(13, 17, 14)
(13, 17, 14)
Success rgba
(44, 133, 74)
(44, 133, 74)
Warning rgba
(245, 158, 11)
(245, 158, 11)
Error rgba
(172, 57, 57)
(172, 57, 57)
Extra1 rgba
(254, 215, 102)
(254, 215, 102)
Extra2 rgba
(254, 138, 113)
(254, 138, 113)
Extra3 rgba
(14, 154, 167)
(14, 154, 167)
Extra4 rgba
(83, 104, 120)
(83, 104, 120)
2
Spacing
Spacings here refers to the bottom margins that separates vertical elements.
For example, mb-2 are used to separate a figure and the text caption. Whereaas mb-20 can be used to separate a heading and the text body. This will create consistent design throughout the website.
For example, mb-2 are used to separate a figure and the text caption. Whereaas mb-20 can be used to separate a heading and the text body. This will create consistent design throughout the website.
mb-2
mb-4
mb-8
mb-12
mb-14
mb-20
3
Typography
The font combination used for this website are:
1. Halant (Display) & Inter (Text)
2. Chivo (Display) & Overpass (Text)
3. Overpass (Display) & Neogrotesk-Pro (Text)
4. BwModelica (Display) & Neogrotesk-Pro (Text)
1. Halant (Display) & Inter (Text)
2. Chivo (Display) & Overpass (Text)
3. Overpass (Display) & Neogrotesk-Pro (Text)
4. BwModelica (Display) & Neogrotesk-Pro (Text)
4
Box Shadow
shadow-xs
shadow-sm
shadow-md
shadow-lg
shadow-xl
shadow-2xl
6
Border Radius
rounded-sm
rounded-md
rounded-lg
rounded-xl
7
Cards
Service 1
Describing your product, service, or whatever you provide the public with is vitally important, so your copy should include full details. Lorem ipsum dolor sit ameteur etur ser.
Learn more
Service 2
Describing your product, service, or whatever you provide the public with is vitally important, so your copy should include full details. Lorem ipsum dolor sit ameteur etur ser.
Learn more
8
CTA
Call to actions are an important element of a webpage. We can estimate the visitors' engagement on a website by placing several different call to actions.
Contact Us!
Describing what you sell to the public is vitally important, so you should provide as much information as possible.
Learn moreApply Now
Describing what you sell to the public is vitally important, so you should provide as much information as possible.
Get StartedBusiness Inquiries
Lorem ipsum exists in the industry as a standard dummy text for printing and typing.
Download our latest corporate report.
Here you can find live sessions on everything from interactive prototyping keep an eye.
Download PDF
English (UK)