Designsystem

Live-Inventar der Marketing-UI in diesem Website-Repo. Neue Komponenten zuerst hier gegenprüfen — Surface, Button, EyebrowPill, SectionHeader, Input.

Auf der Website genutztIm Repo, ungenutztSSOTDuplikatÄhnlichVarianteAd-hoc

Farben

Tokens aus src/styles.css / @theme. Swatches nutzen die echten CSS-Variablen.

Farbtokens

src/styles.css

Auf der Website genutztSSOT

Primary ist Gelb (CTAs). Brand-Blue ist der Chip-/Link-/Nav-Ton. --gradient-cta und --muted-foreground sind Aliase, keine eigenen Farben.

Brand Blue

--brand-blue

#2d34ed

Pills, IconWells, Nav-Underline, Links, Filter-Aktiv, Slider/Toggle

Primary (Gelb)

--primary

oklch(0.853 0.165 89) ≈ #ffd13a

CTA-Buttons, Ring, Ghost-Underline — nicht für Pills

Heading / CTA-Gradient

--gradient-heading

#2d34ed → #1b171a (20°)

text-display, text-h1, text-h2. --gradient-cta ist Alias.

Foreground

--foreground

oklch(0.38 0.02 270)

Fließtext, UI-Copy, Lead, Meta. --muted-foreground ist Alias.

Heading (solid)

--heading

oklch(0.15 0 0)

text-h3, text-h4

Muted

--muted

oklch(0.97 0.005 270)

Section-Hintergründe, leise Flächen

Card

--card

oklch(1 0 0)

Kartenflächen, Surface default

Border

--border

oklch(0.90 0.01 270 / 0.12)

Trennlinien — bewusst sehr leise

Destructive

--destructive

oklch(0.55 0.22 27)

Fehler, Button destructive

Emerald Live

emerald-500

#10b981 (Tailwind)

MemberStatusBadge live — semantische Variante, kein Brand-Token

Chat-Bubble Gelb

--chat-user-bg / --chat-user-border

#fff9e6 / #feebb6

User-Bubbles in Chat-Demos — blasses Cream, nicht Primary-Gelb

Typografie

SSOT in src/styles.css (.text-display … .text-meta). Inter = font-sans, Space Grotesk = font-heading.

Ad-hoc

Häufige Abweichungen: text-xl font-heading font-bold statt text-h3 (z. B. Alina-H3), font-heading text-2xl auf Kontakt, text-[10px] auf dichten Pills. Bevorzugt Tokens nutzen. Section-Kicker (text-eyebrow über H2) gibt es nicht mehr.

Display / Hero-H1

src/styles.css → .text-display

SSOT

Digitale Mitarbeitende.

36 / 48 / 60 · Gradient · Space Grotesk 700

H1 (Unterseiten)

src/styles.css → .text-h1

SSOT

Kontakt

30 / 36 / 48 · Gradient · Space Grotesk 700

H2 (Sections)

src/styles.css → .text-h2

SSOT

Was Alina für dich übernimmt

30 / 36 / 48 · Gradient · wie H1, für Section-Titel

H3 / H4

src/styles.css → .text-h3 / .text-h4

SSOT

Karten-Headline ohne Verlauf

Listen- und Mini-Headline

Solid --heading, kein Gradient

Lead / Body / Meta

src/styles.css

SSOT

Lead sitzt unter H1/H2 — 18px, gleiche Größe wie Body.

Canonical Body: 18px / 1.625. Für Fließtext überall verwenden.

Meta / Helper — gleiche Größe.

Font-Familien

@theme --font-sans / --font-heading / font-mono

SSOT

Inter — UI und Fließtext (font-sans)

Space Grotesk — Headlines (font-heading)

font-mono — Pills, Codes, Step-Nummern

Buttons

Alle Varianten und Größen aus button.tsx. Ghost unterstreicht gelb, Nav unterstreicht brand-blue.

Ähnlich

Header-Desktop-Links sind keine Button variant="nav", sondern TanStack Links mit navUnderlineClassName in Header.tsx (brand-blue ::after). Ghost nutzt after:bg-primary (gelb). Nicht vermischen.

Button — Varianten

src/components/ui/button.tsx

Auf der Website genutztSSOT

Button — Größen

src/components/ui/button.tsx

Auf der Website genutztSSOT

Basis ist default (h-11 px-8). sm und icon für dichte UI, xl für große CTAs.

