Style Guide - Groti - Webflow Ecommerce website template

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.