Style guide

Typography

Style Guide Typeface Icon

Typography Typeface

Thicccboi
Aa Bb Cc Dd Ee Ff Gg
Font License
Style Guide Headings Icon

Typography Headings

Large heading
Text Large Heading
Large subheading
Text Large Subheading
Heading
Text Heading
Subheading
Text Subheading
Small heading
Text Small Heading
Small subheading
Text Small Subheading

Heading 1

Heading 1

Heading 2

Heading 2

Heading 3

Heading 3

Heading 4

Heading 4
Heading 5
Heading 5
Heading 6
Heading 6
Style Guide Text Tags Icon

Typography Text tags

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.

Text Two Column

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.

Text Size Tiny

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.

Text Small

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.

Text Size Regular

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.

Text Size Large

Lorem ipsum dolor sit amet

Text Small Caps

Lorem ipsum dolor sit amet

Text Tiny Caps
Style Guide Typography Rich Text Icon

Typography Rich Text

Vestibulum sit amet urna turpis

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque aliquam odio et faucibus. Vestibulum sit amet urna turpis. Mauris euismod elit et nisi ultrices, ut faucibus orci tincidunt. Duis tristique sed lorem a vestibulum. Cras commodo consequat orci, in convallis risus egestas non. Nulla efficitur auctor hendrerit. Etiam ut orci varius, faucibus libero ac, cursus quam.

Nulla efficitur auctor hendrerit

Duis tristique sed lorem a vestibulum. Cras commodo consequat orci, in convallis risus egestas non. Vestibulum sit amet urna turpis. Mauris euismod elit et nisi ultrices, ut faucibus orci tincidunt. Nulla efficitur auctor hendrerit. Etiam ut orci varius, faucibus libero ac, cursus quam. Aenean porta neque eget consequat fringilla. Vestibulum ultrices, orci nec egestas. Pharetra, ligula est semper enim, nec auctor sapien leo nec purus. Duis tristique sed lorem a vestibulum. Cras commodo consequat orci, in convallis risus egestas non.

Aenean porta neque eget consequat fringilla

Pharetra, ligula est semper enim, nec auctor sapien leo nec purus. Aenean porta neque eget consequat fringilla. Vestibulum ultrices, orci nec egestas. Duis tristique sed lorem a vestibulum. Cras commodo consequat orci, in convallis risus egestas non. Vestibulum sit amet urna turpis. Mauris euismod elit et nisi ultrices, ut faucibus orci tincidunt. Nulla rhoncus feugiat eros quis consectetur. Morbi neque ex, condimentum dapibus congue et, vulputate ut ligula. Vestibulum sit amet urna turpis. Mauris euismod elit et nisi ultrices, ut faucibus orci tincidunt.

Image caption example text

Vestibulum sit amet urna turpis

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque aliquam odio et faucibus. Vestibulum sit amet urna turpis. Mauris euismod elit et nisi ultrices, ut faucibus orci tincidunt. Duis tristique sed lorem a vestibulum. Cras commodo consequat orci, in convallis risus egestas non. Nulla efficitur auctor hendrerit. Etiam ut orci varius, faucibus libero ac, cursus quam.

Nulla efficitur auctor hendrerit

Duis tristique sed lorem a vestibulum. Cras commodo consequat orci, in convallis risus egestas non. Vestibulum sit amet urna turpis. Mauris euismod elit et nisi ultrices, ut faucibus orci tincidunt. Nulla efficitur auctor hendrerit. Etiam ut orci varius, faucibus libero ac, cursus quam. Aenean porta neque eget consequat fringilla. Vestibulum ultrices, orci nec egestas. Pharetra, ligula est semper enim, nec auctor sapien leo nec purus. Duis tristique sed lorem a vestibulum. Cras commodo consequat orci, in convallis risus egestas non.

Aenean porta neque eget consequat fringilla

Pharetra, ligula est semper enim, nec auctor sapien leo nec purus. Aenean porta neque eget consequat fringilla. Vestibulum ultrices, orci nec egestas. Duis tristique sed lorem a vestibulum. Cras commodo consequat orci, in convallis risus egestas non. Vestibulum sit amet urna turpis. Mauris euismod elit et nisi ultrices, ut faucibus orci tincidunt. Nulla rhoncus feugiat eros quis consectetur. Morbi neque ex, condimentum dapibus congue et, vulputate ut ligula. Vestibulum sit amet urna turpis. Mauris euismod elit et nisi ultrices, ut faucibus orci tincidunt.

Rich Text

Colors

Style Guide Colors Brand Icon

Colors Brand

Primary
#1E313B
Accent 1
#794EFF
Accent 2
#FFC147
Accent 3
#97E747
Accent 4
#CC2A2B
Style Guide Colors Utility Icon

Colors Utility

Success
#10B981
Warning
#f59E0B
Danger
#DC2626
Style Guide Colors Neutrals Icon

Colors Neutrals

Neutral 1
#F6F6F6
Neutral 2
#EEEEEE
Neutral 3
#B4B4B4
Neutral 4
#747474
Neutral 5
#414141
Dark
#333333

Components

Style Guide Components Buttons Icon

Components Buttons

Button Text
Button Large
Button Text
Button Secondary
Button Text
Button Secondary Large
Button Text
Button Tertiary
Button Text
Button Tertiary Large
Button Text
Button White
Button Text
Button White Large
Button Text
Button Neutral 1
Button Text
Button Neutral 1 Large
Button Text
Button Neutral 2
Button Text
Button Neutral 2 Large
Button Text
Button Neutral 3
Button Text
Button Neutral 3 Large
Button Text
Button Neutral 4
Button Text
Button Neutral 4 Large
Button Text
Button Neutral 5
Button Text
Button Neutral 5 Large
Button Text
Button Dark
Button Text
Button Dark Large

Ready to start designing?

Molecule is available today!