Größen: sm (h-9), default (h-11 px-8), xl (h-14), icon (h-10 w-10). Kein lg — das ist default. ButtonArrow rutscht bei Hover nach rechts (group-hover).

Chips, Pills & Badges

EyebrowPill ist die Chip-SSOT. NumberPill für Schritte, BrandFilterPillSelect für Filter. Keine Section-Kicker.

SSOT

Status, Tags, Beliebt, Skills, Coming-soon: EyebrowPill (oder ein Wrapper darauf). NumberPill bleibt für nummerierte Schritte. BrandFilterPillSelect bleibt unverändert für selektierbare Filter — nicht durch EyebrowPill ersetzen.

EyebrowPill

src/components/ui/eyebrow-pill.tsx

Auf der Website genutztSSOT

Chip-SSOT: mono, uppercase, brand-blue Outline. tone=live für emerald. Kein Kicker über Überschriften.

SkillBeliebtläuftLive

ComingSoonBadge

src/components/ui/section-header.tsx

Auf der Website genutztVariante

EyebrowPill-Wrapper, kleiner (10px), Text „Bald“.

Bald

MemberStatusBadge

src/components/home/MemberStatusBadge.tsx

Auf der Website genutztVariante

EyebrowPill: coming = brand, live = tone=live (emerald).

Sofort verfügbarAuf AnfrageSofort verfügbarAuf Anfrage

NumberPill / StepPill / formatStepNumber

src/components/ui/eyebrow-pill.tsx

Auf der Website genutztSSOT

StepPill ist ein Alias von NumberPill. Zwei-stellig (01, 02). Home, Lösungen, DMA, Sicherheit. Nicht gelb.

010203

brandOutlinePillClass

src/components/ui/eyebrow-pill.tsx

Auf der Website genutztSSOT

Shared Class-String hinter EyebrowPill und NumberPill: border-brand-blue bg-transparent text-brand-blue.

Token-Klasse

BrandFilterPill / BrandFilterPillSelect

src/components/ui/eyebrow-pill.tsx

Auf der Website genutztSSOT

Selektierbare Filter — bewusst eigene API. Größen md / sm / xs, Varianten brand / muted. Sliding Indicator. HomeJobPicker, Workflows, Alina-Task-Chips. Nicht ändern.

Tabs

Segmented Control (Tabs) vs. Filter-Pills — ähnliche Aufgabe, anderes Chrome.

Ähnlich

Tabs: graue Track, weißer Sliding-Indicator, font-sans. BrandFilterPillSelect: einzelne Outline-Pills, blauer Fill wenn aktiv, font-mono. Nicht 1:1 tauschen.

Tabs

src/components/ui/tabs.tsx

Auf der Website genutztSSOT

Segmented Control mit Motion-Indicator.

BrandFilterPillSelect (Vergleich)

src/components/ui/eyebrow-pill.tsx

Auf der Website genutztÄhnlich

Unverändert: AlinaSpotlightDemo, HomeJobPicker, Workflows — Filter/Task-Wahl, kein Segmented Control.

Akkordeons

Ein Primitive: ui/accordion. FAQ-Seiten und andere Listen nutzen dasselbe Element.

SSOT

Accordion trägt das FAQ-Card-Chrome inklusive Abstand zwischen den Items (space-y-3). FAQList ist nur ein Daten-Wrapper — kein eigenes Pattern.

Accordion

src/components/ui/accordion.tsx

Auf der Website genutztSSOT

Radix Accordion mit FAQ-Card-Chrome. FAQ-Seiten greifen direkt auf dieses Element zu — kein zweites Akkordeon-Pattern.

Formulare

Kontakt-Felder sind die Input/Textarea-SSOT. Pricing-Rechner überschreibt auf h-10 für kompakte Zeilen.

SSOT

/kontakt nutzt Input und Textarea. Default: rounded-xl, px-4 py-4, text-lg, focus:border-primary. Im Pricing-Rechner bleibt className="h-10 …", damit die Zeilen kompakt bleiben.

Input / Textarea / Label

src/components/ui/input.tsx, textarea.tsx, label.tsx

Auf der Website genutztSSOT

Kontakt-Chrome. Label ist optional — /kontakt hat keine Labels, der Wizard-Titel übernimmt das.

Name

Nachricht

Input kompakt (Pricing)

src/components/pricing/PricingCalculatorSection.tsx

Auf der Website genutztVariante

Dieselbe Input-SSOT, Größen-Override für Tabellenzeilen.

Select

src/components/ui/select.tsx

Auf der Website genutztSSOT

