Typografie

Ökosystem-weite Font-Strategie und Type Scale — System-Schrift zuerst, Inter als Fallback, Scale nach improdent.

Ziel-Stack

--font-sans:
  -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Inter",
  ui-sans-serif, sans-serif;
--font-display: var(--font-sans);

Token	Wert	Zweck
`--font-sans`	System + Inter	Fließtext, UI
`--font-display`	`var(--font-sans)`	Display/Hero-Rolle (gleiche Familie)
`--font-body`	`var(--font-sans)`	Alias für Body
`--font-heading`	`var(--font-sans)`	Alias für Headings
`--font-mono`	System-Monospace	Code, Labels

Referenz-Implementierung Font-Stack: süper / addxion-docs (brand.css). Inter global als Fallback; auf Apple oft SF Pro.

Type Scale

Größen, Gewichte und Tracking folgen dem improdent-Muster. Schriftfamilie bleibt der ADDXION-Stack — keine Familjen Grotesk, keine Google Fonts.

Rolle	Token	Größe / Zeile	Tracking	Weight
Display (Hero)	`--text-display`	`clamp(2.5rem, 5vw, 4rem)` / `1.05`	`-0.04em`	`400`
Heading (Section)	`--text-heading` → `--text-heading-lg`	`1.875rem/2.25rem` → `2.5rem/2.5rem`	`-0.03em`	`400`
Title (PageHeader UI)	`--text-title`	`1.5rem` / `2rem`	`-0.03em`	`400`
Body	`--text-body`	`1rem` / `1.75rem` (`base/7`)	—	`400`
Body lg	`--text-body-lg`	`1.125rem` / `2rem` (`lg/8`)	—	`400`

Regeln

Headings (h1–h6) standardmäßig font-weight: 400 (nicht 500/600)
Große Titel: text-wrap: balance bzw. pretty
Display nur für Marketing-Heroes — nicht als Standard-Doc-H1 (Content-Spalte)

Tokens leben in Consumer-brand.css (z. B. addxion-docs). Referenz-Metriken: improdent Heading / Subheading / Text.

Was nicht mehr gilt

Alt	Status
Google Fonts CDN (`fonts.googleapis.com`)	entfernt
DM Sans, Syne, JetBrains Mono als Neon-Defaults	entfernt
`@fontsource-variable/dm-sans` in addxion.ai	entfernt
Separates Display-Font (z. B. Familjen Grotesk) im Ökosystem	nicht übernehmen

Marken-spezifische Fonts gehören nur in Consumer-brand.css, wenn ein Produkt bewusst abweicht — nicht in @addxion/core.

Inter-Dateien (self-hosted)

Pfad	Inhalt
`addxion-neon/packages/core/assets/fonts/InterVariable.woff2`	Inter Variable, normal
`addxion-neon/packages/core/assets/fonts/InterVariable-Italic.woff2`	Inter Variable, kursiv

@font-face liegt in packages/core/src/fonts/inter.css.

Consumer-Integration

Minimal (nur Fonts)

@import "@addxion/neon/fonts/inter.css";

Mit Scale (empfohlen)

In Consumer-brand.css Stack + Type-Scale-Tokens setzen (siehe addxion-docs src/styles/brand.css).

Starlight (addxion-docs)

:root {
  --sl-font: var(--font-sans);
  --sl-font-mono: var(--font-mono);
}

Markdown-Content nutzt Heading-/Body-Tokens; PageHeader-Titel nutzt --text-title.

addxion-ai

Surface	Typografie
App (Auth, Shell)	Body + Heading; PageHeader `.page-title` = `--text-title`
Guest / Login / Marketing	wie Marketing-Sites: Hero → Display, Sections → Heading, Fließtext → Body

Scale-Tokens in brand.css / styles.css des Consumers; nicht in @addxion/shell hardcoden.

Marketing (addxion-com u. a.)

Siehe Websites entwickeln: Hero → Display, Section → Heading, Body base/7.

Exports

Import	Inhalt
`@addxion/neon/fonts/inter.css`	Re-Export von `@addxion/core/fonts/inter.css`
`@addxion/core/assets/fonts/*`	Rohdateien (woff2)
`@addxion/neon/styles`	Tokens + Inter (via `@addxion/core`)

Primitives definieren --font-sans und --font-mono. Consumer-brand.css darf überschreiben und die Type Scale ergänzen.

Betroffene Repos

Repo	Änderung
`addxion-neon`	Inter-Assets, `inter.css`, Primitives
`addxion-docs`	`brand.css` Scale-Tokens, Starlight/Prose, diese Seite
`addxion-com`	`brand.css` Scale für Marketing
`addxion-ai`	App + Guest: Scale in Consumer-Styles
`addxion-cms` / `addxion-com/cms`	`@addxion/neon` Dependency

Performance

font-display: swap — Text bleibt lesbar während Inter lädt
Auf Apple-Geräten greift SF Pro; Inter wird oft gar nicht gerendert
Keine externen DNS-Lookups oder CDN-Abhängigkeiten

Siehe auch

Tokens — Primitives und Semantic Layer
CSS-Architektur — Schichten brand / semantic / primitives
Websites entwickeln — Marketing-Zuordnung der Scale

Truths

ID	Wahrheit
T-NEON-FONTS	Keine Google Fonts, self-hosted Inter
T-NEON-BRAND	Markenwerte in Consumer brand.css
T-PKG-NEON	Consumer-Einstieg: @addxion/neon, nicht @addxion/core

Für Agents

Scope: Typografie — Font-Stack und Type Scale.

Schriften aus @addxion/neon/fonts/inter.css
System-Schrift (Apple SF) hat Vorrang; Inter als Fallback
Scale-Tokens in Consumer-brand.css (Display / Heading / Title / Body)
Headings: font-weight: 400, Tracking -0.03em / Display -0.04em
Display nur für Marketing-Heroes, nicht als Doc-H1
Marken-Fonts nur in Consumer-brand.css
addxion-ai: PageHeader = Title; Guest/Marketing = Display/Heading/Body wie Marketing-Sites