Purpose Style Guide

Purpose 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

Quote Text Klein

Quote text gross

Purpose Colors

Main Colors

#E2EDE7
→ Green
#E2EDE7 → Green

#DEE9FB
→ Blue
#DEE9FB → Blue

#E5D7E9
→ Purple
#E5D7E9 → Purple

Other Colors

Info / Alerts

#FCEBC7
→ Yellow
#FCEBC7 → Yellow

#FCC7C7
→ Red
#FCC7C7 → Red

Backgrounds

#CACACA
→ Gray-Dark
#CACACA → Gray-Dark

#F3F0EC
→ Gray-Warm
#F3F0EC → Gray-Warm

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

Our Fav Modules (Bigger Icon)

Callout Modules with Color: Green, Purple, Blue and Default Background → Icon will be shown bigger.

icon

Callout Module Green

→ Purpose Color

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

Callout Module Purple

→ Purpose Color

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

Callout Module Blue

→ Purpose Color

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

Callout Module No Background

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

Callout Module 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

Callout Module 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

Callout Module 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.

icon
Hinweis: Simple Callout 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 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 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.

Newsletter Signup

icon

Trete über unseren Newsletter der Welt des Verantwortungseigentums bei.

Buttons & Links

Main Buttons

They are used on White Background

Notion Format: Link, Bold, Background Grey

They are used on non-white background

Notion Format: Link, Bold, Grey Text Color

Dev Debugging

  1. BG
  2. Bold
  3. Link

  1. BG
  2. Link
  3. Bold

  1. Link
  2. Background
  3. Bold

  1. Link
  2. Bold
  3. Background

  1. Bold
  2. Link
  3. Background

  1. Bold
  2. Background
  3. Link

  1. Color
  2. Bold
  3. Link

  1. Color
  2. Link
  3. Bold

  1. Link
  2. Color
  3. Bold

  1. Link
  2. Bold
  3. Color

  1. Bold
  2. Link
  3. Color

  1. Bold
  2. Color
  3. Link

Other Buttons (TBD)

→ These are not in use yet

Links

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

→ normaler Link (z.B. für Verlinkung auf LinkedIn Profil)

→ normaler Link hervorgehoben (bold)

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 intoText

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 intoText

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 intoText

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 intoText

Blue Background with callout modules

Purpose Netzwerk in Zahlen

icon

250m

€ Investiertes Kapital

icon

100

Unternehmen

icon

100+

Entrepreneurs

Purpose Netzwerk in Zahlen

icon

250m

€ Investiertes Kapital

icon

100

Unternehmen

icon

100+

Entrepreneurs

How to Manual

Download-Dokumente