Brand Guidelines Version 2.0 · November 2026

empowering you

Logo, Farben, Typografie, Bildwelt, Gestaltungselemente, Icons, UI, Tonalität und Anwendungen. Für alle, die für younity gestalten oder schreiben.

younity GmbH · Muttenz, Schweiz Gültig für alle Kanäle: digital, Print, Events, Social Media

Inhalt

Der Guide beschreibt, wie younity aussieht und klingt. Er gilt für alle, die für younity gestalten oder schreiben, intern wie extern.

Auf einen Blick

Die Grundregeln in Kurzform. Details und Begründungen folgen in den Kapiteln.

Logo

Wortmarke im Verlauf auf Weiss. Bildmarke für Avatare und Wasserzeichen. Nie kombinieren.

Farben

Space Blue trägt, Deep Pink setzt Akzente. Viel Weiss und helle Flächen schaffen Ruhe.

Aa

Schrift

DM Sans für alles. Headlines Bold mit enger Laufweite, Fliesstext Regular.

Ein Wort in Pink

Signatur

Ein Schlüsselwort in Pink, höchstens einmal pro Format. Keine Versalien.

Form

Der Kreis aus unserer Bildmarke. Daraus entstehen Bogen, Pille und Halbkreis.

Wir duzen.

Ton

Wir schreiben herzlich und konkret und machen keine Heilversprechen.

Marke

Wofür younity steht, warum es uns gibt und wie wir auf Menschen wirken wollen.

01

Unser Claim

empowering you

Der Claim spricht jeden Menschen direkt an. Er wird klein geschrieben wie unser Name, ohne Punkt und in einer Zeile. Er steht für sich, nicht als feste Einheit mit dem Logo.

Vision

Empowering people to be fulfilled.

Menschen dazu befähigen, ein erfülltes Leben zu führen. Wir tun es mit Liebe und Leidenschaft.

Mission

Mit Liebe und Leidenschaft schaffen wir wertvolle Erfahrungen, ermöglichen den Zugang zu den inspirierendsten Mentoren und teilen ihre Weisheit.

Wir ermöglichen Menschen, sich mit ihrem höheren Selbst zu verbinden und ihr volles Potenzial zu entfalten.

Das younity Team

Wir sind nicht die Mentoren. Wir sind die Bühne.

younity verwandelt die Weisheit der inspirierendsten Mentoren in Erlebnisse, die Menschen kaufen, besuchen und leben können: Online-Programme, Masterclasses, Ausbildungen, Online-Summits, Live-Events und Communities.

In 14 Sprachen und in über 70 Ländern. Mit Sitz in Muttenz, Schweiz.

187+Programme

91+Mentoren

3 Mio.Menschen in der Community

70+Länder

Zahlen: Stand November 2026. Vor Verwendung aktuell prüfen.

Markenpersönlichkeit

Drei Eigenschaften aus dem ersten Guide von 2024. Sie gelten für alle Kanäle.

bewusst

Wir handeln achtsam und mit Haltung. Mentoren, Inhalte und Worte wählen wir mit Sorgfalt.

befähigend

Jeder Inhalt soll Menschen einen konkreten nächsten Schritt ermöglichen.

wertvoll

Wir machen lieber weniger und dafür gründlich. Was wir anbieten, soll lange nachwirken.

Wir sind

herzlichklarermutigendnahbarhochwertigverbindend

Wir sind nicht

abgehobenverklärt esoterischlautbelehrendbeliebig

Logo

Unser wichtigstes Erkennungszeichen. Es besteht aus zwei eigenständigen Zeichen: der Wortmarke und der Bildmarke.

02

Wortmarke und Bildmarke

Die Wortmarke ist eine reduzierte, geometrische Schrift. Die Bildmarke ist das Initial y, umschlossen von einem Kreis, mit dem die Unterlänge verbunden ist.

Wortmarke · HauptlogoErste Wahl für alle Absender: Website, Dokumente, Plakate, Präsentationen.

Bildmarke · SignetFür kleine Flächen und dort, wo younity bereits als Absender klar ist.

Wichtig: Wortmarke und Bildmarke stehen immer für sich. Sie werden nicht nebeneinander zu einem gemeinsamen Logo kombiniert, auch nicht in Kopfzeilen oder Signaturen.

Farbvarianten

Der Verlauf ist unser Hauptlogo. Die einfarbigen Varianten kommen zum Einsatz, wenn Hintergrund oder Technik den Verlauf nicht zulassen.

VerlaufHauptlogo auf Weiss und sehr hellen, ruhigen Flächen.

Space BlueAuf hellen Flächen, wenn kein Verlauf möglich ist.

WeissAuf Space Blue, Pink, dunklen Flächen und Fotos.

Deep PinkAls Akzent auf Weiss, hellen Flächen oder Schwarz.

SchwarzNur für Einfarbdruck, Stempel, Gravur oder sehr unruhige helle Flächen.

