Ochy Style Guide

Browse the UI elements available on the Ochy Template.

Colors

Primary 1
#6a72fb
Secondary 1
#19163a
Secondary 2
#78798f
Secondary 3
#e7e8f4
Secondary 4
#f8f8fd

Buttons

Primary Button Large
Primary Button
Button Large
Secondary Button Large
Button Default
Secondary Button

Iconography

Typography

Heading H1 - Aa Bb Cc Dd

Heading H1 - 54px

Heading H2 - Aa Bb Cc Dd

Heading H2 - 36px

Heading H3 - Aa Bb Cc Dd

Heading H3 - 24px

Heading H4 - Aa Bb Cc Dd

Heading H3 - 18px
Heading H5 - Aa Bb Cc Dd
Heading H5 - 16px
Heading H6 - Aa Bb Cc Dd
Heading H6 - 14px

Paragraph Default: 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.

Paragraph Default - 18px

Paragraph Large: 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.

Paragraph Large - 28px
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Unordered List - 18px
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Ordered - 18px