Groti Style Guide

Primary Colors

Royal Blue
#345EEE
Green Yellow
#BDF642

Secondary Colors

Slate Blue
#244DD8
More Green
#9ADD0D

Neutral Colors

Black
#06080F
Lighter Black
#24262C
Dim Grey
#54575F
Grey
#939393
Gainsboro
#DFDFDF
Dark Lilac
#57608E
Lavender
#DADAE9
White Smoke
#EFF2F6
White
#FFFFFF
Blue Button Hover
#4066E4

Typography

Text 400 Regular - Lorem Ipsum
Text 400 Medium - Lorem Ipsum
Text 400 Bold - Lorem Ipsum
Text 300 Regular - Lorem Ipsum
Text 300 Medium - Lorem Ipsum
Text 300 Bold - Lorem Ipsum
Text 200 Regular - Lorem Ipsum
Text 200 Medium - Lorem Ipsum
Text 200 Bold - Lorem Ipsum
Text 100 Regular - Lorem Ipsum
Text 100 Medium - Lorem Ipsum
Text 100 Bold - Lorem Ipsum

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.

Paragraph Small - 16px/28px

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/30px

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 - 24px/36px

Rich Text

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquet euismod ut id ullamcorper nunc diam"

Buttons

Small
Button Primary - Small
Default
Button Primary - Default
Large
Button Primary - Large
Small
Button Secondary - Small
Default
Button Secondary - Default
Large
Button Secondary - Large
Small
Button Submit - Small
Default
Button Submit - Default
Large
Button Submit - Large

Shapes

Buy $79