This is the Notioneers Style Guide for AI
Typefaces
We use
We’re using these fonts:
TWK Lausanne 300
TWK Lausanne 300 Italic
TWK Lausanne 400
TWK Lausanne 400 Italic
TWK Lausanne 600
TWK Lausanne 600 Italic
For titles we never use 600. it’s only for highlighting some text bold
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
#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 |