Brand Manual
Eine Marke.
Ein System.
Logo, Farben, Schriften, Prinzipien — alles, was BRANDFUSION visuell ausmacht. Kompakt, verbindlich, ohne Spielraum für Interpretation.
Logo, colors, fonts, principles — everything that defines BRANDFUSION visually. Compact, binding, no room for interpretation.
Logo & Bildmarke / Logo & Icon
Zwei Elemente. Ein System. Das Brand Logo ist die Bildmarke, BRANDFUSION die Wortmarke.
Brand Logo / Bildmarke
16px
Minimum
20px
28px
32px
48px
64px
Gradient: Orange #fdb051 → Rot #f2203e → Violett #5342d6
Geometrisch modernes Logo-Symbol. Glatte Gradient-Übergänge. Skalierbar von 16px bis unbegrenzt. Never monochrome, never outline-only.
Wortmarke / Wordmark
BRANDFUSION
Immer in Versalien. Immer in Bungee. Ein Wort, keine Trennung.
Always uppercase. Always in Bungee. One word, no separation.
Logo-Kombination / Logo Lockup
Auf dunklem Grund / On dark background
Auf hellem Grund / On light background
Schutzzone / Clear Space
Mindestabstand: Die Höhe des Pixel Hearts auf allen Seiten. Kein Element darf in die Schutzzone.
Minimum clear space: the height of the Pixel Heart on all sides. No element may enter the clear space.
Don'ts
- ✕
Das Pixel Heart nie strecken, drehen oder verzerren
Never stretch, rotate or distort the Pixel Heart
- ✕
Nie andere Farben als die Gradient-DNA verwenden
Never use colors other than the Gradient DNA
- ✕
Nie auf unruhigem oder buntem Hintergrund platzieren
Never place on busy or colorful backgrounds
- ✕
Nie mit Schatten, Outlines oder 3D-Effekten versehen
Never add shadows, outlines or 3D effects
- ✕
Die Wortmarke nie in Kleinbuchstaben schreiben
Never write the wordmark in lowercase
- ✕
Mindestgrösse des Pixel Heart: 16px
Minimum Pixel Heart size: 16px
Farbsystem / Color System
90 % dunkel. 10 % Neon. Die Farben sind kein Zufall — sie sind das System.
Gradient DNA
Die visuelle DNA von BRANDFUSION. Dieser Gradient läuft durch alles — Pixel Heart, Divider, Primary CTA, Headline-Highlights.
The visual DNA of BRANDFUSION. This gradient runs through everything — Pixel Heart, dividers, primary CTA, headline highlights.
Surfaces
Dunkle Basis mit violettem Unterton. Drei Ebenen für Tiefe.
Dark base with violet undertone. Three layers for depth.
Base
#0a0a0f
Surface 1
#111118
Surface 2
#181824
Neon Palette
Die Gradient-DNA: Orange → Rot → Violett. Plus Akzente in Blau und Cyan.
The Gradient DNA: Orange → Red → Violet. Plus accents in blue and cyan.
Neon Orange
#ff6d3a
Neon Pink
#f2203e
Neon Violet
#9b27d6
Neon Blue
#536dfe
Neon Cyan
#00e5ff
Text
Drei Stufen für Hierarchie. WCAG AA konform auf dunklem Grund.
Three tiers for hierarchy. WCAG AA compliant on dark backgrounds.
Primary
#eaeaf2
Secondary
#9595b0
Muted
#7a7a96
90/10-Regel / 90/10 Rule
90 % der Fläche: neutrale, dunkle Töne. 10 % Neon-Energie. Maximal 1–2 aktive Neon-Zonen pro Viewport.
90% of the surface: neutral, dark tones. 10% neon energy. Maximum 1–2 active neon zones per viewport.
Typografie / Typography
Vier Schriften. Jede mit klarer Rolle. Keine Ausnahmen.
BRANDFUSION
Für die grosse Bühne. Hero-Headlines, Seitentitel, Statements.
For the big stage. Hero headlines, page titles, statements.
Gutes Design ist kein Zufall.
Für Struktur und Autorität. Sektionsüberschriften, Card-Titel.
For structure and authority. Section headings, card titles.
Von der Strategie bis zum Launch — alles aus einer Hand.
Unser Arbeitstier. Fliesstexte, Beschreibungen, Navigation.
Our workhorse. Body text, descriptions, navigation.
--color-accent: #ff6d3a;
Für technische Inhalte. Code-Snippets, Token-Namen, Labels.
For technical content. Code snippets, token names, labels.
Font Stacks
--font-display: Bungee, Impact, sans-serif
--font-serif: Roboto Slab, Georgia, serif
--font-sans: Ubuntu, Inter, system-ui, sans-serif
--font-mono: JetBrains Mono, Fira Code, monospace
Designprinzipien / Design Principles
Neon Minimalism. Nicht laut, nicht leise — kontrollierte Energie auf dunklem Grund.
Neon Minimalism. Not loud, not quiet — controlled energy on a dark canvas.
Dunkel zuerst
Dark first
Die dunkle Basis ist kein Afterthought — sie ist das Fundament. Der violette Unterton gibt jedem Screen Tiefe und Charakter.
The dark base is not an afterthought — it is the foundation. The violet undertone gives every screen depth and character.
90/10-Regel
90/10 Rule
90 % neutrale, dunkle Flächen. 10 % Neon-Energie. Maximal 1–2 aktive Neon-Zonen pro Viewport. Nie überladen.
90% neutral, dark surfaces. 10% neon energy. Maximum 1–2 active neon zones per viewport. Never overwhelming.
Kontrollierter Glow
Controlled Glow
Glow-Effekte nur auf Hover-States und dem primären CTA. Nie permanent, nie dekorativ. Die Energie muss verdient werden.
Glow effects only on hover states and the primary CTA. Never permanent, never decorative. Energy must be earned.
Gradient DNA
Gradient DNA
Orange → Rot → Violett. Dieser Gradient ist unsere visuelle Signatur. Er läuft durch alles: Pixel Heart, Divider, CTAs, Headlines.
Orange → Red → Violet. This gradient is our visual signature. It runs through everything: Pixel Heart, dividers, CTAs, headlines.
Kein Rauschen
No Noise
Jedes Element hat einen Zweck. Kein Dekoration um der Dekoration willen. Subtile Film-Grain-Textur für Premium-Feeling — das wars.
Every element serves a purpose. No decoration for the sake of decoration. Subtle film grain texture for premium feel — that is it.
Brand Voice / Kurzfassung
Die Stimme in drei Sätzen: Direkt, selbstbewusst, ergebnisorientiert. Keine Floskeln. Immer Du.
01
Ton
Provokant, bold, direkt. Keine weichen Floskeln, kein Corporate-Sprech.
Provocative, bold, direct. No soft phrases, no corporate speak.
02
Struktur
Kurze Sätze. Kontraste. Erst die Aussage, dann der Twist.
Short sentences. Contrasts. Statement first, then the twist.
03
Beispiel
«Gutes Design ist kein Zufall. Wachstum auch nicht.»
"Good design is no accident. Neither is growth."
Weiterführend / Further Reading
Sprache
Brand Voice
Tonalität, Wording, Headlines, CTAs, Schreibweisen.
Tone, wording, headlines, CTAs, spelling conventions.
Komponenten
Styleguide
Buttons, Cards, Chips, Icons, Utilities und alle UI-Tokens.
Buttons, cards, chips, icons, utilities and all UI tokens.
Praxis
Cases
So sieht die Marke in der Anwendung aus. Echte Projekte.
The brand in action. Real projects.
Fragen zur Marke?
Dieses Manual ist verbindlich. Wenn du unsicher bist, frag nach — bevor du improvisierst.
This manual is binding. When in doubt, ask — before you improvise.