Section | AI - Development Guidelines
Colors
Base
White: #FFFFFF
.bg-white
.bg-white
Black: #121313
.bg-base-black
.bg-base-black
Accent
Light: #839FF1
.bg-accent-light
.bg-accent-light
Default: #3D4CF0
.bg-accent
.bg-accent
Complementary
RED 500: #FF0000
.bg-red
.bg-red
Amber 500: #F3B30E
.bg-AMBER
.bg-AMBER
Emerald 800: #1A3F19
.bg-AMBER
.bg-AMBER
Skyblue800: #114164
.bg-skyblue
.bg-skyblue
Neutrals
Gray100: #FAF9F6
.bg-gray100
.bg-gray100
Gray 500: #F3F2F1
.bg-gray200
.bg-gray200
Gray 300: #F0EEE7
.bg-gray300
.bg-gray300
Gray 400: #909090
.bg-gray400
.bg-gray400
Gray 500: #616672
.bg-gray500
.bg-gray500
Drop Shadow
Section AI Drop Shadow
.sa-dropshadow
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.05);
.sa-dropshadow
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.05);
Typography
Headings:
Mega 1
Mega 1, .heading-mega-1
Desktop/Table - 100px, Line height 1.2, Letter Spacing -1%
Mobile - 88px, Line height 1.125
Desktop/Table - 100px, Line height 1.2, Letter Spacing -1%
Mobile - 88px, Line height 1.125
Mega 2
Mega 2, .heading-mega-2
Desktop/Table - 120px, Line height 1.1167, Letter Spacing -1%
Mobile - 100px, Line height 0.9
Desktop/Table - 120px, Line height 1.1167, Letter Spacing -1%
Mobile - 100px, Line height 0.9
Heading 1
H1, .h1
Desktop/ Tablet - 68px, Line height 0.94, Letter Spacing -1%
Mobile 48px, Line height 1.125
Desktop/ Tablet - 68px, Line height 0.94, Letter Spacing -1%
Mobile 48px, Line height 1.125
Heading 2
H2, .h2
Desktop/T ablet - 44px, Line height 1.23, Letter Spacing -1%
Mobile 40px, Line height 1.25
Desktop/T ablet - 44px, Line height 1.23, Letter Spacing -1%
Mobile 40px, Line height 1.25
Heading 3
H3, .h3
Desktop/ Tablet - 38px, Line height 1.24, Letter Spacing -1%
Mobile - 24px, Line height 1.24
Desktop/ Tablet - 38px, Line height 1.24, Letter Spacing -1%
Mobile - 24px, Line height 1.24
Heading 4
H4, .h4
Desktop/ Tablet - 30px, Line height 1.4, Letter Spacing -1%
Mobile - 20px, Line height 1.4
Font: Azurio
Desktop/ Tablet - 30px, Line height 1.4, Letter Spacing -1%
Mobile - 20px, Line height 1.4
Font: Azurio
Heading 5
H5, .h5 Desktop/Tablet/Mobile - 22px Line height 1.27 Letter Spacing 0%
Heading 6
H6, .h6 Desktop - 16px Tablet/Mobile - 12px Line height 100% Letter Spacing 0%
Highlight/Crayonize:
Hightlight/Crayonize/H1
.h1-high-cray
Desktop/Table - 68px, Line height 1.117, Weight 700
Mobile - xxpx, Line height xx
Desktop/Table - 68px, Line height 1.117, Weight 700
Mobile - xxpx, Line height xx
Highlight/Crayonize/H2
.h2-high-cray
Desktop/ Tablet - 48px, Line height 1.125, Weight 700
Mobile xxpx, Line height xx
Desktop/ Tablet - 48px, Line height 1.125, Weight 700
Mobile xxpx, Line height xx
Highlight/Crayonize/H3
.h3-high-cray
Desktop/ Tablet - 38px, Line height 1.131, Weight 700
Mobile xxpx, Line height xx
Desktop/ Tablet - 38px, Line height 1.131, Weight 700
Mobile xxpx, Line height xx
Highlight/Crayonize/H4
.h4-high-cray
Desktop - 24px, Line height 1.167, Weight 700
Tablet -
Mobile xxpx, Line height xx
Desktop - 24px, Line height 1.167, Weight 700
Tablet -
Mobile xxpx, Line height xx
Highlight/Crayonize/H5
.h5-high-cray
Desktop/ Tablet - 20px, Line height 1.2, Weight 700
Mobile xxpx, Line height xx
Desktop/ Tablet - 20px, Line height 1.2, Weight 700
Mobile xxpx, Line height xx
Highlight/Crayonize/H6
.h6-high-cray
Desktop/ Tablet - 18px, Line height 1.22, Weight 700
Mobile xxpx, Line height xx
Desktop/ Tablet - 18px, Line height 1.22, Weight 700
Mobile xxpx, Line height xx
Highlight/Mono:
Hightlight/Crayonize/H1
.h1-high-Mono
Desktop/Table - 60px, Line height 1.133, Weight 500, Letter spacing -1%
Mobile - xxpx, Line height xx
Desktop/Table - 60px, Line height 1.133, Weight 500, Letter spacing -1%
Mobile - xxpx, Line height xx
Hightlight/Crayonize/H1
.h2-high-mono
Desktop/Table - 44px, Line height 1.136, Weight 500, Letter spacing -1%
Mobile - xxpx, Line height xx
Desktop/Table - 44px, Line height 1.136, Weight 500, Letter spacing -1%
Mobile - xxpx, Line height xx
Label:
Label 1
.label-1 Desktop - 32px. Tablet/Mobile 20px, Line height 1.125, Letter Spacing 0%, Font: Handjet
Label 1
.label-1 Desktop - 38px. Tablet/Mobile 20px, Line height 1.13, Letter Spacing 0%, Font: Crayonize
Body Medium:
Text Medium Extra Large
.text-medium-x-large Desktop - 24px. Tablet/Mobile 20px, Line height 1.25
Text Medium Large
.text-medium-large Desktop - 20px. Tablet/Mobile 17px, Line height 1.4
Text Medium Medium
.text-medium-medium Desktop - 18px Tablet/Mobile - 15px Line height 1.33 Letter Spacing -2%
Text Medium Small
.text-medium-small Desktop - 16px Tablet/Mobile - 13px Line height 1.5
Text Medium Extra Small
.text-medium-x-small Desktop/Tablet/Mobile - 12px Line height 1.714 Letter Spacing -2%
Text Medium Micro
.text-medium-micro Desktop/Tablet/Mobile - 12px Line height 1.5 Letter Spacing -2%
Body:
Text Extra Large
.text-extra-large Desktop - 24px. Tablet/Mobile 20px, Line height 1.25
Text Large
.text-large Desktop - 20px. Tablet/Mobile 17px, Line height 1.4
Text Medium
.text-medium Desktop - 18px Tablet/Mobile - 16px Line height 1.5
Text Small
.text-small Desktop - 16px Tablet/Mobile - 13px Line height 1.5
Text Extra Small
.text-extra-small Desktop/Tablet/Mobile - 12px Line height 150% Letter Spacing -2%
Text Micro
.text-micro Desktop/Tablet/Mobile - 12px Line height 1.5 Letter Spacing -2%
Aspect Ratio
Aspect Ratio 1x1 class = .ratio-1x1
Aspect Ratio 16x9 class = .ratio-16x9
Section AI - Container/ Grid Guidlines
Container .container
- Max-width: 1205
- Paddding-inline: 30
Row .row
- Paddding-inline: 40
col .col
- col-1 to col-12