Slider / Toggle / ToggleGroup

src/components/ui/slider.tsx, toggle.tsx, toggle-group.tsx

SSOT

Brand-blue, nicht Primary-Gelb. ToggleGroup erbt toggleVariants.

Tabellen

ui/table ist das Primitive — Chrome wie TeamVsAgency, ohne gelbe Highlight-Spalte.

SSOT

Neue Tabellen → ui/table. TeamVsAgency bleibt ein Custom-Grid wegen Logos und der Vergleichs-Highlight-Spalte — das Gelb dort ist bewusst und kein Table-Default.

Table

src/components/ui/table.tsx

SSOT

Beispiel — ui/table Primitive
Thema	ChatGPT	kimatik
Datenort	USA	EU
Einstieg	Selbst bauen	Fertige DMAs

Overlays & Menüs

Dialog, Sheet, Popover, Tooltip. Navigation ist Header-Hover-Underline — nicht das shadcn-Mega-Menu.

SSOT

Header-Links nutzen TanStack Link + brand-blue ::after (navUnderlineClassName). Das Lösungen-Dropdown hängt strukturell an NavigationMenu, visuell aber am selben Hover-Underline. Default-shadcn-Menu-Chrome nicht als Muster kopieren.

Navigation (Header)

src/components/layout/Header.tsx

Auf der Website genutztSSOT

Hover-Underline in brand-blue. NavigationMenu nur als Dropdown-Primitive für Lösungen.

FunktionenPreise

Aktiver/Hover-Zustand: Text brand-blue + Underline. Kein gelber Ghost-Underline.

Dialog

src/components/ui/dialog.tsx

Auf der Website genutzt

Sheet

src/components/ui/sheet.tsx

Auf der Website genutzt

Tooltip / Popover

src/components/ui/tooltip.tsx, popover.tsx

Auf der Website genutztSSOT

Popover-Default gleicht Tooltip. Pricing überschreibt PopoverContent mit bg-card — das bleibt.

Flächen

Surface für generische Karten; FeatureCard für Icon + Fließtext-Grids (Sicherheit).

SSOT

Neue Marketing-Karten → Surface oder FeatureCard (Icon + Text). shadcn Card wurde entfernt.

Surface

src/components/ui/surface.tsx

Auf der Website genutztSSOT

default

muted

outline

hero + interactive

FeatureCard

src/components/ui/feature-card.tsx

Auf der Website genutztSSOT

IconWell + optionaler Titel + text-body Fließtext — Sicherheit, Feature-Grids.

Verschlüsselte Übertragung (TLS/SSL) zwischen dir, der Plattform und allen angebundenen Diensten.

Zugriff nach dem Prinzip der minimalen Rechte

Interner Zugriff nur für Personen, die ihn zur Aufgabenerfüllung brauchen.

IconWell

src/components/ui/icon-well.tsx

Auf der Website genutztSSOT

CSS .icon-well-brand — Outline-Blau, currentColor.

Skeleton

src/components/ui/skeleton.tsx

Auf der Website genutzt

Pricing-Rechner Ladezustand.

BrowserScreenshotFrame

src/components/ui/browser-screenshot-frame.tsx

Auf der Website genutzt

Website-Komponente: Browser-Chrome um Screenshots der Plattform. Die Plattform selbst wird nicht angefasst.

app.kimatik.com

Screenshot-Platzhalter

Platzhalter — die Frame-Komponente lebt in diesem Website-Repo.

Screenshot folgt

Marke & Layout

Logo, Portraits und das SectionHeader-Ausrichtungs-Pattern. Kein Rebuild jeder Section.

SSOT

Layout-Regel: Section-Titel links auf Mobile, zentriert ab sm (text-left sm:text-center). SectionHeader align="center" macht genau das. Alina-Intro folgt derselben Regel — Avatar und das H3 „Was Alina für dich übernimmt“ sind zusätzlich zentriert.

KimatikLogo

src/components/brand/KimatikLogo.tsx

Auf der Website genutztSSOT

MemberAvatar

src/components/home/MemberAvatar.tsx

Auf der Website genutztSSOT

Kreis-Portraits. Größen xs–2xl, optional Ring (ring-primary/30). Marketing-SSOT für Portraits.

SectionHeader

src/components/ui/section-header.tsx

Auf der Website genutztSSOT

Beispiel-Section

Links mobil, zentriert ab sm. Kein Kicker über dem Titel.

MobileBackButton

src/components/ui/mobile-back-button.tsx

