---
version: alpha
name: want-to-be-entrepreneurs-brand-system
description: An editorial, ink-first personal brand for the podcast and content of Yannik Hauser ("Want to be Entrepreneurs") — built on a near-black canvas (#06070e) and a signature indigo→violet→magenta gradient that runs across every hero, monogram tile, and elevation glow. Depth comes from radial light, not stacked shadows. Type pairs Cormorant Garamond (editorial display, weights 500–700) with Space Grotesk (modern-tech UI and body) and IBM Plex Mono (tokens, code, .md). Two signal accents — swissAI Pink (#ec0868) and atrete Lime (#deff26) — are used scarcely (never above ~30% of a single element) to connect Yannik's context without overtaking his own identity. A handwritten signature and a YH monogram close every artifact as a personal sign-off. Corners are consistently soft (cards ~16–18px, tiles ~20–30px, pills fully rounded); the only sharp edge is the underlying grid.

colors:
  primary: "#5b4bd0"
  primary-deep: "#3b3486"
  primary-violet: "#9a4fc7"
  primary-magenta: "#c42a86"
  gradient-from: "#3b3486"
  gradient-mid: "#9a4fc7"
  gradient-to: "#c42a86"
  accent-swissai: "#ec0868"
  accent-atrete: "#deff26"
  glow-violet: "#7c6ce0"
  glow-lilac: "#d9b8ff"
  ink: "#06070e"
  ink-raised: "#14121f"
  ink-soft: "#1a1740"
  on-ink: "#ffffff"
  on-ink-muted: "rgba(255,255,255,0.72)"
  on-ink-faint: "rgba(255,255,255,0.5)"
  canvas: "#f7f5fb"
  surface-card: "#ffffff"
  surface-tint: "#ece9fb"
  paper-ink: "#14121f"
  body: "#4a4557"
  muted: "#565064"
  muted-soft: "#8a8497"
  hairline: "#e6e1f2"
  hairline-soft: "#eee7f6"
  hairline-strong: "#e2dcef"
  on-primary: "#ffffff"
  scrim: "#06070e"

typography:
  display-xl:
    fontFamily: "'Cormorant Garamond', Georgia, 'Times New Roman', serif"
    fontSize: 82px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: -0.82px
  display-lg:
    fontFamily: "'Cormorant Garamond', Georgia, serif"
    fontSize: 52px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: -0.52px
  display-md:
    fontFamily: "'Cormorant Garamond', Georgia, serif"
    fontSize: 44px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -0.44px
  display-sm:
    fontFamily: "'Cormorant Garamond', Georgia, serif"
    fontSize: 33px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: 0
  display-quote:
    fontFamily: "'Cormorant Garamond', Georgia, serif"
    fontSize: 32px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0
    fontStyle: italic
  title-md:
    fontFamily: "'Space Grotesk', -apple-system, system-ui, sans-serif"
    fontSize: 22px
    fontWeight: 700
    lineHeight: 1.25
    letterSpacing: 0
  title-sm:
    fontFamily: "'Space Grotesk', -apple-system, system-ui, sans-serif"
    fontSize: 19px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: 0
  body-lg:
    fontFamily: "'Space Grotesk', -apple-system, system-ui, sans-serif"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: 0
  body-md:
    fontFamily: "'Space Grotesk', -apple-system, system-ui, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  body-sm:
    fontFamily: "'Space Grotesk', -apple-system, system-ui, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0
  caption:
    fontFamily: "'Space Grotesk', -apple-system, system-ui, sans-serif"
    fontSize: 13px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0
  eyebrow:
    fontFamily: "'Space Grotesk', -apple-system, system-ui, sans-serif"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 2.4px
    textTransform: uppercase
  mono-label:
    fontFamily: "'IBM Plex Mono', ui-monospace, monospace"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.5px
  button-md:
    fontFamily: "'Space Grotesk', -apple-system, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: 0
  signature:
    fontFamily: "handwritten image asset (assets/sign-white.png · assets/sign-ink.png)"
    fontSize: n/a
    fontWeight: n/a
    lineHeight: 1.0
    letterSpacing: 0

rounded:
  none: 0px
  xs: 6px
  sm: 11px
  md: 16px
  lg: 18px
  tile: 22px
  monogram: 30px
  full: 9999px

spacing:
  xxs: 2px
  xs: 6px
  sm: 10px
  md: 14px
  base: 18px
  lg: 26px
  xl: 34px
  xxl: 52px
  section: 64px

components:
  button-primary:
    backgroundColor: "linear-gradient(135deg, {colors.gradient-from}, {colors.gradient-to})"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-md}"
    rounded: "{rounded.full}"
    padding: 14px 26px
  button-secondary-ink:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.full}"
    padding: 13px 25px
  button-outline:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    borderColor: "{colors.hairline-strong}"
    typography: "{typography.button-md}"
    rounded: "{rounded.full}"
    padding: 12px 24px
  eyebrow-label:
    backgroundColor: transparent
    textColor: "{colors.muted-soft}"
    typography: "{typography.eyebrow}"
  eyebrow-accent:
    backgroundColor: transparent
    textColor: "{colors.glow-lilac}"
    typography: "{typography.eyebrow}"
  signal-pill:
    backgroundColor: "{colors.surface-tint}"
    textColor: "{colors.primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 5px 11px
  author-pill:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.ink}"
    borderColor: "{colors.hairline-strong}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 5px 15px 5px 5px
  card-paper:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    borderColor: "{colors.hairline}"
    padding: 22px 24px
  card-ink:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.tile}"
    padding: 44px
  card-gradient:
    backgroundColor: "linear-gradient(150deg, {colors.gradient-from}, {colors.gradient-to})"
    textColor: "{colors.on-ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.tile}"
    padding: 38px 34px
  monogram-tile:
    backgroundColor: "linear-gradient(140deg, {colors.gradient-from}, {colors.primary-violet} 65%, {colors.gradient-to})"
    textColor: "{colors.on-ink}"
    rounded: "{rounded.monogram}"
    asset: "assets/mono-white.png"
  icon:
    strokeColor: "{colors.ink}"
    strokeWidth: 1.75px
    grid: 24px
    accentFill: "{colors.accent-swissai} · {colors.accent-atrete}"
  cover-portrait:
    borderColor: "{colors.glow-violet}"
    rounded: "{rounded.full}"
  section-header:
    eyebrow: "{typography.eyebrow}"
    title: "{typography.display-md}"
    textColor: "{colors.ink}"
  info-footer:
    backgroundColor: transparent
    textColor: "{colors.muted}"
    typography: "{typography.caption}"
    borderColor: "{colors.hairline-strong}"
    padding: 24px 0 0
