Design System · v1

SeminarPlan Styleguide.

Eine Quelle fuer Typo, Farben, Buttons und die OS-Primitives. Die Marke spricht im Desktop-Charakter des Produkts: App-Icons und echte Fenster, kein generisches SaaS-Grau.

Tokens

Type Scale

Eine disziplinierte modulare Skala als CSS-Tokens, plus .t-*-Utilities. Keine freien Groessen mehr. Headlines in Poppins, Fliesstext in Inter, Labels in JetBrains Mono.

type-scale.css

--fs-display Poppins 700 · Hero .t-display

Verwalte Seminare, nicht Tabellen.

--fs-h1 Poppins 700 .t-h1

Alles fuer dein Seminargeschaeft.

--fs-h2 Poppins 600 .t-h2

Ein Desktop, der wie ein OS denkt.

--fs-h3 Poppins 600 .t-h3

Sektion, Karte, Listenkopf

--fs-lead Inter · Lead-Absatz .t-lead

Der Vorspann unter einer Headline, etwas groesser als Fliesstext.

--fs-body Inter · Fliesstext .t-body

Der normale Lesetext im Body. Ruhig, klar, gut lesbar bis ins Detail.

--fs-eyebrow JetBrains Mono · Label .t-eyebrow

Das CRM fuer Schulungsanbieter

Tokens

Farben

Markenblau (#2563eb) und Sky-Akzent (#0ea5e9), getragen von einer neutralen Slate-Palette.

Brand

brand-50

brand-100

brand-200

brand-300

brand-400

brand-500

brand-600

brand-700

brand-800

Slate (ink)

ink-50

ink-100

ink-200

ink-300

ink-400

ink-500

ink-600

ink-700

ink-800

ink-900

Semantik & Akzent

primary

accent (sky)

success

warning

danger

.grad

App-Akzent-Gradienten

Jedes Programm bringt seinen eigenen Akzent-Gradienten mit (52 Programme im Katalog). Eine Auswahl:

Kontakte accent

Angebote accent

Kalender accent

Seminare accent

Rechnungen accent

Statistiken accent

Tags accent

Posteingang accent

Komponenten

Buttons

Eine Button-Quelle aus dem Core, fuer Forms und Marketing.

buttons

Primary Secondary Ghost Pill Mit Pfeil Large Small

Primitive

AppTile

Das App-Icon-Vokabular: Gradient-Kachel plus FontAwesome-4.7-Glyph, optional mit Label und Subtitle. Hier 12 echte Programme aus dem Desktop.

Programme · SeminarPlan Desktop

Kontakte CRM & Tabellenansicht

Angebote Pipeline, Termine, Kunden

Buchungen Teilnehmer, Rechnungen, Status

Kalender Planung, Termine, Ansichten

Seminare Katalog, Pflege, Auswertung

Rechnungen Forderungen, Mahnungen, PDF

Posteingang E-Mail-Eingang, Zuordnung, Threads

Statistiken Reports, KPIs, Trends

Aufgaben Heute, Kanban, Kalender

Räume Kapazitäten, Standorte, Nutzung

Tags Farben, Relationen, Zuordnungen

Export CSV, DATEV, Integrationen

Groessen & Anordnung

sm 38px

md 52px

lg 68px

stacked zentriert

Primitive

WindowFrame

Das wiederkehrende OS-Fenster. Titelleiste mit Akzentpunkt links, Fenster-Steuerung rechts, Inhalt im Slot.

Kontakte · Tabellenansicht

Andrea BergmannStammkundeHamburg
Markus Voss GmbHLeadKoeln
Petra LindqvistStammkundeMuenchen

Tokens

Backdrops

Dekorative Hintergrund-Szenen ueber Section backdrop="…". Sechs von vielen:

mesh

grid

dots

aurora

orbs

nebula

Komponenten

Eyebrows & Karten

Kicker-Zeilen (Core Eyebrow) und das AppTile als Karten-Anker.

Standard 01 Mit Index Strich-Marker

Kontakte

CRM & Tabellenansicht

Vertrieb

Angebote

Pipeline, Termine, Kunden

Vertrieb

Buchungen

Teilnehmer, Rechnungen, Status

Abwicklung