This is the Notioneers Style Guide
https://notioneerseunew.super.site/en/style-guide-notioneers
Cards
Calouts Colors
Aeris
Callout - Blue Background
blue / blue_bg
NIMBUS
Callout - Purple Background
purple / purple_bg
MUSE
Callout - Pink Background
pink / pink_bg
VEIL
Callout - Green Background
green / green_bg
HALO
this is a white default callout
CORAL
Callout Red Background
red / red_bg
SOLEA
Callout Yellow Background
yellow / yellow_bg
COVE
Callout Orange Background
orange / orange_bg
Brown
Brown Background with Bloom Text
This is a Grey Text
And this is normal text
brown / brown_bg
Callout with Image in Icon Property
Verstreute Informationen
Kennst du das Gefühl, ständig auf der Suche nach deinen Daten zu sein?
Auch wir haben uns früher durch einen digitalen Dschungel aus E-Mails, Ordnern, To-do-Listen, Chats und Notizen gekämpft.
Verstreute Informationen
Ganz ehrlich: Unzählige Vorlagen auszuprobieren, ist so ermüdend.
Wir haben früher selbst Tage nach der perfekten Notion-Vorlage gesucht.
Nur um immer wieder festzustellen, dass keine richtig passt.
Mangelnde Übersicht
Tappt ihr bei euren Projekten oft im Dunkeln - und hast keine Klarheit über ihren Fortschritt?
Fällt es euch schwer, eure täglichen Arbeit mit euren Ziele abzustimmen?
DIY-Dilemma
Träumst du auch davon, ein eigenes System zu erstellen - fühlst dich aber von der Flut der Tutorials überfordert?
Wir wissen, der System-Bau macht Spaß, ist aber auch extrem zeitaufwändig.
Callout with Image on Top of Title
100% Love
Your team will love working with Notion.
Source: Our Clients
Callout with Text Only
Empathy
We put ourselves in your shoes. We customize solutions to meet your specific needs.
Passion
We love what we do. That enthusiasm drives us to go above and beyond in helping your business thrive.
Humanity
We build trust through honest communication, transparency, and a genuine commitment to your goals.
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 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
Tags
Notion Code Formats are used for different applications.
BG | BG | FG | Notion Color BG/FG | Code | |
Tags | |||||
Halo | Stone | GRAY / GRAY | HALO STONE | ||
Mist | Stone | GREEN / GRAY | MIST STONE | ||
Depth | Bloom | BROWN / GREEN | DEPTH BLOOM | ||
Code Format | |||||
#E5E5E5 | Root | Code format NO Formating | |||
#E5E5E5 | Root | - | Code DEFAULT TEXT | ||
#E5E5E5 | Root | Code format Green text | |||
Not really | |||||
Aeris Light | Aeris Bold | Blue | Aeris | ||
Nimbus Light | Nimbus Bold | Purple | Nimbus | ||
Muse Light | Muse Bold | Pink | Muse | ||
Solea Light | Solea Bold | SYellow | Solea | ||
Cove Light | Cove Bold | Orange | Cove | ||
Coral Light | Coral Bold | Red | Coral |
Tags in the Sections are used just like this
Small with Code
GREEN / GRAY
Big with normal text
GRAY / GRAY
GREEN / GRAY
GRAY / GRAY CODE
GRAY / GRAY TEXT
GREEN / GRAY CODE
GREEN / GRAY TEXT
GREEN BG GRAY FG
GREEN BG GRAY FG
→ Green Background, Gray Text
→ Gray Background → Gray Text
Code Formats
Notion Format | Example | ||
Code Format Green | Code Format with color-default | BG: Default: FG: 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 | ||
Code Format Green | Code |
Code Default 2
BG: Mist, FG: Depth
<span class="highlighted-color color-default"><code class="code">Code Format </code></span>Code Only
BG: Mist, FG: Depth
<code class="code">Code Default</code>Code Green Text
BG: Mist, FG: Depth
<span class="highlighted-color color-green"><code class="code">Code Green Text</code></span>Backgrounds
GRAY Background
TBD WHAT WE DO WITH IT
No Background
has Halo as Background
Callout Grau BG
Bereit für den nächsten Schritt? Sprich mit unseren Notion-Experten!
Wir unterstützen dein Team dabei, Zeit zu sparen, die Zusammenarbeit zu verbessern und sich auf das Wesentliche zu konzentrieren: euer Unternehmen.
Lass uns gemeinsam entdecken, wie wir dich bestmöglich auf deinem Weg begleiten können.
Callout Grün BG über ganze breite
Bereit für den nächsten Schritt? Sprich mit unseren Notion-Experten!
Wir unterstützen dein Team dabei, Zeit zu sparen, die Zusammenarbeit zu verbessern und sich auf das Wesentliche zu konzentrieren: euer Unternehmen.
Lass uns gemeinsam entdecken, wie wir dich bestmöglich auf deinem Weg begleiten können.
Callout Brown BG
Bereit für den nächsten Schritt? Sprich mit unseren Notion-Experten!
Wir unterstützen dein Team dabei, Zeit zu sparen, die Zusammenarbeit zu verbessern und sich auf das Wesentliche zu konzentrieren: euer Unternehmen.
Lass uns gemeinsam entdecken, wie wir dich bestmöglich auf deinem Weg begleiten können.
FAQ (Toggles)
UI Elements
Tabbed Nav
Name |
|---|
Footer
Keep up with the latest Notion business trends.
Subscribe to receive tips, templates and updates directly to your inbox.