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
- First item
- second item
- third item
This is a bullet points list
- bullet point 1
- bullet point 2
- bullet point 3
This is notion todo
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
Pulse
Sage
Transparent
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
Main Colors
Font Color: Depth
#063312 | Depth Schriftfarbe, primärer Text, Überschriften — Logo-Kombinationen: Depth/ Halo, Depth/ Transparent (Vordergrund/Hintergrund)
Background Color: Halo
#F2F4F2 | Halo
Hintergrundfarbe, Flächen, Sektionen — Logo-Kombination: Depth/ Halo (Hintergrund)
Logo Color - Logo on dark background, strong brand impact
Font Color: Bloom
#92EF9A | Bloom
Logofarbe, Markenakzent, Primärakzent — Logo-Kombination: Bloom/ Shade (Vordergrund/Hintergrund)
Background Color: Shade
#0B1E0F | Shade
Dunkle Kontraste, Text auf hellen Flächen — Logo-Kombination: Bloom/ Shade (Hintergrund)
Logo Color - Standard Variant on Light Background
Font Color: Depth
#063312 | Depth
Schriftfarbe, primärer Text, Überschriften — Logo-Kombinationen: Depth/ Halo, Depth/ Transparent (Vordergrund/Hintergrund)
Background Color: Transparent or Halo
#F2F4F2 | Halo
Hintergrundfarbe, Flächen, Sektionen — Logo-Kombination: Depth/ Halo (Hintergrund)
Neutral Colors
#454F45 | Root
Standardtext, Icons, Grundton für dunkle Flächen
#AFCAAF | Sage
Soft-Hintergrund, UI-Strokes, ruhige Sekundärfarbe
#DEECDC | Mist
Sehr helle Flächen, große Container, Hintergrundebene
#7B847B | Stone
Sekundärtext, Linien, subtile UI-Elemente
#D1E2D1 | Veil
Hintergrund für Inputs, Hover, Container.
#F2F4F2 | Halo
Hintergrundfarbe, Flächen, Sektionen — Logo-Kombination: Depth/ Halo (Hintergrund)
Accent Colors
#0B1E0F | Shade
Dunkle Kontraste, Text auf hellen Flächen — Logo-Kombination: Bloom/ Shade (Hintergrund)
#61DB6B | Pulse
Positive Akzente, Buttons, Bestätigungen
#172D1B | Grove
Aktive Zustände, Hover, tiefer Kontrast.
#B5F5B7 | Ease
Leichte Highlights, Feedback, visuelle Entlastung
Accent Colors - colorful
Aeris
#C1E2F1 | Aeris Light
Leichter Hintergrund, Sektionen
#ACD6EF | Aeris
Akzent, Karten
#52B4D9 | Aeris Bold
Hauptakzent, Icons, Links
Nimbus
#BBB9FF | Nimbus Light
Leichte Flächen, neutrale Hintergründe
#898AE3 | Nimbus
Akzent, Karten
#5453CB | Nimbus Bold
Starker Akzent, Call-to-Actions
Muse
#F0D8FF | Muse Light
Hintergründe, weiche Akzente
#CBA8E8 | Muse
Akzent, Karten, dekorative elemente
#BD73ED | Muse Bold
Buttons, Icons, Hauptakzent
Coral
#FFD2D2 | Coral Light
Warnungshintergrund, subtile Fehler
#DBB0AF | Coral
Fehlerindikatoren, Sekundärakzent, Karten
#ED6767 | Coral Bold
Warnungen, negative Zustände, Calls-to-Action
Solea
#FFF4D0 | Solea Light
Hinweise, Informationshintergrund
#F9E8AF | Solea
Karten, Sekundärhintergrund, UI-Akzente
#FFDB76 | Solea Bold
Positive Hinweise, Markierungen
#F5DCBC | Cove Light
Warmer Hintergrund, weiche Flächen
#E5C0A8 | Cove
Akzentrahmen, Karten, neutrale Akzente
#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)
UI Elements
Tabbed Nav
Name |
|---|
2 |
Forms
wewewewe
https://notioneers.eu/#
Keep up with the latest Notion business trends.
Subscribe to receive tips, templates and updates directly to your inbox.