Yannik Hauser Design System

Für Agenten

Einstieg: https://design-system.yannik-hauser.com/llms.txt. Alle Dateien unten sind roh als Text abrufbar.

design-system.mdVollständiger Leitfaden mit Token-Frontmatter (YAML). Hier anfangen.
readme.mdÜberblick: Inhaltsregeln, visuelle Grundlagen, Ikonografie, Index, E-Mail-Regeln, bekannte Lücken.
styles.cssEinstieg, importiert alle Token-Dateien.
tokens/colors.cssFarben, Verlauf, Signalakzente.
tokens/typography.cssSchriftfamilien, Grössen, Zeilenhöhen.
tokens/spacing.cssAbstände, Radien, Elevation, Icon-Raster.
tokens/fonts.css@font-face für die lokal gehosteten Schriften.
components/brand/AuthorPill.prompt.mdKomponente AuthorPill: Verwendung und Props.
components/brand/Eyebrow.prompt.mdKomponente Eyebrow: Verwendung und Props.
components/brand/MonogramTile.prompt.mdKomponente MonogramTile: Verwendung und Props.
components/brand/PortraitRing.prompt.mdKomponente PortraitRing: Verwendung und Props.
components/brand/SectionHeader.prompt.mdKomponente SectionHeader: Verwendung und Props.
components/brand/Signature.prompt.mdKomponente Signature: Verwendung und Props.
components/core/Button.prompt.mdKomponente Button: Verwendung und Props.
components/core/Card.prompt.mdKomponente Card: Verwendung und Props.
components/core/CheckItem.prompt.mdKomponente CheckItem: Verwendung und Props.
components/core/Icon.prompt.mdKomponente Icon: Verwendung und Props.
components/core/Input.prompt.mdKomponente Input: Verwendung und Props.
components/core/Pill.prompt.mdKomponente Pill: Verwendung und Props.
components/core/SparkIcon.prompt.mdKomponente SparkIcon: Verwendung und Props.
components/diagram/BarStack.prompt.mdKomponente BarStack: Verwendung und Props.
components/diagram/Connector.prompt.mdKomponente Connector: Verwendung und Props.
components/diagram/WorkspaceBox.prompt.mdKomponente WorkspaceBox: Verwendung und Props.
assets/swissai-labels/nutzungsrichtlinien.mdNutzungsrichtlinien für die swissAI-Labels.

Colors

GradientThe signature indigo→violet→magenta wash

Signal accentsswissAI pink & atrete lime — ≤30% of one element, never co-equal

Ink & PaperThe two floors: near-black ink and violet-tinted paper

Text & hairlinesPaper text ramp and border tones

Type

Display — CormorantEditorial display & the podcast wordmark

Mono — IBM Plex MonoTokens, hex, filenames, code only

UI & body — Space GroteskTitles, body and the tracked eyebrow

Spacing

Radius8 · 10 · 14 · 18 · 22 · full — nothing is square but the grid

Spacing4px base · Sektionen 64px · Karten-Innenraum 20–24px · Content 1280px

Brand

Elevation — glow not shadowRadial light on ink; soft shimmer on paper

Context & tool logosatrete, swissAI and the AI tools in the workflow

Signature & MonogramThe personal sign-off marks (raster assets)

E-Mail-Signatur600px Footer in Tabellen: Verlaufsleiste, Namenszug, Portrait, Monogramm, Plattform-Links

Icon setOutline, 1.75px stroke, round caps, 24px grid

Icons — active stateUp to ~30% signal fill marks an icon as active

BildspracheDrei Bildtypen: s/w-Porträt mit Glow · Linien-Mesh · flaches Diagramm

Podcast-CoverDer Ursprung der Marke: Ink, Verlauf-Licht, Cormorant-Wortmarke

Porträt-BehandlungOriginal → s/w + Violett-Ring: wechselnde Gäste, eine Serie

swissAI Label rulesVariant order, protected space, minimum sizes, what is not allowed

swissAI LabelsMember, AI Expert and Member · Engagement — light and dark, on paper and ink

Do & Don'tDie fünf Regeln, die jede Fläche tragen

Components

BrandMonogram, signature, byline, portrait ring, eyebrow, section header

CoreButtons, pills, icons, cards, checklist rows, inputs

DiagramWorkspace boxes, connectors, placeholder bars

Templates

Email-Signatur
E-Mail-Signatur600px E-Mail-Footer in Tabellen gebaut: Verlaufsleiste, Namenszug, Portrait, Monogramm, Kontaktzeilen, Plattform-Links, Podcast-Karte — DE + EN, ink + paper.
LinkedIn Checkliste1080 × 1350 Checklisten-Frame: Icon-Header, 2×2 Phasen-Raster mit Checkbox-Reihen, Prompt-Chips, Footer — dunkel und hell.
LinkedIn Info-Sheet1080 × 1350 Info-Sheet: Byline, Cormorant-Titel, Zwei-Spalten-Vergleich, 6er-Raster, Schluss-Zitat, Footer — dunkel und hell.
LinkedIn Workflow-Post1080 × 1080 Post-Frame: Cormorant-Titel, verschachtelte Workspace-Boxen, Verlauf-Review-Buttons, Footer-Band — dunkel und hell.
YouTube-Background16:9 Talking-Head-Bühne: Slat-Wall im Marken-Wash, Tool-Chip, Lower-Third mit Monogramm und Signatur.