# Yannik Hauser — Personal Brand Design System The personal brand of **Yannik Hauser**: an editorial, ink-first identity for content about AI and entrepreneurship. **Want to be Entrepreneurs** (the podcast) is one part of it, not the whole — the system also carries LinkedIn posts, info-sheets and checklists, the YouTube talking-head stage, decks and documents. Two professional contexts appear as *signal accents only*: **atrete** (Yannik's consulting context, lime) and **swissAI** (pink). They are never allowed to take over his own identity. ## Sources Everything here was derived from Yannik's ideation project (Claude design project `c38d2d25-4ec5-452a-b814-2e9547dc3d68`, "Brand Exploration"): - `Brand Exploration v4` — the 18-section brand doc; the **baseline** for every token, component and surface in this system. - `design-system-CLAUDE.md` — the written guideline with token frontmatter (kept here as `guidelines/design-system-CLAUDE.md`). - `LinkedIn Info-Sheet` and `LinkedIn Checkliste` design components — ported verbatim into `templates/`. - Real assets: portrait, handwritten signature (white/ink), YH monogram (white/ink), podcast covers, atrete and swissAI logos, AI tool logos, YouTube reference. - `assets/swissai-label-ai-expert-siegel.svg` — Yanniks swissAI **AI Expert** label (round, light variant). Official credential asset, never recoloured or redrawn. Used as a footer sign-off next to the handwritten signature. There is **no external Figma file and no codebase** — the brand originated in that design project. ## Content fundamentals - **Language:** German, informal **du** ("bevor du delegierst", "wenn du fragst"). English only for the recurring taglines: *Explore. Build. Share.* / *Exploring. Building. Sharing*. - **Voice:** editorial and declarative. Short serif statements carry the point ("Erst die Antwort. Dann der Prozess.", "Ein System, kein Moodboard."); the body copy explains plainly. No hype, no exclamation marks, no metadiscourse. - **Person:** "du" to the reader, "ich" for Yannik's own practice ("I stay in the loop", "I approve / I correct"). - **Casing:** sentence case for headlines and body. UPPERCASE only for the tracked eyebrow, column kickers ("ASSISTENT", "AGENT"), and small labels ("GUT FÜR", "CONTEXT", "SKILLS", "REVIEW"). - **Structure:** numbered signposts — sections (`01 — Overview`, `13 — Persönliches Logo`), checklist questions (`1 · Wer startet?`), phases. The middle dot `·` separates meta fragments; the em dash carries the pivot in a headline. - **Emoji:** never. The 4-Point Spark is the only decorative glyph; `✓` and `✕` appear in Do/Don't lists only. - **Highlighting:** one or two key words inside a serif headline get colour (violet = concept A, magenta = concept B). Never colour a whole sentence, never body text. - **Sign-off:** the handwritten signature, the tagline, or both. ## Visual foundations **Floors.** Near-black **ink** `#06070e` is the home surface; **paper** `#f7f5fb` is the documented light variant; `#e9e6f0` (mist) is the desk the frames sit on. Every template ships dark **and** light. **The gradient** `#3b3486 → #9a4fc7 → #c42a86` is the identity: 135° on CTAs, 140° three-stop on the monogram tile, 150–155° on cards, 90° on the footer band. One gradient per surface — never gradients stacked on gradients. **Signal accents.** swissAI pink `#ec0868` (plus `#ed0022` loud, `#ff7bc2` on ink) and atrete lime `#deff26` (on `#073a2d`). Max ~30% of a single element, one leading signal per view, never both equally loud. **Type.** Cormorant Garamond (display, 500–700, italic for quotes and the "Exploring. Building. Sharing" tagline) · Space Grotesk (all UI, labels, body, 400–700) · IBM Plex Mono (tokens, hex, filenames, code). Display runs tight: line-height 1.0–1.05, tracking −0.01em. The eyebrow is 12px/700, uppercase, tracked 0.2em. **Spacing & layout.** 4px base (4·8·12·16·24·32·48·64). Sections breathe at 64px, page padding 72px, social frames 56–68px inner padding, card padding 20–24px, dense rows 12px. Content width 1280px. Social artboards are fixed: 1080×1350 (LinkedIn 4:5), 1080×1080 (post), 1:1 (cover), 16:9 (YouTube). **Corners.** 8 / 10 / 14 / 18 / 22px, monogram tile 30px, pills and portraits fully round. Nothing is square except the layout grid. **Elevation is light, not shadow.** `elevation.flat` (hairline only) covers ~95% of surfaces. `elevation.card` is a single soft `0 8px 24px rgba(20,18,31,.10)` float. `elevation.glow` is the signature: a radial magenta+violet wash on ink; `glow-light` is its paper version. The only literal coloured shadow is the lift under the gradient tile and CTA (`0 14px 40px rgba(91,75,208,.35)`). No neutral-grey shadow tiers. **Cards.** Paper = white, 1px `#e6e1f2` hairline, 14–16px radius, no shadow. Dark = `#12121f` with a `#23223a` hairline. Ink = `#06070e` with the glow wash, 22px. Gradient = the payoff card, one per view. **Backgrounds.** Flat ink or paper plus radial washes. No textures, no photographic full-bleeds except the podcast covers. The YouTube stage uses an ink slat-wall (`repeating-linear-gradient`, 16px/6px) over the brand wash. **Imagery.** Three types only: (1) people — desaturated black-and-white with one gradient glow over it; (2) abstract — fine line mesh on ink; (3) diagrams — flat, card-based, lots of white. Portraits are circular with a violet ring: grayscale on covers, colour and face-zoomed in bylines. No colour stock photography. **Diagrams.** Rounded cards connected by thin violet arrows, dashed nested workspace boxes with notch labels, pill chips for state, placeholder bars for copy. Pink marks the active/human step; lime highlights a single detail. **Transparency & blur.** Used sparingly and only on ink: `rgba(255,255,255,0.04–0.09)` fills with `0.09–0.12` borders for cards inside a frame; a blurred radial halo (14px blur) behind a payoff card. No frosted-glass panels, no backdrop blur over photography. **Interaction.** The system is content-artifact-first, so motion and states are deliberately thin: no animation system is defined; where a UI needs states, use opacity 0.9 on hover for gradient surfaces, the violet `#5b4bd0` for links (`#9a4fc7` on hover), the 2px ink border for focus (see `Input`), and no press-shrink. Anything richer should be decided with Yannik, not invented here. ## Iconography - **Style:** outline only — 1.75px stroke, round caps and joins, 24px grid (drawn on a 34×34 box), ink `#14121f` on paper, white or lilac `#d9b8ff` on ink. - **The set is hand-authored, not a third-party library.** It lives in `components/core/Icon.jsx`: spark, network, layers, target, play, brackets, check, clock, image, save, arrow. Use it instead of Lucide/Heroicons so stroke weight stays consistent — if a glyph is missing, draw it on the same grid. - **The 4-Point Spark** is the signature glyph (`SparkIcon`) — swissAI's star logic and atrete's geometry combined. It is the one icon that may be fully signal-coloured (lime by default, magenta on the monogram tile). - **Active state:** up to ~30% signal fill on one detail — a node, a centre, half the spark. Never a fully filled icon in a signal colour. - **Emoji and unicode symbols are not icons.** `✓` / `✕` appear only in Do/Don't lists; `·` is a separator, not a bullet. - **Third-party logos** (`assets/`): `atrete-white.png`, `atrete-yellow.png`, `logo-swissai.png`, `logo-claude.png`, `logo-chatgpt.png`, `logo-gemini.png` — always in their original colours, on a white/light card, with air around them, never pulled into the gradient. - **Brand marks:** `mono-white.png` / `mono-ink.png` (YH monogram) and `sign-white.png` / `sign-ink.png` (handwritten signature). Raster PNGs, freed to transparency. Never recoloured, skewed, or replaced with a cursive webfont. ## Index - `styles.css` — global entry; link this one file. Imports `tokens/colors.css`, `tokens/typography.css`, `tokens/spacing.css` (spacing + radius + elevation + icon grid). - `components/core/` — **Button, Pill, Icon, SparkIcon, Card, CheckItem, Input** - `components/brand/` — **Eyebrow, SectionHeader, MonogramTile, Signature, AuthorPill, PortraitRing** - `components/diagram/` — **WorkspaceBox, Connector, BarStack** - `templates/` — `linkedin-info-sheet/` (1080×1350 info-sheet), `linkedin-checkliste/` (1080×1350 checklist), `linkedin-post/` (1080×1080 workflow post), `youtube-background/` (16:9 stage), `email-signatur/` (600px E-Mail-Footer, DE + EN, ink + paper — `Email-Signatur.html` ist die kopierfertige Datei). Each ships dark + light and loads the system through its own `ds-base.js`. - `guidelines/` — foundation specimen cards (Colors, Type, Spacing, Brand) plus `design-system-CLAUDE.md`, the original written guideline. - `assets/` — portrait, signature and monogram marks, podcast covers, atrete/swissAI/tool logos, platform icons (LinkedIn, Spotify, Apple Podcasts), YouTube reference. ## E-Mail Der Footer ist die einzige Fläche mit eigenen Regeln, weil E-Mail-Clients kein modernes CSS können: - **Keine Webfonts.** Georgia ersetzt Cormorant Garamond, Arial ersetzt Space Grotesk. - **Tabellen-Layout**, jeder Stil inline; der `