Colors
Primary colors
Primary 100
#263045
Primary 200
#1B1B1B
Primary 300
#FFFFFF
Primary 300
#F8F8F8
Secondary colors
Secondary 100
#cf9832
Secondary 200
#ba892d
Secondary 300
#a67a28
Secondary 400
#916a23
Secondary 500
#67544C
Secondary 600
#533d14
Secondary 700
#3e2e0f
Secondary 800
#291e0a
Neutral colors
Neutral 100
#FFFFFF
Neutral 200
#CFCFCF
Neutral 300
#AFAFAF
Neutral 400
#8F8F8F
Neutral 500
#707070
Neutral 600
#505050
Neutral 700
#303030
Neutral 800
#000000
Color overlay
Light 100
Light 200
Light 300
Light 400
Dark 100
Dark 200
Dark 300
Dark 400
Typography
Inter Tight
Default
Mid
Strong
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Kk Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
Text style
Size
Line Height
Weights

H1

48px
.9em
Bold

H2

36px
.9em
Bold

H3

22px
.9em
Bold

H4

20px
.9em
Bold
H5
15px
.9em
Bold
H6
12
.9em
Bold
Display 10
76px
1.125em
Regular
Mid
Strong
Display 9
48px
1.125em
Regular
Mid
Strong
Display 8
36px
1.125em
Regular
Mid
Strong
Display 7
30px
1.125em
Regular
Mid
Strong
Display 6
26px
1.125em
Regular
Mid
Strong
Display 5
20px
1.125em
Regular
Mid
Strong
Display 4
18px
1.125em
Regular
Mid
Strong
Display 3
16px
1.125em
Regulr
Mid
Strong
Display 2
14px
1.125em
Default
Mid
Strong
Display 1
12px
1.125em
Regular
Mid
Strong

Paragraph Large - Gravida vulputate scelerisque dui at aliquam at. Nec purus nisl a tellus velit tellus.

18px
1.500em
Regular
Mid
Strong

Paragraph Default - Gravida vulputate scelerisque dui at aliquam at. Nec purus nisl a tellus velit tellus.

14px
1.500em
Regular
Mid
Strong

Paragraph Small - Gravida vulputate scelerisque dui at aliquam at. Nec purus nisl a tellus velit tellus.

12px
1.500em
Regular
Mid
Strong
Shadows
Neutral shadows
Small
Medium
Large
Logo Icon
Buttons
Lists
Primary button
Default
Mid
Strong
Default
Mid
Strong
Default
Mid
Strong
Default
Mid
Strong
Default
Mid
Strong
Default
Mid
Strong
Icon
Bullet
Number
Icon
Bullet
Number
  • List item
  • List item
  1. List item
  • List item
  • List item
  1. List item
  • List item
  • List item
  1. List item
  • List item
  • List item
  1. List item
  • List item
  • List item
  1. List item
  • List item
  • List item
  1. List item
  • List item
  • List item
  1. List item
  • List item
  • List item
  1. List item
  • List item
  • List item
  1. List item
  • List item
  • List item
  1. List item
  • List item
  • List item
  1. List item
  • List item
  • List item
  1. List item
  • List item
  • List item
  1. List item
  • List item
  • List item
  1. List item
  • List item
  • List item
  1. List item
  • List item
  • List item
  1. List item
  • List item
  • List item
  1. List item
  • List item
  • List item
  1. List item
Rich Text

Lorem ipsum dolor.

Venenatis sollicitudin posuere elit consequat et enim. Neque tortor amet dictum tempor. Leo facilisis aliquet viverra scelerisque eleifend viverra est. At massa erat vel amet enim laoreet dictum pellentesque. Urna cursus quam pulvinar tellus. Duis fermentum nibh volutpat morbi. Et ac sed ultricies ut nunc sodales lectus. Ultricies pharetra mauris eget pellentesque accumsan tincidunt.

Donec et odio pellentes.

Et urna ac et maecenas fusce amet. Nibh nec commodo massa sed. Tincidunt porttitor in pharetra egestas sit neque ac lacus. Amet a nunc et cum. Odio at volutpat volutpat in leo eget ipsum diam elementum. Erat magna arcu orci lorem senectus orci fringilla. Tincidunt metus nisl vitae maecenas pretium aliquet. At id pharetra in vestibulum lectus pellentesque venenatis molestie.

  • Morbi fringilla molestie magna sed dictum. Praesent pharetra turpis augue.
  • Cras mi purus, viverra vitae felis sit amet, tincidunt fringilla lorem.
  • non mattis urna ex nec sem. Donec varius diam et suscipit venenati proin tincidunt
  • Quisque euismod posuere lacus sit amet volutpat. Praesent vel imperdiet

Quis faucibus massa sit egestas. Sit fermentum est ac pulvinar et sagittis sed sit ut. Quis faucibus aenean nibh vestibulum enim mi sit. Sollicitudin ultrices ultrices in ipsum urna fringilla massa leo. Sapien ultricies vitae rhoncus molestie purus. Urna urna dolor euismod porttitor et. Magna adipiscing dictum et adipiscing mollis feugiat. Est ac ultrices varius volutpat nibh purus placerat. Sapien morbi sed sit non habitant turpis dignissim. Facilisis vitae massa justo neque.

