Logo
  • Solutions
  • Team
  • Resources
ERSTGESPRĂ„CH
Logo

About

Team

Contact

DE 🇩🇪

Style-Guide-Notioneers

Style-Guide-Notioneers

This is the Notioneers Style Guide

https://notioneerseunew.super.site/en/style-guide-notioneers

Typefaces

These are the Notion Blocks:

Heading 1 with green text

Heading 2 with green text

Heading 3 with green text

Normal text

this is grey text

This is bold text

This is a bold text within a normal text

This is a Textlink

This is a Textlink within a text

This is a Italic Text

This is a italic and bold text

This is a numbered list

  1. First item
  2. second item
  3. third item

This is a bullet points list

  • bullet point 1
  • bullet point 2
  • bullet point 3

This is notion todo

to-do 1
to-do 2
to-do 3

We’re using these fonts:

TWK Lausanne 300

TWK Lausanne 300 Italic

TWK Lausanne 600

TWK Lausanne 600 Italic

Buttons

We have the following button styles

Depth

Brown BG
icon
Brown BG + Icon

Pulse

Green BG
icon
Green BG + Icon

Sage

Gray BG
icon
Gray BG + Icon

Transparent

icon
Transparent + icon
icon
Transparent + icon

Tags

Notion Code Formats are used for different applications.

Tags in the Sections are used just like this

SOLUTIONS

→ Green Background, Gray Text

PROCESS

→ Gray Background → Gray Text

Code Formats

Notion Format
Example
Code Format Green
Code Format with color-default
Step 1 Click here in a how to step by step manual.
Code Format Red
Code format without formatting
Step 2 Click here in a how to step by step manual.
Code Format Red
Code Format with color-Red

Colors

Colors

Keep it minimal with green tones. Don't overuse Bloom or Ease—work primarily with natural tones and add accent colors only where needed.

Main Colors

Font Color: Depth

image

#063312 | Depth Schriftfarbe, primärer Text, Überschriften — Logo-Kombinationen: Depth/ Halo, Depth/ Transparent (Vordergrund/Hintergrund)

Background Color: Halo

image

#F2F4F2 | Halo

Hintergrundfarbe, Flächen, Sektionen — Logo-Kombination: Depth/ Halo (Hintergrund)

Logo Color - Logo on dark background, strong brand impact

Font Color: Bloom

image

#92EF9A | Bloom

Logofarbe, Markenakzent, Primärakzent — Logo-Kombination: Bloom/ Shade (Vordergrund/Hintergrund)

Background Color: Shade

image

#0B1E0F | Shade

Dunkle Kontraste, Text auf hellen Flächen — Logo-Kombination: Bloom/ Shade (Hintergrund)

Logo Color - Standard Variant on Light Background

Font Color: Depth

image

#063312 | Depth

Schriftfarbe, primärer Text, Überschriften — Logo-Kombinationen: Depth/ Halo, Depth/ Transparent (Vordergrund/Hintergrund)

Background Color: Transparent or Halo

image

#F2F4F2 | Halo

Hintergrundfarbe, Flächen, Sektionen — Logo-Kombination: Depth/ Halo (Hintergrund)

Neutral Colors

image

#454F45 | Root

Standardtext, Icons, Grundton für dunkle Flächen

image

#AFCAAF | Sage

Soft-Hintergrund, UI-Strokes, ruhige Sekundärfarbe

image

#DEECDC | Mist

Sehr helle Flächen, große Container, Hintergrundebene

image

#7B847B | Stone

Sekundärtext, Linien, subtile UI-Elemente

image

#D1E2D1 | Veil

Hintergrund fĂĽr Inputs, Hover, Container.

image

#F2F4F2 | Halo

Hintergrundfarbe, Flächen, Sektionen — Logo-Kombination: Depth/ Halo (Hintergrund)

Accent Colors

image

#0B1E0F | Shade

Dunkle Kontraste, Text auf hellen Flächen — Logo-Kombination: Bloom/ Shade (Hintergrund)

image

#61DB6B | Pulse

Positive Akzente, Buttons, Bestätigungen

image

#172D1B | Grove

Aktive Zustände, Hover, tiefer Kontrast.

image

#B5F5B7 | Ease

Leichte Highlights, Feedback, visuelle Entlastung

Accent Colors - colorful

Aeris

image

#C1E2F1 | Aeris Light

Leichter Hintergrund, Sektionen

image

#ACD6EF | Aeris

Akzent, Karten

image

#52B4D9 | Aeris Bold

Hauptakzent, Icons, Links

Nimbus

image

#BBB9FF | Nimbus Light

Leichte Flächen, neutrale Hintergründe

image

#898AE3 | Nimbus

Akzent, Karten

image

#5453CB | Nimbus Bold

Starker Akzent, Call-to-Actions

Muse

image

#F0D8FF | Muse Light

HintergrĂĽnde, weiche Akzente

image

#CBA8E8 | Muse

Akzent, Karten, dekorative elemente

image

#BD73ED | Muse Bold

Buttons, Icons, Hauptakzent

Coral

image

#FFD2D2 | Coral Light

Warnungshintergrund, subtile Fehler

image

#DBB0AF | Coral

Fehlerindikatoren, Sekundärakzent, Karten

image

#ED6767 | Coral Bold

Warnungen, negative Zustände, Calls-to-Action

Solea

image

#FFF4D0 | Solea Light

Hinweise, Informationshintergrund

image

#F9E8AF | Solea

Karten, Sekundärhintergrund, UI-Akzente

image

#FFDB76 | Solea Bold

Positive Hinweise, Markierungen

image

#F5DCBC | Cove Light

Warmer Hintergrund, weiche Flächen

image

#E5C0A8 | Cove

Akzentrahmen, Karten, neutrale Akzente

image

#F2AA7F | Cove Bold

Buttons, Icons, warme Akzentfarbe

Colors for Buttons

Variante
Default (BG / Text)
Hover / Active (BG / Text)
Disabled (BG / Text)
Dark Green
#063312 / #92EF9A
#61DB6B / #063312
#BCC9BC / #454F45
Bloom Green
#172D1B oder #0B1E0F / #92EF9A
#92EF9A / #063312
#CDD3CD / #454F45
Grey
Transparent oder #0B1E0F / #0B1E0F
#BCC9BC / #063312
#CDD3CD / #7B847B

This is the preview of cards of main colors

AERIS

Callout - Blue Background

#ACD6EF

NIMBUS

Callout - Purple Background

#898AE3

MUSE

Callout - Pink Background

#CBA8E8

CORAL

Callout Red Background

#DBB0AF

SOLEA

Callout Yellow Background

#F9E8AF

COVE

Callout Orange Background

#E5C0A8

VEIL

Callout - Grey Background

#D1E2D1

Section Backgrounds

Section Background Mist

NOT IN USE YET

No Background

Brown Background

FAQ (Toggles)

‣
Why should I book a call with you?

As former Notion beginners ourselves, we understand the challenges of navigating templates and best practices. By booking a call with us, you can leverage our expertise to save countless hours and avoid common pitfalls. We'll guide you through the process, ensuring you get the most out of Notion from the start.

‣
Toggle with grey background

UI Elements

Tabbed Nav

Tab1

2 views

Tab1

Tab2

Name
2

Forms

wewewewe

https://notioneers.eu/#

image

Keep up with the latest Notion business trends.

Subscribe to receive tips, templates and updates directly to your inbox.