Corporate Design
Manual
Sergeant AG — Brand Guidelines v2 — März 2026
1. Logo
Das Sergeant Wortlogo ist der zentrale Markenidentifikator. Es wird immer als eigenständiges Element eingesetzt, nie in Kombination mit Icons oder anderen grafischen Elementen. Es existiert ausschliesslich in Schwarz (auf hellem Hintergrund) und Weiss (auf dunklem Hintergrund) — keine farbigen Varianten.
Dateiformat
SVG (Vektordatei). Zwei Varianten: Schwarz auf Hell, Weiss auf Dunkel.
Einsatz in Präsentationen
Das Logo erscheint nur auf der Titelfolie und der Schlussfolie. Auf allen anderen Slides wird kein Logo angezeigt.
- Logo nicht verzerren, rotieren oder in andere Farben einfärben
- Nur Schwarz oder Weiss — keine farbigen Logo-Varianten
- Mindestens 50% der Logohöhe als Schutzzone rundherum freihalten
- Auf dunklem Hintergrund immer die weisse Variante verwenden
- Logo nie auf unruhige Hintergründe oder Fotos setzen
- In Präsentationen nur auf Titel- und Schlussfolie
2. Farben
Markenfarben
Neutrals
Department-Farben
Department-Farben (Light)
System-Farben
3. Typografie
Die Hausschrift ist DM Sans (Google Fonts). Sie wird in allen digitalen Medien, Präsentationen und Dokumenten eingesetzt. Big Type ist das Credo — Headlines dürfen und sollen gross sein.
Schriftschnitte
4. Spacing
Spacing basiert auf einem 4px-Raster. Alle Abstände sind Vielfache von 4.
5. Dark-First Theme
Seit v2 (März 2026) ist Dunkel der Standard. Alle Slides und prominente Website-Sektionen starten auf dunklem Hintergrund #1e1e1e. Texte in Weiss, Sekundärtexte in rgba(255,255,255,0.5).
neue Default.
Wann dunkel, wann hell?
Dunkel (Default)
Cover, Section-Divider, End Slides, Impact Statements, Stat Slides, Gradient Slides, Journal/Blog-Sektionen
Hell (Opt-in)
Detaillierte Tabellen, lange Textpassagen, komplexe Diagramme, Approach-Sektionen mit Department-Tabs
6. Purple Gradient
Der Purple Gradient wird für Key Moments eingesetzt — die wichtigsten Aussagen, Abschluss-Slides oder besondere Hervorhebungen. Sparsam verwenden, damit die Wirkung erhalten bleibt.
Presentations.
#1e1e1e → #2a1a4e → #3d2480 → #754cff7. Komponenten
Tags (eckig, gefüllter Hintergrund)
Für Präsentationen auf hellen Slides. Dezenter Hintergrund mit farbigem Text.
Outline Tags (rund, Border-Only)
Primärer Style auf der Website und für dunkle Slides. Farbige Border + Text, kein gefüllter Hintergrund. Department-Tags tragen ihre jeweilige Farbe.
Pill Tags (rund, gefüllter Hintergrund)
Für Präsentationen auf dunklen Slides. Dezenter farbiger Hintergrund auf dunklem Kontext.
Cards (helle Slides)
Strategy Accent
Karte mit gelbgrünem Akzentstreifen links.
Creativity Accent
Karte mit gelbem Akzentstreifen links.
Red Accent
Karte mit rotem Akzentstreifen links.
Glass Cards (dunkle Slides)
Glassmorphism-Karten mit Blur-Effekt. Für Feature-Übersichten, Vergleiche und Content auf dunklem Hintergrund. Wie auf der Website für Journal-Artikel-Karten.
Standard Glass
Subtle Transparenz mit softem Border.
Purple Accent
Glass Card mit Purple Border Glow.
Technology Accent
Blue Border für technische Features.
Bento Grid
Apple-Style Feature Grid mit flexiblen Zellen. Glass Cards in 2×2 oder 3×2 Raster. Einzelne Zellen können mit span-2 oder span-row-2 vergrössert werden.
Feature Highlight
Grosse Zelle über 2 Spalten für die Hauptaussage.
80px
Cover Headlines
Standard Zelle
1×1 Grid-Zelle.
Technology
Blue accent border.
Feature
Weitere Zelle.
Buttons
Pill-Form (full border-radius). Primärer Button ist schwarz, wie auf der Website.
Tabellen
| Spalte 1 | Spalte 2 | Spalte 3 |
|---|---|---|
| Zeile 1 | Inhalt | Inhalt |
| Zeile 2 | Inhalt | Inhalt |
| Zeile 3 | Inhalt | Inhalt |
Border Radius
8. Slide-Typen (Präsentationen)
Übersicht aller verfügbaren Slide-Typen in Reveal.js und Marp.
| Typ | Hintergrund | Einsatz | Headline |
|---|---|---|---|
| cover | Dunkel | Titelfolie mit Logo | 80px (6XL) |
| section | Dunkel | Kapitel-Divider mit Nummer | 50px (3XL) |
| impact | Dunkel | Oversized Statement, eine Aussage | 120px (7XL) |
| stat | Dunkel | Eine grosse Zahl pro Slide | 160px (8XL) |
| gradient | Purple Gradient | Key Moments, Abschluss | 80px (6XL) |
| bento | Dunkel | Apple-Style Feature Grid | 40px (2XL) |
| content | Dunkel (Default) | Headline + Bullets/Text | 60px (4XL) |
| light | Weiss | Tabellen, Text-heavy Inhalte | 60px (4XL) |
| thanks | Dunkel | Abschlussfolie, zentriert | 50px (3XL) |
9. Accessibility
Kontrast (WCAG 2.1 AA)
Alle Text-Hintergrund-Kombinationen müssen die WCAG 2.1 AA Mindestkontraste erfüllen:
| Element | Anforderung | Ratio |
|---|---|---|
| Normaler Text (<24px) | AA normal | ≥ 4.5 : 1 |
| Grosser Text (≥24px oder ≥18.66px bold) | AA large | ≥ 3 : 1 |
| UI-Elemente (Icons, Borders) | AA non-text | ≥ 3 : 1 |
Auf dunklem Hintergrund (#1e1e1e) muss gedämpfter Text mindestens rgba(255,255,255,0.5) verwenden. --sgt-grey (#767676) erreicht 4.54:1 auf Weiss — das Minimum für normalen AA-Text.
Zeilenabstand
Der Mindest-Zeilenabstand beträgt 1.25 (line-height / font-size). Ausnahme: einzeilige Display-Elemente wie Stat-Zahlen dürfen line-height: 1 verwenden, wenn sie als rein dekorative Grosstext-Elemente eingesetzt werden.
| Kontext | Minimum | Empfohlen |
|---|---|---|
| Body / Paragraphs | 1.25 | 1.4 – 1.6 |
| Headlines | 1.25 | 1.25 |
| Display / Stat Numbers | 1.0 | 1.0 |
10. Anwendung
Website
Die Website (new.sergeant.agency) ist die primäre Referenz für das Design System. Sie nutzt Dark-First für Hero- und Journal-Sektionen, Outline Tags mit Department-Farben, massive Headlines und Pill-Buttons.
Präsentationen
Zwei Systeme verfügbar: Marp CLI (Markdown → PDF, bevorzugt) und Reveal.js (HTML, interaktiv). Beide nutzen dasselbe Design System mit identischen Tokens und Farben. Auflösung: 1280×720.
Do's
- DM Sans als einzige Schrift verwenden
- Farben nur aus der definierten Palette
- Genügend Whitespace — weniger ist mehr
- Big Type — Headlines dürfen gross sein
- Dunkel als Default, Hell nur wenn nötig
- Konsistente Spacing-Werte (4px-Raster)
- Outline Tags für Department-Kategorien auf der Website
- Zeilenabstand mindestens 1.25 (Ausnahme: Stat-Zahlen)
- WCAG AA Kontrast einhalten (siehe Kapitel 9)
Don'ts
- Keine anderen Schriften (Inter, Helvetica, etc.)
- Keine Farben ausserhalb der Palette
- Logo nicht als Text setzen — immer SVG verwenden
- Keine Schriftgrössen unter 18px für Content (14px nur für Seitenzahlen)
- Kein reines Schwarz (#000000) — immer #1e1e1e verwenden
- Kein Text unter rgba 0.5 Opacity auf dunklem Hintergrund
- Kein Zeilenabstand unter 1.25 (ausser Display-Zahlen)