Dateiformate: SVG für Web, Office und Druck (verlustfrei skalierbar). PNG mit transparentem Hintergrund für Tools ohne SVG-Unterstützung. Logos nie aus Screenshots oder JPGs mit Hintergrund verwenden.

Schutzraum und Mindestgrösse

Der Schutzraum hält andere Elemente auf Abstand. Er wächst mit dem Logo und wird deshalb relativ definiert, nicht in Pixeln.

x x x x

Wortmarke: x = halbe Höhe des Buchstabens „o“Das entspricht rund 9 % der Logobreite.

x x

Bildmarke: x = ¼ des KreisdurchmessersGilt rundum, auch zum Formatrand.

Wortmarkemin. 80 px breit digital
min. 20 mm breit im Druck

Bildmarkemin. 24 px digital
min. 6 mm im Druck

Favicon16 px als einzige Ausnahme,
nur als App-Icon-Variante

Bildmarke

Die Bildmarke steht dort, wo wenig Platz ist oder die Marke bereits bekannt ist: Profilbild, App-Icon, Favicon, Wasserzeichen in Social Media und auf Präsentationsfolien.

VerlaufStandard auf Weiss

Space BlueHelle Flächen

Deep PinkAkzent auf hell

WeissDunkle Flächen, Fotos

Weiss auf PinkAktionsflächen

App-IconAvatar, Favicon

Profilbild: App-Icon-Variante, kreisrund, auf allen Social-Kanälen identisch.

Wasserzeichen: in Posts und Thumbnails oben rechts oder oben links, rund 8 % der Formatbreite.

Folien: auf hellen Inhaltsfolien oben rechts. Titel- und Kapitelfolien tragen die Wortmarke.

Logo auf Hintergründen

Faustregel: Verlauf auf Weiss, Weiss auf dunkel. Auf Fotos steht das Logo immer in einem ruhigen Bildbereich.

WeissVerlauf

Light BlueVerlauf oder Space Blue

Light PinkSpace Blue

Space BlueWeiss

Deep PinkWeiss

SchwarzDeep Pink oder Weiss

Dunkles FotoWeiss im ruhigen Bereich

Helles FotoSchwarz oder Space Blue

Falsche Anwendungen

Das Logo wird immer aus den Originaldateien verwendet. Es wird nicht nachgebaut, verändert oder mit Effekten versehen.

Nicht verzerrenProportionen immer beibehalten.

Nicht drehenDas Logo steht immer gerade.

Keine EffekteKein Schatten, Glow oder 3D.

Keine KonturNur gefüllte Originalformen.

Kein Verlauf auf dunkelHier gehört die weisse Variante hin.

Kein Pink auf Space BlueZu wenig Kontrast.

Nicht umfärbenNur die fünf freigegebenen Varianten.

Nicht kombinierenBild- und Wortmarke stehen getrennt.

Platzierung und Co-Branding

younity ist die Bühne. Auf unseren Formaten stehen die Mentoren und ihre Inhalte im Fokus, das Logo signiert als Absender.

Gestrichelt: Randabstand 7,5 % der Formatbreite, bei 1080 px also 80 px. Die Bildmarke sitzt oben links im Rand.

Immer in einer Ecke. Bevorzugt oben links (Wortmarke) oder oben rechts (Bildmarke als Wasserzeichen).
Grösse: Wortmarke rund ¼ der Formatbreite, Bildmarke rund 8 %.
Pro Format ein Logo. Nicht oben und unten wiederholen.
Nie im Bildfokus, nie über Gesichtern oder Text.

Co-Branding mit Partnern

Partnerlogo

Gleiche optische Grösse, getrennt durch eine feine Linie (1 px, Border-Farbe).
Abstand zwischen den Logos: mindestens 2 × Schutzraum.
Mentorennamen setzen wir in DM Sans. Eigene Logos von Mentoren nur, wenn sie offiziell freigegeben sind.

Farben

Zwei Markenfarben, dazu helle Flächen und eine kleine Palette für digitale Zustände.

03

Primärfarben

Im Druck mit Sonderfarben gelten die Pantone-Werte, im Vierfarbdruck die CMYK-Werte. CMYK vor jedem Auftrag mit einem Proof prüfen.

Space BlueTrägt die Marke: dunkle Flächen, Headlines, Navigation, Footer, Formen.

HEX
RGB
Pantone
CMYK: 100 / 87 / 31 / 19

Deep PinkUnser Highlight: Buttons, Links, Schlüsselwörter, Badges.

HEX
RGB
Pantone
CMYK: 1 / 97 / 4 / 0

WeissRaum und Ruhe. Die häufigste Fläche.

HEX
RGB: 255 / 255 / 255
Pantone: Papierweiss
CMYK: 0 / 0 / 0 / 0

Flächenfarben und digitale Palette

Light Blue und Light Pink sind die Bühne für Porträts und Inhalte. Die erweiterte Palette nutzen wir nur digital, für Zustände und Text.

