Beispiele

Standard mit Aktionen und Media-Card

Ein Definitionsmodell für alle Oberflächen

Website, Shop, App, Desktop und E-Mail aus derselben Registry — gerendert über Target-Profile.

Section → Component → Element

Diese Karte steckt im media-Slot des Hero.

Brand-Ton, zentriert

Der Kunde wählt Props und Tokens.

Keine freien Klassen, kein freies CSS — das System bleibt kontrollierbar.

Eigenschaften

Prop	Typ	Default	Builder-Label
title *	string	—	Titel
subtitle	string	""	Untertitel
align	string: start \| center	"start"	Ausrichtung
tone	string: default \| brand	"default"	Ton
spacing	string: none \| sm \| md \| lg \| xl	"none"	Eigenabstand

* Pflicht-Prop

Events & Slots

Slot actions: akzeptiert ui.button

Slot media: akzeptiert ui.*, component.card, layout.*

Stellschrauben (Komponenten-Tokens)

Ebene 3 — aus dem CSS generiert (Registry). Umverdrahtbar per Hüllen-Komposition, ohne Markup-Eingriff; künftige Regler-Quelle des Component Builders.

Token	Default
`--hero-background`	`var(--color-surface-default)`
`--hero-title-color`	`var(--color-text-default)`
`--hero-subtitle-color`	`var(--color-text-muted)`

Genutzte Design-Tokens

border.hairlinecolor.action.on-primarycolor.action.primarycolor.border.defaultcolor.surface.defaultcolor.text.defaultcolor.text.mutedcontainer.mdfont.family.defaultleading.baseleading.tightradius.surfacesize.12size.4size.6size.8text.3xltext.lgweight.bold