# Yannik Hauser Design System

> Persönliches Markensystem von Yannik Hauser (KI und Entrepreneurship, Podcast "Want to be Entrepreneurs"). Ink-first: Fläche #06070e, Papier #f7f5fb, Verlauf #3b3486 → #9a4fc7 → #c42a86. Schriften Cormorant Garamond (Display), Space Grotesk (UI), IBM Plex Mono (Code). Signalakzente swissAI-Pink #ec0868 und atrete-Lime #deff26, nie über rund 30 Prozent eines Elements.

Für Agenten: lies zuerst design-system.md (vollständiger Leitfaden), dann die Tokens. Alle Dateien sind roh als Text abrufbar. Schriften und Bilder werden mit relativen Pfaden zu dieser Domain ausgeliefert.

## Leitfaden

- [design-system.md](https://design-system.yannik-hauser.com/design-system.md): Vollständiger Leitfaden mit Token-Frontmatter (YAML). Hier anfangen.
- [readme.md](https://design-system.yannik-hauser.com/readme.md): Überblick: Inhaltsregeln, visuelle Grundlagen, Ikonografie, Index, E-Mail-Regeln, bekannte Lücken.

## Tokens (CSS Custom Properties)

- [styles.css](https://design-system.yannik-hauser.com/styles.css): Einstieg, importiert alle Token-Dateien.
- [tokens/colors.css](https://design-system.yannik-hauser.com/tokens/colors.css): Farben, Verlauf, Signalakzente.
- [tokens/typography.css](https://design-system.yannik-hauser.com/tokens/typography.css): Schriftfamilien, Grössen, Zeilenhöhen.
- [tokens/spacing.css](https://design-system.yannik-hauser.com/tokens/spacing.css): Abstände, Radien, Elevation, Icon-Raster.
- [tokens/fonts.css](https://design-system.yannik-hauser.com/tokens/fonts.css): @font-face für die lokal gehosteten Schriften.

## Komponenten (Nutzungshinweise, JSX und Typen liegen daneben)

- [components/brand/AuthorPill.prompt.md](https://design-system.yannik-hauser.com/components/brand/AuthorPill.prompt.md): Komponente AuthorPill: Verwendung und Props.
- [components/brand/Eyebrow.prompt.md](https://design-system.yannik-hauser.com/components/brand/Eyebrow.prompt.md): Komponente Eyebrow: Verwendung und Props.
- [components/brand/MonogramTile.prompt.md](https://design-system.yannik-hauser.com/components/brand/MonogramTile.prompt.md): Komponente MonogramTile: Verwendung und Props.
- [components/brand/PortraitRing.prompt.md](https://design-system.yannik-hauser.com/components/brand/PortraitRing.prompt.md): Komponente PortraitRing: Verwendung und Props.
- [components/brand/SectionHeader.prompt.md](https://design-system.yannik-hauser.com/components/brand/SectionHeader.prompt.md): Komponente SectionHeader: Verwendung und Props.
- [components/brand/Signature.prompt.md](https://design-system.yannik-hauser.com/components/brand/Signature.prompt.md): Komponente Signature: Verwendung und Props.
- [components/core/Button.prompt.md](https://design-system.yannik-hauser.com/components/core/Button.prompt.md): Komponente Button: Verwendung und Props.
- [components/core/Card.prompt.md](https://design-system.yannik-hauser.com/components/core/Card.prompt.md): Komponente Card: Verwendung und Props.
- [components/core/CheckItem.prompt.md](https://design-system.yannik-hauser.com/components/core/CheckItem.prompt.md): Komponente CheckItem: Verwendung und Props.
- [components/core/Icon.prompt.md](https://design-system.yannik-hauser.com/components/core/Icon.prompt.md): Komponente Icon: Verwendung und Props.
- [components/core/Input.prompt.md](https://design-system.yannik-hauser.com/components/core/Input.prompt.md): Komponente Input: Verwendung und Props.
- [components/core/Pill.prompt.md](https://design-system.yannik-hauser.com/components/core/Pill.prompt.md): Komponente Pill: Verwendung und Props.
- [components/core/SparkIcon.prompt.md](https://design-system.yannik-hauser.com/components/core/SparkIcon.prompt.md): Komponente SparkIcon: Verwendung und Props.
- [components/diagram/BarStack.prompt.md](https://design-system.yannik-hauser.com/components/diagram/BarStack.prompt.md): Komponente BarStack: Verwendung und Props.
- [components/diagram/Connector.prompt.md](https://design-system.yannik-hauser.com/components/diagram/Connector.prompt.md): Komponente Connector: Verwendung und Props.
- [components/diagram/WorkspaceBox.prompt.md](https://design-system.yannik-hauser.com/components/diagram/WorkspaceBox.prompt.md): Komponente WorkspaceBox: Verwendung und Props.

## Weitere Regeln

- [assets/swissai-labels/nutzungsrichtlinien.md](https://design-system.yannik-hauser.com/assets/swissai-labels/nutzungsrichtlinien.md): Nutzungsrichtlinien für die swissAI-Labels.

## Visuelle Referenz (HTML)

- [Gradient](https://design-system.yannik-hauser.com/guidelines/color-gradient.card.html): Colors, The signature indigo→violet→magenta wash
- [Signal accents](https://design-system.yannik-hauser.com/guidelines/color-signal.card.html): Colors, swissAI pink & atrete lime — ≤30% of one element, never co-equal
- [Ink & Paper](https://design-system.yannik-hauser.com/guidelines/color-surfaces.card.html): Colors, The two floors: near-black ink and violet-tinted paper
- [Text & hairlines](https://design-system.yannik-hauser.com/guidelines/color-text.card.html): Colors, Paper text ramp and border tones
- [Display — Cormorant](https://design-system.yannik-hauser.com/guidelines/type-display.card.html): Type, Editorial display & the podcast wordmark
- [Mono — IBM Plex Mono](https://design-system.yannik-hauser.com/guidelines/type-mono.card.html): Type, Tokens, hex, filenames, code only
- [UI & body — Space Grotesk](https://design-system.yannik-hauser.com/guidelines/type-ui.card.html): Type, Titles, body and the tracked eyebrow
- [Radius](https://design-system.yannik-hauser.com/guidelines/shape-radius.card.html): Spacing, 8 · 10 · 14 · 18 · 22 · full — nothing is square but the grid
- [Spacing](https://design-system.yannik-hauser.com/guidelines/spacing.card.html): Spacing, 4px base · Sektionen 64px · Karten-Innenraum 20–24px · Content 1280px
- [Elevation — glow not shadow](https://design-system.yannik-hauser.com/guidelines/brand-elevation.card.html): Brand, Radial light on ink; soft shimmer on paper
- [Context & tool logos](https://design-system.yannik-hauser.com/guidelines/brand-logos.card.html): Brand, atrete, swissAI and the AI tools in the workflow
- [Signature & Monogram](https://design-system.yannik-hauser.com/guidelines/brand-marks.card.html): Brand, The personal sign-off marks (raster assets)
- [E-Mail-Signatur](https://design-system.yannik-hauser.com/guidelines/email-signature.card.html): Brand, 600px Footer in Tabellen: Verlaufsleiste, Namenszug, Portrait, Monogramm, Plattform-Links
- [Icon set](https://design-system.yannik-hauser.com/guidelines/icon-set.card.html): Brand, Outline, 1.75px stroke, round caps, 24px grid
- [Icons — active state](https://design-system.yannik-hauser.com/guidelines/icon-signal.card.html): Brand, Up to ~30% signal fill marks an icon as active
- [Bildsprache](https://design-system.yannik-hauser.com/guidelines/image-language.card.html): Brand, Drei Bildtypen: s/w-Porträt mit Glow · Linien-Mesh · flaches Diagramm
- [Podcast-Cover](https://design-system.yannik-hauser.com/guidelines/podcast-cover.card.html): Brand, Der Ursprung der Marke: Ink, Verlauf-Licht, Cormorant-Wortmarke
- [Porträt-Behandlung](https://design-system.yannik-hauser.com/guidelines/portrait-treatment.card.html): Brand, Original → s/w + Violett-Ring: wechselnde Gäste, eine Serie
- [swissAI Label rules](https://design-system.yannik-hauser.com/guidelines/swissai-labels-rules.card.html): Brand, Variant order, protected space, minimum sizes, what is not allowed
- [swissAI Labels](https://design-system.yannik-hauser.com/guidelines/swissai-labels.card.html): Brand, Member, AI Expert and Member · Engagement — light and dark, on paper and ink
- [Do & Don't](https://design-system.yannik-hauser.com/guidelines/usage-do-dont.card.html): Brand, Die fünf Regeln, die jede Fläche tragen
- [Brand](https://design-system.yannik-hauser.com/components/brand/brand.card.html): Components, Monogram, signature, byline, portrait ring, eyebrow, section header
- [Core](https://design-system.yannik-hauser.com/components/core/core.card.html): Components, Buttons, pills, icons, cards, checklist rows, inputs
- [Diagram](https://design-system.yannik-hauser.com/components/diagram/diagram.card.html): Components, Workspace boxes, connectors, placeholder bars
- [Template: Email-Signatur](https://design-system.yannik-hauser.com/templates/email-signatur/Email-Signatur.html): 
- [Template: E-Mail-Signatur](https://design-system.yannik-hauser.com/templates/email-signatur/EmailSignatur.dc.html): 600px E-Mail-Footer in Tabellen gebaut: Verlaufsleiste, Namenszug, Portrait, Monogramm, Kontaktzeilen, Plattform-Links, Podcast-Karte — DE + EN, ink + paper.
- [Template: LinkedIn Checkliste](https://design-system.yannik-hauser.com/templates/linkedin-checkliste/Checkliste.dc.html): 1080 × 1350 Checklisten-Frame: Icon-Header, 2×2 Phasen-Raster mit Checkbox-Reihen, Prompt-Chips, Footer — dunkel und hell.
- [Template: LinkedIn Info-Sheet](https://design-system.yannik-hauser.com/templates/linkedin-info-sheet/InfoSheet.dc.html): 1080 × 1350 Info-Sheet: Byline, Cormorant-Titel, Zwei-Spalten-Vergleich, 6er-Raster, Schluss-Zitat, Footer — dunkel und hell.
- [Template: LinkedIn Workflow-Post](https://design-system.yannik-hauser.com/templates/linkedin-post/LinkedinPost.dc.html): 1080 × 1080 Post-Frame: Cormorant-Titel, verschachtelte Workspace-Boxen, Verlauf-Review-Buttons, Footer-Band — dunkel und hell.
- [Template: YouTube-Background](https://design-system.yannik-hauser.com/templates/youtube-background/YoutubeBackground.dc.html): 16:9 Talking-Head-Bühne: Slat-Wall im Marken-Wash, Tool-Chip, Lower-Third mit Monogramm und Signatur.

Stand: 2026-10-09