CSS Architecture

Schichtenmodell für Styles in addxion-com und Neon Consumers.

Schichten (addxion-com)

Datei	Repo	Inhalt
`brand.css`	addxion-com	Markenspezifisch — `ink`, `cream`, `electric`, Fonts
`site.css`	addxion-com	`tailwindcss` + `brand.css` + Marketing (`.btn`, `.wrapper`)
`cp-page.css`	addxion-com	Optional: Produktseiten-Layout (CallPilot, Automation)
`neon.css`	Consumer	`@import "@addxion/neon/styles"` — `tw:` Utilities

Regel: Neon enthält nichts Markenspezifisches. Brand lebt in addxion-com. Produktseiten-Layer (cp-page.css): Websites entwickeln.

Import-Reihenfolge

Marketing-Layout importiert site.css.

addxion-docs (Starlight) nutzt customCss in dieser Reihenfolge:

site.css — Tailwind, Typography, brand.css (--brand-color-*)
neon.css — @import "@addxion/neon/styles" (Primitives, Semantic)
@addxion/neon/tokens/starlight-bridge.css — Neon Semantic → Starlight --sl-color-*
starlight-overrides.css — addxion-spezifisch (Prose-Link-Hover, Sidebar, .neon-demo)
@addxion/neon/docs/prose.css — Starlight MDX (Cards, Asides, Badges, Tabs, Steps, Code)
obsidian-layout.css — 3-Spalten-Layout, transparente Sidebars, Graph in linker Sidebar
site-graph.css — Graph-Panel-Tokens

Token-Bridge

brand.css (--brand-color-*)
    → Neon semantic.css (--color-surface, --color-text, …)
        → starlight-bridge.css (--sl-color-bg, --sl-color-text, …)
        → shadcn-bridge.css (--background, --foreground, …) — in docs/prose.css
        → docs/prose.css (Cards, Asides, Badges)

Eine Markenänderung in brand.css propagiert über Semantic in Shell und Prose — ohne doppelte Hex-Werte.

Layout-Referenz: starlight-theme-obsidian — Navigation links, Graph/TOC in linker Sidebar.

Tailwind Prefix

Neon nutzt den tw: Prefix (Tailwind v4). Marketing-Seiten nutzen unpräfixierte Tailwind-Klassen über site.css.

Details: Prefix tw:

Outline-Layout

Strukturelle Trennung über geteilte 1px-Linien (Background Gap Trick / shared edges), nicht über Schatten-Karten: Bordered Grid.

Consumer-Matrix

Consumer	brand.css	cp-page	starlight-bridge	docs/prose	obsidian-layout	neon.css	UUI / shadcn
addxion.com	✓	✓	—	—	—	bei Bedarf	—
addxion.ai	geplant	—	—	—	—	✓	UUI brownfield → shadcn + Neon
süper	✓ (Kurse-Layer)	—	—	—	—	✓	beUI + Neon
addxion-docs	✓ (Dark)	—	✓	✓	✓	✓	—

Neue UI in addxion.ai: Neon + shadcn. UUI behalten, wo bestehende Patterns passen (Touch-Migration).

Truths

ID	Wahrheit
T-PKG-NEON	Consumer-Einstieg: @addxion/neon, nicht @addxion/core
T-NEON-BRAND	Markenwerte in Consumer brand.css
T-TRUTHS-SSOT	Truths-Registry — referenzieren, nicht duplizieren

Für Agents

Scope: CSS-Schichtenmodell — site.css, brand.css, neon.css.

neon.css importiert @addxion/neon/styles
Marken-Tokens nur in brand.css, nicht in addxion-neon