Color

Properties

Background Color
bc1-4
Font Color
fc1-4
Outline Color
oc1-4
Background Color Global
bc1-7g
Font Color Global
fc1-7g
Outline Color Global
oc1-7g

Global Swatches

bc1g
bc2g
bc3g
bc4g
bc5g
bc6g
bc7g
bc8g
bc9g
bc_gojek_g
bc_swiggy_g
bc_loco_g
bc_myntra_g
bc_wikipedia_g
bc_grab_g

Modes

md1

Mode 1 Swatches

bc1
bc2
bc3
bc4
md2

Mode 2 Swatches

bc1
bc2
bc3
bc4

Accent Color

ac_gojek
ac_swiggy
ac_loco

Typography

Font Styles

Test 100 Hairline
Test 200 Thin
Test 300 Light
Test 400 H4 BN1 BN2 Book
Test 500 H3 Medium
Test 700 H2 BH1 BH2 Bold
Test 800 H1 Heavy
Test 900 Black
fs0.5
Display

Page Display Heading

fs1
H1

Page Heading

fs2
H2

Paragraph Titles

fs3
H3

Titles

fs4
H4

Extra Header Style

fs5
H5 - Body Header 1
Body Header 1
fs6
H6 - Body Header 2
Body Header 2
fs7
Body Normal 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare

fs8
Paragraph (By Default) / Any Text (By Default) - Body Normal 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare

fs9
Caption

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare

fs10
Caption Bold

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare

Font Weight

fw1
Heading
fw2
Heading
fw3
Heading
fw4
Heading
fw5
Heading
fw6
Heading
fw7
Heading
fw8
Heading
fw9
Heading

Letter Spacing

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla

ls0

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla

ls1

Line Height

lh1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

lh2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

lh3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

lh4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Line Clamp

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

lc1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

lc2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

lc3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

lc4

Typography Elements

All Ordered Lists
  1. This is some text inside of a div block.
  2. This is some text inside of a div block.
  3. This is some text inside of a div block.
All Unordered Lists
  • This is some text inside of a div block.
  • This is some text inside of a div block.
  • This is some text inside of a div block.
All Block Quotes
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
rich-text

Lorem ipsum dolor sit amet conse ctetur

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

Lorem ipsum dolor sit amet conse ctetur

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

Lorem ipsum dolor sit amet conse ctetur

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

Lorem ipsum dolor sit amet conse ctetur

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

  • List item one
  • List item two
  • List item three
Lorem ipsum dolor sit amet conse ctetur

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

  1. List item one
  2. List item two
  3. List item three
Lorem ipsum dolor sit amet conse ctetur

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

Layout

Properties

Grid
gd1
Columns Portrait
cp1-12
Columns Landscape
cl1-12
Columns Tablet
ct1-12
Columns Desktop
cd1-12
Rows Portrait
rp1-6
Rows Landscape
rl1-6
Rows Tablet
rt1-6
Rows Desktop
rd1-6

Example Grid

Adaptive Spacing

Properties

Gap
gp0-20
Gap Horizontal
gh0-20
Gap Vertical
gv0-20
Padding
pd0-20
Padding Horizontal
ph0-20
Padding Vertical
pv0-20
Padding Top
pt0-20
Padding Bottom
pb0-20
Padding Left
pl0-20
Padding Right
pr0-20

Values

0
0.5
1
1.5
2
2.5
3
3.5
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Utilities

Pointer Events

Not Clickable
pe0
Clickable
pe1
Direct Children Clickable
pe2

Border Radius

br0
br1
br2
br3

Outline Width

ow0
ow1
ow2
ow3

Stroke Width

Aa
sw0
Aa
sw1
Aa
sw2
Aa
sw3

Border Width

bw0
bw1
bw2
bw3

Border Direction

Top
bw3t
Bottom
bw3b
Left
bw3l
Right
bw3r
Horizontal
bw3h
Vertical
bw3v