CANDIS Style Guide

Please adhere to this guide

1. Headings

Open Sans 700 - Bold

Das ist eine schöne Headline

Heading 1 / 40px

Das ist eine schöne Headline

Heading 2 / 35px

Das ist eine schöne Headline

Heading 3 / 32px

Das ist eine schöne Headline

Heading 4 / 28px

Das ist eine schöne Headline

Heading 5 / 24px

Das ist eine schöne Headline

Heading 6 / 20px

2. Body Copy

Open Sans 300 - Light

Paragraph Large 20px / Line height 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 Normal 16px / Line height 26px

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 Small 14px / Line height 22px

A product is accessible when all people-regardless of ability-can navigate it, understand it, and use it to achieve their goals.

3. Typographic elements

Horizontal Lines
Webflow Classes: Horizontal Line
Webflow Classes: Horizontal Line| Blue

Unordered Lists

  • Lorem ipsum dolor sit amet
  • Suspendisse varius enim in eros elementum tristique
  • Aenean faucibus nibh et justo

Ordered Lists

  1. Lorem ipsum dolor sit amet
  2. Suspendisse varius enim in eros elementum tristique
  3. Aenean faucibus nibh et justo

Custom Check Lists
Webflow Classes (on <ul>): Checks</ul>

  • Lorem ipsum dolor sit amet
  • Suspendisse varius enim in eros elementum tristique
  • Aenean faucibus nibh et justo

Custom Check Lists
While a parent has: Type--Lead

  • Lorem ipsum dolor sit amet
  • Suspendisse varius enim in eros elementum tristique
  • Aenean faucibus nibh et justo

4. Utility

Margin Bottom
Webflow Classes: Margin Bottom 0/1/2/3/4

Margin Bottom 0 - 0px

Margin Bottom 1 - 10px

Margin Bottom 2 - 20px

Margin Bottom 3 - 40px

Margin Bottom 4 - 60px

Some more elements...

5. Forms

Margin Bottom
Webflow Classes: Margin Bottom 0/1/2/3/4

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Need to tweak more advanced stuff in Webflow?

Container width on desktop

https://university.webflow.com/article/container

Main heading h1

Sub heading h2

Sub sub heading h3

Regular paragraph 14px text-main. Larger font-size than UI-kit. 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.

Small paragraph 12px gray-main. A product is accessible when all people-regardless of ability-can navigate it, understand it, and use it to achieve their goals.

Lead paragraph 18px text-main. A product is accessible when all people-regardless of ability-can navigate it, understand it, and use it to achieve their goals.

Need to tweak more advanced stuff in Webflow?

Container width on desktop

https://university.webflow.com/article/container

Stay in touch

Subscribe to our newsletter

We value your privacy. None of the details supplied will be shared with external parties.