Lorem ipsum dolor sit amet consectur

Quis faucibus massa sit egestas. Sit fermentum est ac pulvinar et sagittis sed sit ut. Quis faucibus aenean nibh vestibulum enim mi sit. Sollicitudin ultrices ultrices in ipsum urna fringilla massa leo. Sapien ultricies vitae rhoncus molestie purus. Urna urna dolor euismod porttitor et. Magna adipiscing dictum et adipiscing mollis feugiat. Est ac ultrices varius volutpat nibh purus placerat. Sapien morbi sed sit non habitant turpis dignissim. Facilisis vitae massa justo neque.

Donec et odio pellentesque.

Cursus curabitur euismod vel fermentum sapien non dolor odio vel. Tortor lectus mauris in praesent a tincidunt nam. In aenean odio aliquet pretium viverra elit quis magna. Eget ut risus posuere velit purus nisi nec sollicitudin. Tellus enim interdum neque sit vestibulum lacus. Nam pulvinar a lectus justo aliquet integer amet.

“Sed id mi eget urna facilisis pharetra. Nunc viverra est at magna maximus consectetur. Sed nec maximus augue. Aliquam commodo sem eu nisl efficitur venenatis. Proin eu suscipit lorem. Nam vitae aliquet augue. Morbi rutrum ultrices lorem molestie suscipit. Sed mattis luctus odio eu porta.”

Cursus curabitur euismod vel fermentum sapien non dolor odio vel. Tortor lectus mauris in praesent a tincidunt nam. In aenean odio aliquet pretium viverra elit quis magna. Eget ut risus posuere velit purus nisi nec sollicitudin. Tellus enim interdum neque sit vestibulum lacus. Nam pulvinar a lectus justo aliquet integer amet.

Lorem ipsum dolor sit amet consectur doler

Sed non quis tellus velit orci. Quam sed mauris elementum tempor viverra. Luctus semper risus ipsum id diam praesent. Pretium eget mauris ultrices curabitur sed sem amet. Erat nulla habitant in mattis massa mi adipiscing ullamcorper condimentum. Erat quisque integer tincidunt ac amet tempor vulputate tristique. Venenatis neque odio a nulla iaculis euismod etiam.

  1. Morbi fringilla molestie magna sed dictum. Praesent pharetra turpis augue.
  2. Cras mi purus, viverra vitae felis sit amet, tincidunt fringilla lorem.
  3. non mattis urna ex nec sem. Donec varius diam et suscipit venenati proin tincidunt
  4. Quisque euismod posuere lacus sit amet volutpat. Praesent vel imperdiet
Dolor sit amet consectur doler

Sed non quis tellus velit orci. Quam sed mauris elementum tempor viverra. Luctus semper risus ipsum id diam praesent. Pretium eget mauris ultrices curabitur sed sem amet. Erat nulla habitant in mattis massa mi adipiscing ullamcorper condimentum. Erat quisque integer tincidunt ac amet tempor vulputate tristique. Venenatis neque odio a nulla iaculis euismod etiam.

Sed nec maximus augue aliquam commodo sem eu nisl efficitur

Sed non quis tellus velit orci. Quam sed mauris elementum tempor viverra. Luctus semper risus ipsum id diam praesent. Pretium eget mauris ultrices curabitur sed sem amet. Erat nulla habitant in mattis massa mi adipiscing ullamcorper condimentum. Erat quisque integer tincidunt ac amet tempor vulputate tristique. Venenatis neque odio a nulla iaculis euismod etiam.

Rich Text components
“Euismod fringilla sed tortor in eget lobortis pellentesque pellentesque lacus enim platea gravida vitae tortor”
Spacers
Margin top
Tiny
Extra
small
Small
Default
Medium
Large
Extra
large
Margin bottom
Tiny
Extra
small
Small
Default
Medium
Large
Extra
large
Margin right
Tiny
Extra
small
Small
Default
Medium
Large
Extra
large
Margin left
Tiny
Extra
small
Small
Default
Medium
Large
Extra
large
Padding top
Tiny
Extra
small
Small
Default
Medium
Large
Extra
large
Padding bottom
Tiny
Extra
small
Small
Default
Medium
Large
Extra
large
Padding right
Tiny
Extra
small
Small
Default
Medium
Large
Extra
large
Padding left
Tiny
Extra
small
Small
Default
Medium
Large
Extra
large
Animations
☝️ Slide to top
0.2s
0.3s
0.4s
0.5s
0.6s
0.7s
0.8s
0.9s
1s
1,2s
1.4s
1.6s
👈 Slide To Left
0.2s
0.3s
0.4s
0.5s
0.6s
0.7s
0.8s
0.9s
1s
1.2s
1.4s
1.6s
👉 Slide To Right
0.2s
0.3s
0.4s
0.5s
0.6s
0.7s
0.8s
0.9s
1s
1.2s
1.4s
1.6s
🔍 Zoom In
0.2s
0.3s
0.4s
0.5s
0.6s
0.7s
0.8s
0.9s
1s
1.2s
1.4s
1.6s
👻 Fade In
0.2s
0.3s
0.4s
0.5s
0.6s
0.7s
0.8s
0.9s
1s
1.2s
1.4s
1.6s