Palette

src/app/knglmrt-theme.css

Die Markenfarben — die einzige Stelle im Projekt mit Hex-Werten. Alles andere sind Rollen, die hierauf zeigen. Im Dark Mode unverändert.

Terrazzo

src/app/knglmrt-theme.css · public/branding/backgrounds

Alle Flächenvarianten als Klasse .knglmrt-terrazzo-*. Im Dark Mode ersetzt die Kartenfläche das Muster.

Typografie

src/app/knglmrt-theme.css · --ui-size-*

Alle Textstile, die es gibt — von groß nach klein. Größen nie als Pixelwert in Komponenten schreiben, sondern Element oder Klasse von hier nehmen. Fließtext (18px) ist die Untergrenze für alles Lesbare; kleiner sind nur Caption, Daten, Label und Tag.

Button

components/knglmrt/Button.tsx

Primary: volle Markenfarbe ohne Rahmen. Secondary: dieselbe Farbe mit 25 % Deckkraft, ebenfalls ohne Rahmen. Vier Größen, unabhängig von der Variante.

SegmentedControl

components/knglmrt/SegmentedControl.tsx

Eine Zeile, mehrere Schalter, genau einer aktiv. Die Segmente sind Buttons, die Kontur sitzt am Rahmen.

Field

components/knglmrt/Field.tsx

Das beschriftete Eingabefeld — die Grundform aller anderen Felder. Fokus färbt Kontur und Beschriftung pink, ein Fehler tut dasselbe und stellt seinen Satz darunter.

Textarea

components/knglmrt/Textarea.tsx

Das mehrzeilige Feld. Der Zähler sitzt rechts unter der Kante und läuft in Fira Mono — überschritten wird er pink.

Select

components/knglmrt/Select.tsx

Geschlossen ein Field mit Caret, offen fällt die Liste mit pinker Kontur darüber. Auf/Zu, Tastatur und Klick nach außen macht die Komponente selbst.

NativeSelect

components/knglmrt/NativeSelect.tsx

Die Auswahl mit <option>-Kindern — für lange Kontenpläne und alles, was der Browser selbst besser scrollt. Gleicher Rahmen wie Field, das Dreieck des Browsers weicht dem Caret des Systems.

FieldShell

components/knglmrt/FieldShell.tsx

Der Rahmen ohne Steuerelement: Beschriftung oben, Hinweis oder Fehler unten. Für alles, was kein natives Feld ist — Autocomplete, Mehrfachauswahl, Segmented Control.

FormSection

components/knglmrt/FormSection.tsx

Der Abschnitt im Formular: Überschrift, Einordnung, darunter die Felder. Die Kontur hält ihn zusammen — kein Schatten, keine Rundung. Ohne title bleibt der Kopf weg, die Kontur bleibt.

Combobox

components/knglmrt/Combobox.tsx

Tippen und wählen. Der getippte Teil jeder Zeile bleibt fett und pink stehen; gefiltert wird im Feld, solange keine eigene filter-Funktion kommt.

MultiSelect

components/knglmrt/MultiSelect.tsx

Mehrfachauswahl aus denselben Teilen wie Select: Gewähltes steht als eckige Marke im Feld, die Liste bleibt offen. Rückschritt in der leeren Suche nimmt die letzte Marke zurück.

SearchField

components/knglmrt/SearchField.tsx

Lupe links, Trefferzahl und Kreuz rechts. Beide Zeichen sind geometrisch — gezeichnetes Material gibt es erst ab 40px.

Stepper

components/knglmrt/Stepper.tsx

Zahl zwischen zwei Tasten, alles in einer Kontur. Der Wert ist tippbar — zwölf Stunden klickt niemand zwölfmal.

Choice

components/knglmrt/Choice.tsx

Kästchen, Punkt und Schalter — quadratisch mit Absicht. Darunter liegt ein echtes Feld, die Optik hängt an peer-*.

Badge

components/knglmrt/Badge.tsx

Statusmarke, 10px uppercase, nie rund. Status läuft über die Tints: Erfolg grün, Fehler rot, Warten gelb.

Notice

components/knglmrt/Notice.tsx

Tint-Block ohne Kontur und ohne Rundung, optional mit Kopfzeile.

StatTile

components/knglmrt/StatTile.tsx

Eine Zahl, ein Label, optional ein Balken. Zahlen laufen in Fira Mono.

Table

components/knglmrt/Table.tsx

Primitive statt einer fertigen Tabelle: Table · THead · Th · TBody · Tr · Td · TFoot · TableEmpty.

DataTable

components/knglmrt/DataTable.tsx

Dieselbe Tabelle wie oben, nur aus Daten statt aus Markup: Spalten beschreiben, Zeilen durchreichen. Eine Spalte rendert, was sie will — das Badge unten ist ein Badge, keine Prop.

zebra · rowTone="rosa" auf der eigenen Zeile · rowMuted auf der stornierten · footer

Dialog

components/knglmrt/Dialog.tsx

Eine Entscheidung, gerahmt: pinke Kappe, Kontur, der eine 3px-Offset-Schatten der Ansicht. Escape, Klick auf den Hintergrund und der Fokus zurück an die auslösende Taste gehören dazu.

Derselbe Rahmen ohne Hintergrund — DialogPanel, für Seiten, die ihn selbst platzieren:

SectionNav

components/knglmrt/SectionNav.tsx

Bereichsnavigation als eckige Chips: aktiv schwarze Fläche, sonst Kontur.

Breadcrumbs

components/knglmrt/Breadcrumbs.tsx

Fira Mono 12/16, Trenner ' / ', der letzte Eintrag ohne Link.

Divider

components/knglmrt/Divider.tsx

Sechs gezeichnete Linien. Als CSS-Maske gerendert, nimmt also jede Farbe an.

Face / Hand

components/knglmrt/Face.tsx · Hand.tsx

Die gezeichneten Figuren. Im Bundle liegen nur die tatsächlich genutzten Motive — die volle Bibliothek hat 93 Einträge und gehört nicht hierher.

Logos Konglomerat

public/branding/logo · public/branding

Die Marken des Vereins und von konglodigital.

KNGLMRT_Bildmarke.svg

KNGLMRT_Wortmarke.svg

KNGLMRT_Wortbildmarke_hoch.png

konglodigital-logo.svg

konglodigital-logo-white.svg

Logos Werkbereiche

public/branding/werkbereiche

Die Werkbereich-Marken als Bilddateien (Klasse .werkbereich-mark-image für die Einfärbung im Dark Mode).

3d-druck.svg

beton.png

buchdruck.svg

cnc.svg

elektronik.svg

foto-film.svg

holz.svg

k.svg

laser.png

materialvermittung.svg

printshop.svg

siebdruck.svg

textil.svg

Noch nicht portiert

public/branding/controls_surfaces_tables-export/react/ui/

Aus dem Export fehlen im Projekt noch Avatar und Card. Die Formularfelder und die Tabelle stehen — die alten Felder unter src/app/[lang]/components/ui/ laufen bis zur Umstellung weiter.

Icon-Taste im Kontext

components/knglmrt/Button.tsx

Die stille Variante bleibt im Ruhezustand unsichtbar und meldet sich erst beim Überfahren.

Icons

@fortawesome/free-solid-svg-icons

126 Icons, die aktuell im Projekt verwendet werden.