---

## Overview

This system is the personal brand of **Yannik Hauser** and the **"Want to be Entrepreneurs"** podcast. The base canvas is **near-black ink** (`{colors.ink}` — #06070e) for hero and feature surfaces, with a **paper alternative** (`{colors.canvas}` — #f7f5fb) for light contexts. Every artifact ships in both an ink-first and a paper-first variant. Carrying the identity across both is the signature **indigo→violet→magenta gradient** (`{colors.gradient-from}` #3b3486 → `{colors.gradient-mid}` #9a4fc7 → `{colors.gradient-to}` #c42a86) — it appears on the monogram tile, primary CTAs, hero washes, and as the source of every elevation glow.

Two **signal accents** connect Yannik's professional context without overtaking his own identity: **swissAI Pink** (`{colors.accent-swissai}` — #ec0868) and **atrete Lime** (`{colors.accent-atrete}` — #deff26). They are used scarcely — never more than ~30% of a single element (an icon detail, a node, a spark) — and never both at equal prominence in the same composition.

Type is a deliberate **editorial + modern-tech** pairing. **Cormorant Garamond** (weights 500–700) carries display and the podcast wordmark; **Space Grotesk** carries UI, labels, and body; **IBM Plex Mono** is reserved for tokens, hex values, code, and `.md` filenames. A **handwritten signature** and a **YH monogram** (both real image assets, not fonts) close every artifact as a personal sign-off.

The shape language is **soft**. Paper cards run ~16px (`{rounded.md}`), ink/gradient tiles ~22px (`{rounded.tile}`), the monogram tile ~30px (`{rounded.monogram}`), and every pill / portrait / signal chip is fully rounded (`{rounded.full}`). There is essentially no hard corner except the underlying layout grid.

**Key Characteristics:**
- Ink-first, not white-first: the primary floor is `{colors.ink}` (#06070e); paper (`{colors.canvas}`) is the documented light variant. Every template exists in both.
- Signature gradient: `{colors.gradient-from}` → `{colors.gradient-to}` carries the monogram tile, primary CTA, hero wash, and elevation glow — the single most recognizable brand element.
- Two restrained signal accents: swissAI Pink (`{colors.accent-swissai}`) and atrete Lime (`{colors.accent-atrete}`), capped at ~30% of any one element and never co-equal.
- Editorial type pairing: Cormorant Garamond display + Space Grotesk UI/body + IBM Plex Mono for tokens/code. No single-family system.
- Personal sign-off system: a handwritten signature (`assets/sign-white.png` / `assets/sign-ink.png`) and a YH monogram (`assets/mono-white.png` / `assets/mono-ink.png`), both freed to transparent PNG in white and ink versions.
- Glow-not-shadow elevation: depth comes from radial gradient light on ink (and a soft violet shimmer on paper), not from stacked drop shadows.
- Iconography on a 24px grid at 1.75px stroke, with a 4-Point Spark signature glyph and up to ~30% signal-color fill per icon for recognizability.
- 2px-based spacing rhythm with major sections at `{spacing.section}` (64px).

## Colors

### Primary & Gradient
- **Violet** (`{colors.primary}` — #5b4bd0): The core interactive/brand violet. Eyebrow accents on paper, section numbers, signal-pill text, icon accents, links.
- **Gradient** (`{colors.gradient-from}` #3b3486 → `{colors.gradient-mid}` #9a4fc7 → `{colors.gradient-to}` #c42a86): The signature wash. Primary CTAs use a 135° pair (from → to); the monogram tile uses a 140° three-stop (from → violet 65% → to); hero cards use a 150° pair. This is the identity — use it deliberately, not decoratively.
- **Deep Indigo** (`{colors.primary-deep}` — #3b3486): Gradient anchor and the darkest brand hue; also used flat on `{component.button-primary}`'s leading edge.
- **Magenta** (`{colors.primary-magenta}` — #c42a86): Gradient terminus; the warmest brand hue.

### Signal Accents
- **swissAI Pink** (`{colors.accent-swissai}` — #ec0868): Signal accent tying Yannik to the swissAI context. Restricted to ≤30% of a single element (an icon center, a highlighted node). Never a full surface fill.
- **atrete Lime** (`{colors.accent-atrete}` — #deff26): Signal accent tying Yannik to the atrete context — also the fill of the 4-Point Spark glyph. Same ≤30% rule; never placed at equal prominence beside swissAI Pink.
- **Rule:** at most one signal accent leads in any composition; the other, if present, stays quieter. Together they never exceed a supporting role — the gradient and ink own the identity.

### Ink Surfaces
- **Ink** (`{colors.ink}` — #06070e): The default floor for hero, feature, cover, and social surfaces. Never pure black.
- **Ink Raised** (`{colors.ink-raised}` — #14121f): Paper-mode headline ink and a slightly raised ink surface.
- **Ink Soft** (`{colors.ink-soft}` — #1a1740): A blue-shifted ink for gradient-adjacent fills and deep-band backgrounds.

### Paper Surfaces
- **Canvas** (`{colors.canvas}` — #f7f5fb): The paper-mode page floor — a faint violet-tinted off-white, never pure white.
- **Surface Card** (`{colors.surface-card}` — #ffffff): White card fill on paper surfaces.
- **Surface Tint** (`{colors.surface-tint}` — #ece9fb): Pale violet fill for signal pills, tinted callout boxes, and quiet chips.

### Text
- **On Ink** (`{colors.on-ink}` — #ffffff): Primary text on ink surfaces. Body drops to `{colors.on-ink-muted}` (72%) and captions to `{colors.on-ink-faint}` (50%).
- **Paper Ink** (`{colors.paper-ink}` — #14121f): Dominant headline/body text on paper.
- **Body** (`{colors.body}` — #4a4557): Running paragraph text on paper where full ink would feel heavy.
- **Muted** (`{colors.muted}` — #565064): Secondary paper copy, intro paragraphs.
- **Muted Soft** (`{colors.muted-soft}` — #8a8497): Eyebrow labels on paper, captions, mono sub-labels, "in Anwendung" hints.

### Glow
- **Glow Violet** (`{colors.glow-violet}` — #7c6ce0): Portrait rings and mid-tone glow strokes.
- **Glow Lilac** (`{colors.glow-lilac}` — #d9b8ff): Eyebrow accent on ink, hero text-shadow tint, and the lightest glow highlight.

### Hairlines
- **Hairline** (`{colors.hairline}` — #e6e1f2): Default 1px paper card border.
- **Hairline Soft** (`{colors.hairline-soft}` — #eee7f6): Lighter internal divider inside paper cards.
- **Hairline Strong** (`{colors.hairline-strong}` — #e2dcef): Heavier paper section border and outline-button stroke. On ink, dividers use `rgba(255,255,255,0.12)`.

### Scrim
- **Scrim** (`{colors.scrim}` — #06070e at ~55% opacity): Overlay tone for imagery and lower-third legibility (e.g., YouTube background gradient base).

## Typography

### Font Families
The system runs **three** families, each with a strict job:
- **Cormorant Garamond** — editorial display, the podcast wordmark ("Want to be Entrepreneurs"), pull-quotes, and card titles on feature surfaces. Weights 500–700; italic for quotes.
- **Space Grotesk** — all UI: eyebrows, labels, navigation, buttons, captions, and running body.
- **IBM Plex Mono** — tokens, hex codes, filenames (`CLAUDE.md`), and code snippets only.

Fallbacks: Cormorant → `Georgia, 'Times New Roman', serif`; Space Grotesk → `-apple-system, system-ui, sans-serif`; Plex Mono → `ui-monospace, monospace`. The **signature and monogram are image assets**, never a cursive webfont — earlier Allura/Sacramento substitutes were rejected in favor of Yannik's real handwriting.

### Hierarchy

| Token | Family | Size | Weight | Line Height | Use |
|---|---|---|---|---|---|
| `{typography.display-xl}` | Cormorant | 82px | 700 | 1.0 | Social-post hero titles ("Assistent oder Agent?") |
| `{typography.display-lg}` | Cormorant | 52px | 700 | 1.0 | Checklist / cover headlines ("Arbeiten mit KI-Agenten") |
| `{typography.display-md}` | Cormorant | 44px | 600 | 1.05 | Section headers in the brand doc |
| `{typography.display-sm}` | Cormorant | 33px | 600 | 1.1 | Sub-section titles, in-card feature heads |
| `{typography.display-quote}` | Cormorant italic | 32px | 600 | 1.2 | Closing pull-quotes ("Erst die Antwort. Dann der Prozess.") |
| `{typography.title-md}` | Space Grotesk | 22px | 700 | 1.25 | Column heads, "Reagiert — wenn du fragst." |
| `{typography.title-sm}` | Space Grotesk | 19px | 600 | 1.3 | List-item leads, checklist question titles |
| `{typography.body-lg}` | Space Grotesk | 22px | 400 | 1.45 | Post lede paragraphs under a hero |
| `{typography.body-md}` | Space Grotesk | 17px | 400 | 1.5 | Default running text |
| `{typography.body-sm}` | Space Grotesk | 15px | 400 | 1.55 | Card body, meta, doc paragraph copy |
| `{typography.caption}` | Space Grotesk | 13px | 600 | 1.4 | Author-pill text, footer labels, "GUT FÜR" |
| `{typography.eyebrow}` | Space Grotesk | 12px | 700 | 1.3 (2.4px, uppercase) | Section eyebrows, "WELCOME BACK", column kickers |
| `{typography.mono-label}` | IBM Plex Mono | 12px | 500 | 1.4 | Token names, hex, filenames, spec captions |
| `{typography.button-md}` | Space Grotesk | 16px | 600 | 1.25 | CTA labels |
| `{typography.signature}` | image asset | — | — | — | Handwritten sign-off (PNG, white/ink) |

### Principles
Cormorant carries the emotional, editorial weight; Space Grotesk carries clarity and structure; Plex Mono signals "this is a system value." Display headlines run tight (line-height 1.0, negative tracking) so the serif reads as a confident masthead, not body copy. The single loudest non-serif moment is the eyebrow: small, heavily tracked (2.4px), uppercase — it frames every section and every post like a magazine kicker.

Never mix the three families' jobs — no Cormorant on a button, no Space Grotesk masthead, no Plex Mono in running prose.

### Note on Font Substitutes
Load Cormorant Garamond, Space Grotesk, and IBM Plex Mono from Google Fonts. If a family is unavailable, fall back down its documented stack — do **not** substitute a different display serif or a geometric sans, as the pairing's contrast is the point. The signature/monogram never fall back to a font; use the PNG assets.

## Layout

### Spacing System
- **Base unit:** 2px micro-step on a loosely 4–8px rhythm.
- **Tokens:** `{spacing.xxs}` 2px · `{spacing.xs}` 6px · `{spacing.sm}` 10px · `{spacing.md}` 14px · `{spacing.base}` 18px · `{spacing.lg}` 26px · `{spacing.xl}` 34px · `{spacing.xxl}` 52px · `{spacing.section}` 64px.
- **Section padding:** `{spacing.section}` (64px) vertical for brand-doc bands; `52–68px` inner padding on social frames.
- **Card internal padding:** `{spacing.card-ink}` 44px on ink feature cards; ~22–24px on paper cards; 12–15px on tinted callout boxes.
- **Gutters:** 24–44px between grid columns; social two-column bodies split at 44px.

### Grid & Container
- **Brand doc:** single-column sections at ~72px horizontal page padding, full-width feature blocks inside.
- **Social frames:** fixed **1080 × 1350** (LinkedIn 4:5) for posts, info-sheets, and checklists; **16:9** for YouTube talking-head backgrounds; **1:1** for podcast covers.
- **Info-sheet:** header → 2-column concept split → 6-item 2-column grid → closing quote → footer.
- **Checklist:** header (icon + title) → 2×2 phase grid with checkbox rows → footer.
- **Footer band:** three zones — Save/Repost left · centered tagline ("Explore. Build. Share.") · signature or author-pill right.

### Whitespace Philosophy
Feature and hero surfaces breathe — generous ink margins let the gradient glow and the serif masthead carry the frame. Dense reference content (token tables, checklist grids) compresses to fit a single 4:5 frame without scrolling. The contrast reads as "editorial hero, structured system below."

## Elevation

Depth comes from **light, not stacked shadows**.

- **Flat (no shadow):** the vast majority of paper surfaces and every ink band.
- **Glow (ink):** `{component.card-ink}` and hero surfaces carry a radial gradient wash — e.g. `radial-gradient(85% 95% at 78% 12%, rgba(196,42,134,0.65), transparent 58%), radial-gradient(75% 85% at 12% 92%, rgba(91,75,208,0.62), transparent 58%)`. This is the primary elevation device (`elevation.glow`).
- **Glow (paper):** a softer violet shimmer for light heroes — `radial-gradient(82% 92% at 80% 10%, rgba(196,42,134,0.22), transparent 60%), radial-gradient(72% 82% at 12% 94%, rgba(91,75,208,0.24), transparent 60%)` (`elevation.glow-light`).
- **Gradient-tile lift:** the monogram tile and primary CTAs carry a single colored drop shadow tuned to the gradient, e.g. `0 14px 40px rgba(91,75,208,0.35)` — the one place a literal shadow appears, and it's brand-colored, not neutral grey.
- **Paper card border:** a 1px `{colors.hairline}` stroke does the separation work that a shadow would elsewhere.

There are no neutral-grey progressive shadow tiers. If a surface needs to feel raised, it glows.

## Components

### Buttons

**`button-primary`** — Gradient fill (`135deg`, from → to), white label, fully rounded, 14×26px padding. The primary CTA on both ink and paper.

**`button-secondary-ink`** — Solid `{colors.ink}` fill, white label, fully rounded. Used on paper where a gradient would compete with nearby art.

**`button-outline`** — Transparent fill, ink label, 1px `{colors.hairline-strong}` stroke, fully rounded. Quiet tertiary action.

### Labels & Pills

**`eyebrow-label`** — `{typography.eyebrow}` in `{colors.muted-soft}` on paper. Frames every section ("13 — Podcast-Cover"). On ink, use `{component.eyebrow-accent}` in `{colors.glow-lilac}`.

**`signal-pill`** — Pale violet `{colors.surface-tint}` fill, `{colors.primary}` text, fully rounded, 5×11px. Small kicker chip ("INTERVIEW", "DUO").

**`author-pill`** — A compact, button-like identity chip: white (or ink) surface, 1px hairline, fully rounded, 5×15×5×5px padding. Holds a 34px color portrait (violet ring, zoomed to face) + name + role inline. Kept dezent — roughly footer height, self-sized, centered. The standard byline on social frames.

### Cards

**`card-paper`** — White fill, 1px `{colors.hairline}`, `{rounded.md}` (16px), ~22–24px padding. Default spec/content card on paper.

**`card-ink`** — `{colors.ink}` fill, white text, `{rounded.tile}` (22px), 44px padding, with an `elevation.glow` radial wash. Feature and hero blocks.

**`card-gradient`** — Gradient fill (`150deg`), white text, `{rounded.tile}`. Reserved for result/payoff moments; card titles here match paper card titles (Space Grotesk 700/16), not a separate serif size.

### Identity Marks

**`monogram-tile`** — The primary personal mark: a gradient tile (`140deg`, from → violet 65% → to), `{rounded.monogram}` (30px), holding the white **YH monogram** image (`assets/mono-white.png`) centered with ~12px inset. Variants: outline-on-ink, ink-on-paper (`assets/mono-ink.png`), solid-ink tile, and a gradient stamp-pill with the 4-Point Spark. Small sizes drop the gradient for a single-color monogram.

**signature** — The handwritten sign-off, an image asset in white (`assets/sign-white.png`, for ink) and ink (`assets/sign-ink.png`, for paper). Freestanding, never on busy art; clear space equals the cap height of the mark. Never recolored, skewed, or replaced with a cursive font.

**`cover-portrait`** — A circular portrait with a 2–3px `{colors.glow-violet}` ring. Podcast covers desaturate guests (grayscale + ring) so a rotating cast reads as one series; social bylines use the **color**, face-zoomed portrait.

### Iconography

**`icon`** — 24px grid, 1.75px stroke, `{colors.ink}` (or white on ink). A **4-Point Spark** is the signature glyph. Icons may carry up to ~30% signal-color fill (`{colors.accent-swissai}` or `{colors.accent-atrete}`) on one detail — a node, a center, a spark half — for recognizability. Never fill a whole icon in a signal color.

### Section Header

**`section-header`** — An `{typography.eyebrow}` kicker (numbered, e.g. "17 — YouTube-Background") above a `{typography.display-md}` Cormorant title. The consistent opener for every brand-doc band.

### Footer (social frames)

**`info-footer`** — A three-zone strip above a 1px divider (`{colors.hairline-strong}` on paper, `rgba(255,255,255,0.12)` on ink): **Save/Repost** action left, centered **"Explore. Build. Share."** tagline in `{typography.eyebrow}`, and the **signature** (or a secondary mark) right. The author-pill sits centered near the top of the frame, not in the footer.

## Application Surfaces

| Surface | Size | Notes |
|---|---|---|
| Podcast cover | 1:1 | Ink floor, Cormorant wordmark, gradient-glow mic, portrait ring(s); Solo / Duo / Interview modes via portrait count + kicker. |
| LinkedIn info-sheet | 1080×1350 | Header + 2-col concept split (violet = A, magenta = B) + 6-item grid + Cormorant quote + `info-footer`. Ships dark + light. |
| LinkedIn checklist | 1080×1350 | Icon header + 2×2 phase grid with checkbox rows + signal-accent section numbers + prompt chips. Ships dark + light. |
| YouTube background | 16:9 | Slat-wall in the brand wash (magenta→violet→indigo), tool-chip in a white card, lower-third with monogram tile + signature. |
| Social hero post | 1080×1350 | `{typography.display-xl}` Cormorant title with color-coded key words, `body-lg` lede, author-pill, signature sign-off. |

## Responsive Behavior

The system is **fixed-frame first** (social/print artboards at exact export sizes) rather than fluid-web. When a surface is web/doc:

| Name | Width | Key Changes |
|---|---|---|
| Mobile | < 744px | Brand-doc sections stack single-column; two-column card grids collapse 1-up; social frames export at native size and scale to fit. |
| Tablet | 744–1128px | Two-column feature grids hold; horizontal page padding tightens from 72px toward 40px. |
| Desktop | ≥ 1128px | Full brand-doc layout; fixed social frames render at 1:1 pixel size within the canvas. |

### Minimum Sizes
- Social-frame body text never below 15px; headlines carry the frame.
- Print/doc body 12pt minimum.
- Monogram tile legible down to ~32px (drops gradient to single-color below that).

## Known Gaps

- **Motion / animation:** no timing, easing, or transition system is defined — surfaces are static artboards today.
- **Data-viz palette:** chart/graph color ramps beyond the core gradient + two signal accents are not specified.
- **Extended UI states:** hover/focus/disabled for interactive web components are not documented (the system is content-artifact-first, not app-first).
- **Full type scale below 12px:** micro-legal and dense-caption sizes are not calibrated.
- **Localization:** copy is authored in German; no defined treatment for long-word wrapping or RTL.
- **Signature/monogram source:** delivered as raster PNGs (white + ink); no vector (SVG) master is on file yet — vectorizing would improve small-size and large-print fidelity.