Styleguide

Überblick über alle Design-Tokens und Bausteine — zum Nachschlagen und zum schnellen Entwickeln neuer Komponenten.

Farben

Hintergrund --color-bg

Fläche --color-surface

Text --color-ink

Akzent --color-accent

Typografie

Überschrift H1 — Archivo Black

Überschrift H2

Überschrift H3

Fliesstext in Space Grotesk. Die Schriften kommen über Google Fonts (siehe app.html). Ein Link sieht so aus.

--font-display / --font-body

Abstände

--space-1

--space-2

--space-3

--space-4

Rahmen & Schatten

--border

--shadow

--shadow-lift

Button

variant: primary | ghost

Field

Text Zahl

Gebundener Wert: 42

props: label, type, bind:value

Card & Stack

Card mit Titel

Eine Card ist eine Fläche mit Rahmen und Schatten. Der Inhalt wird mit einem Stack vertikal gestapelt.

ToolCard

Beispiel-Tool

Kurzbeschreibung des Tools für die Startseite.

Header

Der Header ist im Layout verankert und steht oben auf jeder Seite (die Marke «HLKS.tools»).

Bausteine zur Review vp/

Neue Bausteine aus der Tool-Migration, importiert aus $ui/vp/. Sie warten auf Colins Prüfung und wandern danach in den Hauptordner packages/ui/. Details in packages/ui/vp/README.md.

Eingabefelder — NumberField, SelectField

Volumenstrom [m³/h] Anlagentyp

Werte: 5000 · —

Gliederung — Section, SubSection

2AnlagenkennwerteSIA 382/1 · 5.11

Gewählte Regulierung & Widerstände

Kennwerte — Metric

Volumenstrom

1.3889m³/s

Abweichung

-42W

unter Grenzwert

Hinweisbanner — StatusBanner

Kennzahlen — KpiGrid, KpiCard

Grenzwert

1250W/(m³/s)

Zielwert (80 %)

1000W/(m³/s)

Effektiver SFP-Wert

1208W/(m³/s)

-42 vs. Grenzwert

ToolLayout und ToolHeader zeigen sich am besten im Referenz-Tool.