Koop Style Guide

Koop Style Guide

Fonts

Lorem ipsum dolor sit amet, Ãœberschrift 1 elitr, sed diam nonumy eirmod tempor

Lorem ipsum dolor sit amet, Ãœberschrift 2 elitr, sed diam nonumy eirmod tempor

Lorem ipsum dolor sit amet, Ãœberschrift 1 elitr, sed diam nonumy eirmod tempor

Normaler Text - Lorem ipsum dolor sit amet, elitr, sed diam nonumy eirmod tempornuyan tesaur.

Quote Text Klein
Quote text gross

Farben

Buttons & Links

Buttons

Links

Following links are used. Without Color. In Bold or Normal.

zur Anmeldung

Notion Format: Link

zur Anmeldung Bold

Notion Format: Link, Bold

Callout Modules

Important: Use only one Callout per row. Not 2 below each others. Because Min Height of Callout is set to 100%, to make sure they always have the same height if they are within multiple columns.

image

Callouts with Icons

icon
Callout with Icon, Green

Das Steuerrad des Unternehmens – die Stimmrechte – liegt bei aktiven Unternehmer:innen.

icon
Callout with Icon, Blue

Das Steuerrad des Unternehmens – die Stimmrechte – liegt bei aktiven Unternehmer:innen.

icon
Callout with Icon, Purple

Das Steuerrad des Unternehmens – die Stimmrechte – liegt bei aktiven Unternehmer:innen.

‣
More Colors

Horizontal Callouts - With lines

icon
Hinweis: Simple Callout with line - White

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

icon
Hinweis: Simple Callout with line - Gray

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

icon
Hinweis: Simple Callout with line - Red

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

icon
Hinweis 2: Simple Callout with line - Yellow

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Toggles

‣

H1 Toggle

‣

H2 Toggle

‣

H3 Toggle

Backgrounds

If one of these colors as a background of text is used, section will be fullwidth.

Green background

To create a full width Background follow these steps

  1. Create a Callout Module
  2. Choose one of the colors defined in this section
  3. Choose Turn into → Text

Blue background

To create a full width Background follow these steps

  1. Create a Callout Module
  2. Choose one of the colors defined in this section
  3. Choose Turn into → Text

Yellow background

To create a full width Background follow these steps

  1. Create a Callout Module
  2. Choose one of the colors defined in this section
  3. Choose Turn into → Text

Grey background

To create a full width Background follow these steps

  1. Create a Callout Module
  2. Choose one of the colors defined in this section
  3. Choose Turn into → Text