Design System

colors

Main colors (shades of light)

#faf9f9
#dad1cf
#463d3b
#191919

Brand colors

#ffd8ce
#ff977d
#f26c42
#ff5f34
br color

complementray colors (optional)

#f0edec
bg color
#664431
#0e2832

Gradients - shadow - rounded corners

Gradient :
#fdc830 → #f37335
120 dg

Rounded corners : 4 px

Shadow :
box-shadow:
0px 6.7px 5.3px rgba(0, 0, 0, 0.028),
0px 22.3px 17.9px rgba(0, 0, 0, 0.042),
0px 100px 80px rgba(0, 0, 0, 0.07)
;
magin-down : 16 px
Gradient :
#f12711 → #f5af19
240 dg

Rounded corners : 8 px

Shadow :
box-shadow:
0px 6.7px 5.3px rgba(0, 0, 0, 0.028),
0px 22.3px 17.9px rgba(0, 0, 0, 0.042),
0px 100px 80px rgba(0, 0, 0, 0.07)
;
magin-down : 16 px
Gradient :
#ee0979 → #ff6a00
120 dg

Rounded corners : 12 px (Main)

Shadow :
box-shadow:
0px 6.7px 5.3px rgba(0, 0, 0, 0.028),
0px 22.3px 17.9px rgba(0, 0, 0, 0.042),
0px 100px 80px rgba(0, 0, 0, 0.07)
;
magin-down : 16 px
Gradient :
#0f2027 → #203a43 → #2c5364
120 dg

Rounded corners : 16 px

Shadow :
box-shadow:
0px 6.7px 5.3px rgba(0, 0, 0, 0.028),
0px 22.3px 17.9px rgba(0, 0, 0, 0.042),
0px 100px 80px rgba(0, 0, 0, 0.07)
;

Spacing

using  8px increments :
Global Section padding :  
up-down 64 px
right-left 16px
Columns padding : 16 px
related : 8 px
mildly related : 16 px
not related but close : 32 px
not close : 64 px
far away : 128 px

Fonts

Heading Font - Sukar

H1 - 42px, weight 700 - lh 1.6

H2 - 36px, weight 700

H3 - 32px, weight 700

Text  Font  - Janna LT
Bold version : weight 700
Text size : 18 px
Font weight : 400
Line height : 1.5

Classes

margin-bottom-small : 16
margin-bottom-medium : 32
margin-bottom-big : 64

padding-small : 16
padding-medium : 32
padding-big : 64

box-shadow

bt-1
bt-2
bt-3

hrz-divider

Animation

transition 0.3 ease-in-out
borders 10 px
dashed bg-color