Light BlueRuhige Flächen, Karten, Porträts. Bisher auch „Light Grey“ genannt.

HEX
RGB
CMYK ≈: 238 / 239 / 244; 2 / 2 / 0 / 4

Light PinkWarme Flächen, Porträts, Themen rund um Herz und Beziehung.

HEX
RGB
CMYK ≈: 252 / 231 / 242; 0 / 8 / 4 / 1

Off-WhiteSehr leichte Flächen, Formularbereiche, E-Mail-Hintergrund.

HEX
RGB
Einsatz: 245 / 246 / 249; nur digital

Digitale Erweiterung · nur für Bildschirm, nicht für Druck

Navy 800
Tiefe in Blauflächen

Night
Footer, Overlays

Pink Hover
Hover, gedrückt

On Dark
Sekundärtext auf Blau

Ink
Text auf hell

Muted
Sekundärtext

Border
Linien, Rahmen

Verlauf

Der Verlauf von Space Blue zu Deep Pink ist Teil unseres Logos. Damit er besonders bleibt, setzen wir ihn sonst nur an einer Stelle ein: als schmale Leiste.

Space Blue
0 % Mittelpunkt
50 % Deep Pink
95 %

Linear · 90° (von links nach rechts) · CSS: linear-gradient(90deg, #1D2E64 0%, #E5007D 95%)

Erlaubt

Wortmarke, Bildmarke und App-Icon
Verlaufsleiste am unteren Rand von Präsentationen und Dokumenten, höchstens 1 % der Formathöhe

Nicht erlaubt

Als Hintergrund von Flächen, Karten oder Buttons
In Schrift, Icons oder Formen. Für Fotos gibt es das Farb-Overlay (Kapitel Bildwelt)

Farbverhältnis und Kombinationen

Weiss und helle Flächen überwiegen, Space Blue gibt Struktur, Pink bleibt selten.

60 %Weiss & Light Blue

25 %Space Blue

10 %Deep Pink

5 %

Richtwert über eine Kampagne oder Website gesehen. Einzelne Formate (z. B. ein Event-Plakat in Space Blue) dürfen abweichen.

So kombinieren wir

Auf Space Blue: Pink als Fläche immer, als Schrift nur in Headlines ab 32 px.

Das vermeiden wir

Zu wenig Kontrast, trübe Paarungen oder der Verlauf als Fläche.

Kontrast und Barrierefreiheit

Wir halten WCAG 2.2 Stufe AA ein: mindestens 4,5 : 1 für Text, 3 : 1 für grosse Schrift ab 24 px (oder 19 px Bold) und für Bedienelemente. Einzige bewusste Ausnahme: das pinke Schlüsselwort in grossen Headlines auf Space Blue.

AaInk auf WeissFliesstext, Headlines17,0 : 1Alle Grössen

AaSpace Blue auf WeissHeadlines, Zahlen12,9 : 1Alle Grössen

AaWeiss auf Space BlueText auf dunklen Flächen12,9 : 1Alle Grössen

AaMuted auf WeissSekundärtext6,3 : 1Alle Grössen

AaDeep Pink auf WeissLinks, Schlüsselwörter4,5 : 1Alle Grössen

AaWeiss auf Deep PinkButtons, Badges4,5 : 1Alle Grössen

AaDeep Pink auf Light Bluegrosse Schrift, Akzente4,0 : 1Nur gross

AaDeep Pink auf Light Pinkgrosse Akzente3,9 : 1Nur gross

AaOn Dark auf Space BlueSekundärtext auf dunklen Flächen8,7 : 1Alle Grössen

AaSpace Blue auf Light BlueText auf Karten und Flächen11,2 : 1Alle Grössen

AaDeep Pink auf Space Bluenur Headlines ab 32 px, bewusst unter AA2,8 : 1Ab 32 px

AaSpace Blue auf Deep Pinknie für Text verwenden2,8 : 1Nicht erlaubt

Typografie

Eine Schrift für alles: DM Sans. Dazu Schnitte, Skala, Satzregeln und das pinke Schlüsselwort.

04

Aa

DM Sans

Geometrische Grotesk mit geringem Kontrast, kostenlos unter der SIL Open Font License. Erhältlich über Google Fonts, auf der Website selbst gehostet.

0 1 2 3 4 5 6 7 8 9

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj
Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt
Uu Vv Ww Xx Yy Zz Ää Öö Üü
& ? ! „ “ € % @ ( ) · → +

Light 300 Regular 400 Medium 500 Semibold 600 Bold 700

Fallback: Arial, Helvetica, sans-serif. In Office-Vorlagen DM Sans installieren. Wo das nicht möglich ist (z. B. E-Mail-Programme), greift Arial.

Schriftschnitte

Fünf Schnitte mit festen Aufgaben. Mehr braucht es nicht.

Bold 700Laufweite −2 % bis −3 %

Headlines, Statistiken, Preise, Hervorhebungen im Fliesstext

Für dein erfülltes Leben

Semibold 600Laufweite 0 bis +1 %

Buttons, Kartentitel, Navigation, Labels

Jetzt kostenlos starten →

Medium 500Laufweite 0

Namen, Untertitel, Metazeilen

Shi Heng Yi · Shaolin-Meister

Regular 400Laufweite 0

Fliesstext, Leads, Beschreibungen

Online-Programme, Masterclasses und Live-Events.

Light 300nur ab 64 px

Grosse Kapitelnummern und einzelne Display-Wörter, nie für Text

01 02 03

Typo-Skala

Werte für Desktop. Mobil verkleinern wir Display bis H2 auf rund 70 %: H1 36 px, H2 28 px, Fliesstext 16 px.

Display56 / 60 · Bold · −3 %Wie möchtest du wachsen?

H148 / 54 · Bold · −3 %Die besten Mentoren

H240 / 46 · Bold · −2 %Gerade neu bei younity

H322 / 28 · Semibold · −2 %Schätze der Shaolin: das komplette 21-Tage-Programm

H420 / 28 · SemiboldWie kann ich bei younity dabei sein?

Lead20 / 31 · RegularVier Wege, ein Ziel: ein erfülltes Leben.

Body17 / 28 · RegularVideo-Teachings, Live-Coachings und eine Community, die denselben Weg geht wie du.

Small15 / 23 · RegularEin paar Tage raus aus dem Alltag, mitten hinein in die Transformation.

XS13 / 19 · RegularDeine Daten werden vertraulich behandelt und nicht an Dritte weitergegeben.

Meta14 / 20 · MediumOnline-Kurs · Shi Heng Yi · 21 Tage

Das pinke Schlüsselwort

Unser typografisches Erkennungszeichen stammt aus dem ersten Guide: ein Wort in Pink. Es wirkt nur, solange es selten bleibt.

Die Bühne für die inspirierendsten Lehrer unserer Zeit

Auf hellem GrundEin Wort in Deep Pink

Das spirituelle Festival in Europa

Infos und Tickets

Auf Space BlueEin Wort gross in Deep Pink, kleine Schrift bleibt weiss

Ein Wort

Das emotionale Kernwort einer Aussage, nie ein ganzer Satz. Gleicher Schnitt, nur die Farbe wechselt. Auf Space Blue ebenfalls Deep Pink, aber nur in Headlines ab 32 px.

Selten

Höchstens einmal pro Format oder Bildschirm, in der wichtigsten Headline. Zwischenüberschriften und Seitentitel bleiben einfarbig.

Keine Versalien

Keine Zeilen in Grossbuchstaben über Headlines. Kategorien stehen als Metazeile in normaler Schreibweise: „Online-Kurs · 21 Tage“.

Satzregeln

Linksbündig. Zentriert nur für kurze Headlines und Calls-to-Action (max. drei Zeilen).
Zeilenlänge höchstens 680 px, rund 60 bis 75 Zeichen.
Keine Versalien. Auch Badges, Labels und Kategorien stehen in normaler Schreibweise.
Zeilenabstand: Headlines 1,0 bis 1,15, Fliesstext 1,6.
Laufweite: Headlines −2 % bis −3 %, Fliesstext unverändert.
Zeichen: deutsche Anführungszeichen „so“, Apostroph ’, Bis-Strich ohne Leerzeichen (10–12 Uhr), Preise mit Leerzeichen (199 €).

Don’ts

Onlinekurse

Keine Schatten

Onlinekurse

Keine Kontur

Onlinekurse

Nicht verzerren

Kein Verlauf in Schrift

ONLINEKURSE

Keine Versalien

Onlinekurse

Nicht mehrere Farben

Bildwelt

Porträts, Events, Community und Natur. Dazu Bildformen, Farb-Overlay und Illustrationen.

05

Bildsprache

Vier Motivgruppen, auf die wir uns konzentrieren.

Echte Momente

Echte Menschen und echte Emotionen. Gemeinschaft, die man spürt.

Nahbare Mentoren

Blickkontakt, warmes Licht, ruhiger Hintergrund.

Energie der Bühne

Verbindung zwischen Bühne und Publikum, Licht und Bewegung.

Licht und Weite

Natur, Himmel und Wasser: Räume zum Durchatmen und Ankommen.

Mentoren-Porträts

Porträts sind unser wichtigstes Bildmotiv. Sie stehen auf Light Blue, Light Pink oder Weiss und werden im Bogen oder Kreis angeschnitten.

Joe Dispenza

Anita Moorjani

Bruce Lipton

Gregg Braden

Eva-Maria Zurhorst

Ausschnitt: Kopf und Schultern, frontal oder leicht seitlich, Blick in die Kamera.
Ausdruck: freundlich, offen, präsent. Keine gestellten Posen.
Hintergrund: hell und ruhig oder freigestellt auf Light Blue bzw. Light Pink.
Qualität: mindestens 1080 px an der kurzen Seite, für Druck 300 dpi in Endgrösse.
Rechte: nur freigegebene Fotos der Mentoren. Keine KI-generierten oder veränderten Gesichter.
Namen stehen als weisse Pille auf dem Bild oder als Avatar-Chip daneben.

Motivwelten

Neben den Porträts erzählen drei Motivwelten von younity: die Kraft der Live-Events, die Wärme der Community und die Weite der Natur.

Bildbehandlung

Bilder werden in unsere Formenfamilie gesetzt. Grosse Hintergrundbilder mit Text erhalten das Farb-Overlay.

Bildformen

Kreis für Avatare · Bogen für Porträtkarten · Rechteck mit 24 px Radius für Fotos.

Bearbeitung

Natürliche Farben, eher warm und hell. Keine Vintage-Filter oder starken Looks.
Kein Text über Gesichtern oder unruhigen Bildbereichen.
Keine Stockfoto-Klischees wie Lotusblüten auf Steinen oder gestellte Business-Lächeln.

Farb-Overlay

Original

Mit Overlay

Einsatz: Breite Hintergrundbilder, auf denen Text steht
Verlauf: Deep Pink oben → Space Blue unten, ca. 170°
Deckkraft: 60 bis 80 %, Füllmethode Multiplizieren
Text darauf: immer Weiss, Kontrast prüfen

Das Overlay ist ein Werkzeug für Fotos und nicht der Logo-Verlauf. Es wird nie auf Porträts angewendet.

Illustrationen

Unsere Illustrationen erklären Angebote, Abläufe und Werte. Sie sind flach, freundlich und in unserer Palette gehalten.

Illustration: Menschen lernen auf Bücherstapeln

Illustration: Sprecher auf beleuchteter Bühne

Illustration: zwei Menschen mit Natursymbolen

Stil

Flache Formen ohne Konturen, Figuren mit Pink- und Blautönen, eine organische Fläche in Pink bis Violett als Bühne.

Einsatz

Angebotskategorien, Onboarding, Nachhaltigkeit, Erklärgrafiken, leere Zustände in Apps.

Grenzen

Nie als Ersatz für Mentorenfotos. Keine fremden Illustrationsstile mischen. Neue Motive im bestehenden Stil beauftragen.

Gestaltungselemente

Der Kreis aus unserer Bildmarke ist der Ursprung aller Formen, die wir verwenden.

06

Der Kreis

Der Kreis steht für Einheit, für das Vollkommene und das All-Eine. Als Linie ohne Anfang und Ende steht er für Unendlichkeit und Wiederkehr, als Ring für Schutz und Verbundenheit.

Er stammt direkt aus unserer Bildmarke. Aus ihm entsteht eine kleine Formenfamilie, die wir als Bildmaske, Fläche oder Akzent einsetzen.

Kreis

Halbkreis

Bogen

Pille

Viertelkreis

Formen im Einsatz

Drei Einsatzarten. Pro Format reicht in der Regel eine davon.

Orbit

younity in der Mitte, die Mentoren kreisen darum. Für Hero-Bereiche, Titel und Events. Ringe 1 bis 2 px in Weiss mit 8 bis 12 % Deckkraft.

Bildmaske

Bogen und Kreis rahmen Porträts und Fotos. Sie geben Bildern Wärme und verbinden sie mit der Bildmarke.

187+Programme

Akzent

Angeschnittene Formen am Rand und die pinke Akzentlinie über Zahlen und Namen. Höchstens zwei Formen pro Format.

Formen in Space Blue, Deep Pink, Light Blue, Light Pink oder Weiss. Ohne Verlauf, ohne Schatten und ohne Kontur, mit Ausnahme der Orbit-Ringe.

Baukasten-Muster vermeiden

Viele Websites und Posts, die mit Vorlagen oder KI-Tools entstehen, sehen gleich aus. Diese Muster machen younity austauschbar. Wir setzen sie nicht ein.

Versal-Zeilen über jeder Headline, klein, pink, mit weiter Laufweite
Pillen-Badge über der Hero-Headline wie „Neu: …“
Leuchtende Glows, Glas-Effekte und Verläufe als Hintergrund
Pink in jeder Headline statt einmal an der wichtigsten Stelle
Kleine pinke Schrift auf Space Blue, etwa in Labels oder Fliesstext
Drei gleiche Icon-Karten als Standard-Abschnitt
Emojis und Funkel-Symbole als Icons
KI-generierte Menschen und austauschbare Stockfotos
Floskeln: „nicht X, sondern Y“, Dreierketten, Wortspiele in jedem Titel

Neu: Masterclass

DEIN WEG ZUR TRANSFORMATION

Transformiere dein ganzes Leben

Nicht irgendein Kurs, sondern deine Reise. Klar, kraftvoll, transformierend.

Jetzt startenMehr erfahren

BaukastenBadge, Versal-Zeile, Glow, zwei pinke Stellen, Floskel, zwei gleichwertige Buttons

Die besten Mentoren für dein erfülltes Leben

Online-Programme, Masterclasses und Live-Events mit über 90 Mentoren.

Kostenlos starten

younityEine klare Aussage, ein pinkes Wort, ein Button, eigene Form

Icons

Brand-Icons für Inhalte, UI-Icons für die Bedienung.

07

Brand-Icons

Monolinear, mit einheitlicher Strichstärke. Für Vorteile, Programminhalte, Präsentationen, Print und Social Media.

Instagram

YouTube

E-Mail

Facebook

Senden

Welt

Termin

Ausbildung

Bestätigt

Herz

Lotus

Vision

Zeit

Pfeil

Online

Community

Mission

Gipfel

Meditation

Fragen

Ort

Feedback

Video

Netzwerk

Regeln für Brand-Icons

Farbe: Space Blue, Ink oder Weiss. Pink nur für interaktive Elemente oder einen einzelnen Akzent.
Grösse: mindestens 24 px, ideal 32 bis 48 px. Icons einer Reihe immer gleich gross.
Im Kreis: Icon in Deep Pink auf Pink Soft (10 % Pink), wenn es klickbar ist.
Nicht verändern: nicht füllen, nicht verzerren, keine Icons aus anderen Sets mischen.

24

32

48

im Kreis

auf Blau

UI-Icons

Auf der Website und in digitalen Produkten nutzen wir Phosphor Icons im Stil Bold. Sie sind für Benutzeroberflächen optimiert, frei lizenziert (MIT) und decken alle Bedienfunktionen ab.

Grössen 16, 20 und 24 px. Farbe übernimmt die Textfarbe (currentColor). Quelle: phosphoricons.com

UI & Web

Komponenten, Abstände und Tokens für Website und digitale Produkte. Pink kennzeichnet, was klickbar ist.

08

Buttons und Links

Pro Bereich gibt es genau einen Primary Button. Buttons sind immer pillenförmig und tragen ein Verb.

Primary

Starte deine ReiseHover

Höhe: 52 px · klein 44 px
Innenabstand: 15 × 36 px · klein 10 × 22 px
Schrift: 15 px Semibold, Weiss
Fläche: Deep Pink · Hover #C8006D
Schatten: Pink, 24 px weich

Secondary & Link

Alle Mentoren entdecken

Mehr dazu Ausgebucht

Secondary: Weiss, 1 px Rahmen, Space Blue
Link: 15 px Semibold, Pink, mit Pfeil
Icon-Button: 44 px, Pink Soft, Pfeil in Pink

Auf Space Blue

Infos und Tickets

Programm ansehen

Primary: unverändert Deep Pink (Fläche)
Schrift: Weiss oder #CFD4E6, Pink nur in Headlines ab 32 px
Secondary: transparent, Rahmen Weiss 45 %
Fokus: 4 px Ring in Pink Soft

Beschriftung

Kurz und aktiv, mit Verb: „Jetzt kostenlos starten“, „Infos und Tickets“. Nicht: „Hier klicken“, „Absenden“.

Hierarchie

Primary für die Hauptaktion, Secondary für Alternativen, Link für weiterführende Inhalte.

Bewegung

Hover hebt den Button um 1 px an. Übergänge 240 ms, Easing cubic-bezier(.16, 1, .3, 1).

Formulare, Badges und Chips

Formularfelder sind pillenförmig wie Buttons. Badges und Chips helfen beim Orientieren, ohne zu überladen.

Kostenlos starten

Ich akzeptiere die Datenschutzbestimmungen und möchte den younity Newsletter erhalten.

Wie kann ich bei younity dabei sein?

Eingabefeld: 52 px hoch, Weiss, Rahmen #D5D8E3, Fokus in Pink
Checkbox: 20 px, rund, aktiv in Deep Pink
Akkordeon: 20 px Semibold, 24 px Radius, Plus-Icon im Kreis

Badges

Neu−40 %LiveKostenlos

Metazeile und Bewertung

Online-Kurs · 21 TageLive-Event · Basel

Namen und Mentoren-Chips

Shi Heng Yi

Bruce Lipton

Marianne Williamson

Badge: 12 px Semibold, normale Schreibweise, Pille, max. ein Badge pro Karte
Namens-Pille: Weiss auf Bild, 12,5 px Semibold, weicher Schatten
Sterne: Deep Pink, nur echte Bewertungen zeigen

Karten

Karten haben 24 px Radius, einen feinen Rahmen statt harter Schatten und folgen immer derselben Reihenfolge.

NeuJoe Dispenza

Event · Basel

Progressive Retreat in Basel

Ein Retreat für deine neue Zukunft.

statt ~~799 €~~599 €

Online-Programme

Lerne von den Besten, wann und wo du willst

Video-Teachings, Live-Coachings und eine Community.

Kostenlos

Trainings & Masterclasses

Ohne Risiko reinschnuppern.

„Ich habe mich selbst sehr weiterentwickelt.“

Produktkarte: Bild mit Badge und Namens-Pille → Metazeile → Titel (H3) → Kurztext → Fusszeile mit Pfeil und Preis. Preise und Inhalte in diesem Beispiel sind Muster.

Raster, Abstände und Radien

Alle Abstände folgen einem 5er-Raster. Es gibt zwei Radien plus die Pille und zwei Schatten.

Abstände

5

10

15

20

25

30

40

50

60

70

85

105

120

Container: 1160 px · breit 1320 px · schmal 760 px
Seitenrand: 24 px mobil
Textbreite: max. 680 px
Sektionen: 105 bis 120 px Abstand (Desktop)
Nach Headline: 48 px · vor Call-to-Action 64 px

Radien

12 px
Kleine Elemente unter 100 px: Thumbnails, Icon-Kacheln, Farbfelder

24 px
Alles Flächige: Karten, Fotos, Kacheln, Akkordeon

Pille
Alles Klickbare: Buttons, Felder, Badges, Chips

Schatten

Karte · weich, bläulich

Button · Pink

Design Tokens

Alle Werte dieses Guides gibt es als CSS-Variablen. Sie lassen sich direkt in Website und Apps einbinden.

tokens.css mit Farben, Typografie, Radien, Schatten, Abständen
DM Sans selbst gehostet als WOFF2, ohne Abruf bei Google
Präfix --yn- für alle Variablen

tokens.css herunterladen

/* younity Design Tokens 2.0 (Auszug) */
:root {
  --yn-space-blue: #1D2E64;
  --yn-deep-pink: #E5007D;
  --yn-light-blue: #EEEFF4;
  --yn-light-pink: #FCE7F2;
  --yn-pink-hover: #C8006D;
  --yn-text-on-dark-muted: #CFD4E6;
  --yn-ink: #16193A;
  --yn-gradient-brand: linear-gradient(90deg, #1D2E64 0%, #E5007D 95%);

  --yn-font: "DM Sans", Arial, Helvetica, sans-serif;
  --yn-fs-h1: 48px;  --yn-lh-h1: 54px;
  --yn-fs-body: 17px; --yn-lh-body: 28px;
  --yn-tracking-tight: -0.02em;

  --yn-radius-sm: 12px;
  --yn-radius-lg: 24px;
  --yn-radius-pill: 999px;
  --yn-shadow-button: 0 10px 24px -10px rgba(229,0,125,.55);
  --yn-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

Tonalität

Wir duzen, schreiben konkret und versprechen nichts, was wir nicht halten können.

09

So schreiben wir

Vier Prinzipien, jeweils mit einem Beispiel.

Persönlich

Wir duzen und sprechen jede Person direkt an.

SoStarte deine Reise.

Nicht soStarten Sie Ihre persönliche Transformationsreise.

Warm

Wir zeigen Gefühl und bleiben dabei geerdet.

SoFinde zurück zu deiner inneren Ruhe.

Nicht soTauche ein in die unendliche Glückseligkeit des Universums!

Klar

Wir nennen Fakten und verzichten auf Fachjargon.

So8 Tage, kostenlos, in deinem Tempo.

Nicht soEin multidimensionales Erlebnis auf allen Ebenen.

Ehrlich

Keine Heilversprechen, keine falsche Dringlichkeit.

SoViele Teilnehmende erleben mehr Gelassenheit.

Nicht soHeilt deine Ängste in 7 Tagen. Nur heute!!!

Schreibweisen

younity schreiben wir immer klein, auch am Satzanfang und in Überschriften. Nie Younity, YOUNITY oder YOUnity.
Du-Form in allen Kanälen an unsere Community. In formeller Geschäftskorrespondenz kann gesiezt werden.
Schweizer Rechtschreibung mit ss statt ß: grosse, weiss, Strasse.
Ziffern in Headlines, Buttons, Badges und Fakten: 8 Tage, 3 Mio., 70+ Länder.
Emojis sparsam und nur in Social Media und E-Mail-Betreffzeilen, höchstens eines pro Satz.
Calls-to-Action beginnen mit einem Verb: Starte, Entdecke, Sichere dir.

Wording

Wir sagen	Statt
Mentorinnen und Mentoren	Gurus, Coaches, Speaker
Online-Programm, Online-Kurs	Produkt, Content, Paket
Community, Teilnehmende	Kunden, User, Zielgruppe
Reise, Weg, Wachstum	Optimierung, Hack, Upgrade
erfülltes Leben	perfektes Leben, Erfolg um jeden Preis
kostenlos	gratis, umsonst
Live-Event, Festival	Seminarveranstaltung

Anwendungen

Beispiele für Website, Social Media, Video, Print, E-Mail und Präsentationen.

10

younity.com

Website

Hero in Space Blue mit Orbit, eine Headline mit einem pinken Wort, ein klarer Call-to-Action, Karten mit 24 px Radius und viel Weissraum.

Social Media

Eine Botschaft pro Post, höchstens ein Call-to-Action. Die Bildmarke sitzt als Wasserzeichen in einer oberen Ecke.

Ankündigung · 1080 × 1350 · Space Blue, Porträt im Bogen

Instagram-Post: Stimme aus der Community

Community-Stimme · 1080 × 1080 · echte Bewertung

Impuls · 1080 × 1080 · Foto im Kreis angeschnitten

Story / Reel-Cover · 1080 × 1920

Story und YouTube

YouTube-Thumbnail · 1280 × 720

Story: oben 250 px und unten 340 px frei lassen. Dort liegen Profil und Bedienelemente.
Thumbnail: Gesicht gross, höchstens fünf Wörter, ein Schlüsselwort in Deep Pink.

Plakat · A2 hoch

Plakat und Event

Ein Plakat hat zwei Sekunden. Space Blue als Fläche, der Orbit mit Mentoren und eine grosse Headline machen es sofort zu younity.

Aufbau

Wortmarke weiss oben links
Bildwelt im Kreis, Mentoren im Orbit
Headline, ein Satz, Call-to-Action

Druckdaten

Pantone 288 C und 226 C oder CMYK, Werte aus Kapitel 03
Bilder 300 dpi in Endgrösse
3 mm Beschnitt, Proof vor Freigabe

Gleiche Prinzipien gelten für Roll-ups, Bühnenrückwände, Tickets und Badges: viel Space Blue, wenig Text, ein Schlüsselwort in Pink.

Newsletter · 600 px breit

E-Mail und Präsentation

E-Mail: 600 px breit, Wortmarke oben links, ein Hauptbild, eine Headline, ein Button. Schrift-Fallback Arial.
Absender, Adresse und Abmeldelink stehen immer im Footer.

Folien: 16:9, DM Sans, Verlaufsleiste unten. Titel- und Kapitelfolien in Space Blue mit Wortmarke.
Inhaltsfolien weiss, Bildmarke oben rechts, ein Gedanke pro Folie.

Marken-Check

Zehn Fragen vor jeder Veröffentlichung.

Richtiges Logo für den Hintergrund, Schutzraum eingehalten?Kapitel 02
Wortmarke und Bildmarke getrennt, Logo aus Originaldatei?Kapitel 02
Nur Farben aus der Palette, Pink sparsam als Akzent?Kapitel 03
Verlauf nur im Logo oder in der Verlaufsleiste, keine Glow-Effekte?Kapitel 03 und 06
Kontrast geprüft, Pink auf Space Blue nur in Headlines ab 32 px?Kapitel 03
DM Sans, Headline Bold, Pink höchstens einmal, keine Versalien?Kapitel 04
Echte, hochwertige Bilder, Mentorenfotos freigegeben?Kapitel 05
Ein klarer Call-to-Action mit Verb?Kapitel 08
Du-Form, warm und klar, keine Heilversprechen?Kapitel 09
younity klein geschrieben, Rechtschreibung mit ss geprüft?Kapitel 09

Downloads und Kontakt

Logo-PaketWortmarke und Bildmarke in allen Varianten, SVG und PNGZIP Brand-Icons24 Icons als SVGZIP Design TokensCSS-Variablen inklusive SchrifteinbindungCSS DM SansSchrift zum Installieren über Google FontsLink Brand GuidelinesDieser Guide als PDFPDF Brand Guidelines (English)Englische Fassung als PDFPDF

Alle Dateien liegen in der Online-Version dieses Guides zum Download bereit.

Fragen zur Marke?

Dieser Guide hat eine klare Verantwortung.
Brand Owner: Name eintragen
Allgemeiner Kontakt: hello@younity.team

Wer eine Regel bewusst bricht, entscheidet das und informiert den Brand Owner. Neue Fälle fliessen in die nächste Version ein.

Versionen

1.02024 · Grundlagen zu Logo, Typografie, Icons, Farben und ersten Anwendungen (Entwurf)

2.0November 2026 · Vollständig überarbeitet. Neu: Bildwelt, Gestaltungselemente, UI & Web, Tonalität, Checkliste, Design Tokens. Keine Versalien mehr, Pink nur noch selten

empowering you

younity GmbH · Hagnaustrasse 27 · CH-4132 Muttenz · younity.com

empowering you

Marke

empowering you

Wir sind nicht die Mentoren. Wir sind die Bühne.

Logo

Farben

Typografie

Satzregeln

Bildwelt

Gestaltungs­elemente

Der Kreis

Icons

Regeln für Brand-Icons

UI-Icons

UI & Web

Progressive Retreat in Basel

Lerne von den Besten, wann und wo du willst

Trainings & Masterclasses

Design Tokens

Tonalität

Schreibweisen

Wording

Anwendungen

Website

Story und YouTube

Plakat und Event

E-Mail und Präsentation

Downloads und Kontakt

empowering you

Gestaltungselemente