Auf der Website genutzt

Nur unter md sichtbar — hier mit onBack, damit die Inventory-Seite nicht navigiert.

UI-Inventar

Jede Datei unter src/components/ui/ in diesem Website-Repo. Ungenutzte shadcn-Leftovers sind entfernt.

Datei	Exports	Einsatz	Status	Notiz	Demo
accordion.tsx	Accordion*	Auf der Website genutzt	SSOT	FAQ-Card-Chrome inkl. Item-Abstand — eine SSOT	Akkordeons
browser-screenshot-frame.tsx	BrowserScreenshotFrame*	Auf der Website genutzt	—	Website-Chrome um Screenshots der Plattform	Flächen
button.tsx	Button, ButtonArrow	Auf der Website genutzt	SSOT	CTA-SSOT. Basis default (h-11 px-8), kein lg	Buttons
carousel.tsx	Carousel*	Auf der Website genutzt	—	Embla — DMA-Slider, UseCases, Sicherheit	nicht extra demo
collapsible.tsx	Collapsible*	Auf der Website genutzt	—	Cookies, Pricing-Rechner	hier
dialog.tsx	Dialog*	Auf der Website genutzt	—	GalleryLightbox	Overlays
eyebrow-pill.tsx	EyebrowPill, NumberPill, Filter	Auf der Website genutzt	SSOT	Chip-SSOT + Filter + Schritte	Chips
feature-card.tsx	FeatureCard	Auf der Website genutzt	SSOT	Icon + Fließtext-Karte (text-body) — Sicherheit	Flächen
icon-well.tsx	IconWell	Auf der Website genutzt	SSOT	Outline-Blau — Marketing-SSOT	Flächen
input.tsx	Input	Auf der Website genutzt	SSOT	Kontakt-SSOT; Pricing mit h-10 Override	Formulare
label.tsx	Label	Auf der Website genutzt	—	Optional neben Input/Textarea	Formulare
MediaBand.tsx	MediaBand	Auf der Website genutzt	—	Loop-Video — Home (DayWithKimatik, WhyKimatik)	nicht extra demo
mobile-back-button.tsx	MobileBackButton	Auf der Website genutzt	—	LP-Hero, MemberCV, ToolCV	Marke
navigation-menu.tsx	NavigationMenu*	Auf der Website genutzt	—	Header Lösungen-Dropdown; Hover-Underline ist visuelles SSOT	Overlays
popover.tsx	Popover*	Auf der Website genutzt	—	Pricing-Dropdown; Default-Chrome wie Tooltip	Overlays
section-header.tsx	SectionHeader, ComingSoonBadge	Auf der Website genutzt	SSOT	Section-SSOT, kein eyebrow/kicker	Marke / Chips
select.tsx	Select*	Auf der Website genutzt	—	BereichFilter	Formulare
sheet.tsx	Sheet*	Auf der Website genutzt	—	MemberCV, ToolCV	Overlays
skeleton.tsx	Skeleton	Auf der Website genutzt	—	Pricing-Rechner	Flächen
slider.tsx	Slider	Im Repo, ungenutzt	SSOT	Brand-blue Thumb/Track	Formulare
surface.tsx	Surface	Auf der Website genutzt	SSOT	Marketing-Karten-SSOT	Flächen
table.tsx	Table*	Im Repo, ungenutzt	SSOT	TeamVsAgency-Chrome ohne gelbe Spalte	Tabellen
tabs.tsx	Tabs*	Auf der Website genutzt	SSOT	Segmented Control — Zusammenarbeit, Sicherheit, Lösungen	Tabs
textarea.tsx	Textarea	Auf der Website genutzt	SSOT	Kontakt-SSOT	Formulare
toggle-group.tsx	ToggleGroup*	Im Repo, ungenutzt	SSOT	Erbt brand-blue von toggleVariants	Formulare
toggle.tsx	Toggle	Im Repo, ungenutzt	SSOT	Brand-blue, nicht gelb	Formulare
tooltip.tsx	Tooltip*	Im Repo, ungenutzt	—	Default-Chrome; Popover teilt denselben Look	Overlays

Collapsible

src/components/ui/collapsible.tsx

Auf der Website genutzt

Farben

Typografie

Buttons

Chips, Pills & Badges

Tabs

Akkordeons

Was ist das Primitive?

Mehrere Items?

Wo sitzt der Abstand?

Formulare

Tabellen

Overlays & Menüs

Flächen

Marke & Layout

Beispiel-Section

UI-Inventar