Design-System · Komponentenreport

Termbar Mono

Terminal-Chrome in Graustufen — vollständig interaktiver Komponentensatz

System

termbar-mono

Version

1.0.0

Assets

4 publiziert

Glyphen

Steuerbare Live-Demo — drehen Sie an den Reglern und beobachten Sie, wie die Leiste ihr Layout neu berechnet.

Shell

Pfad-Länge

Branch

Dirty

Ahead/Behind

Modus

CPU %

Speicher

Akku

Meldungen

Exit-Code

Beobachtung

Die Leiste kollabiert Segmente bei Platzmangel — beobachten Sie, wie bei sehr langen Pfaden oder kleinen Viewports die entbehrlichen Segmente (Akku, Load, Netz) zuerst verschwinden.

Metrische Festwerte des Systems — jedes Pixel ist begründet.

Dimensionen

36 px

Höhe Kopfleiste — Vier Einheiten des 9-px-Rasters; nimmt den 18-px-Inversionsblock mit 9 px Luft auf.

32 px

Höhe Fußleiste — Bewusst niedriger, der Fuß ist Zustand, nicht Ort, und darf nachrangig wirken.

12 px

Schriftgrad — Kleinste Größe, die als Monospace auf 1× noch pixelgenau sitzt.

7.2 px

Zeichenvorschub — 0.6 em. Über textLength gesperrt, damit jede Monospace gleich breit setzt.

Abstände & Raster

12 px

Innenabstand — Abstand von der Haarlinie zum ersten Atom.

8 px

Atomabstand — Zwischen Glyph, Marke und Wert; enger gesetzte Paare nutzen 5–7 px.

10 px

Haarlinien-Einrückung — Oben und unten. Die Linie trennt, berührt aber nie die Kante.

Spezielle Elemente

13 px

Glyphenfeld — Zeichnung in 12 × 12, um 1.08 skaliert — so steht der Glyph auf der Versalhöhe.

8 × 3

Tick-Meter — Acht harte Blöcke, 2 px Fuge. Auflösung 12.5% — mehr suggeriert falsche Genauigkeit.

Segment-Struktur

Ein Segment trägt höchstens drei Rollen: einen Glyphen, eine Marke und einen Messwert. Wer eine vierte braucht, braucht ein zweites Segment.

Glyph + Marke — gedämpft, konstant Messwert — Vollton, ändert sich Haarlinie und leeres Tick

Dreizehn Zeichen, alle im selben 12 × 12-Feld konstruiert, ausschließlich aus Geraden und Quadraten. Knoten sind nie rund, Kanten nie weich.

Drei Regeln, aus denen alles Übrige folgt.

Keine Farbe als Träger

Rot für Fehler funktioniert nur, solange nichts anderes rot ist. In einer Statusleiste mit neun Segmenten ist das nie lange der Fall. Termbar Mono verzichtet deshalb ganz auf Farbton und arbeitet mit sechs Graustufen.

Nebenwirkung: die Leiste bleibt bei jeder Form von Farbfehlsichtigkeit vollständig lesbar.

Inversion ist der Alarm

Was dringend ist, tauscht Schrift und Grund. Ein invertierter Block sticht stärker heraus als jeder Farbakzent, kostet keine Bedeutungsebene und funktioniert in beiden Themes identisch.

Genutzt für: Modus, Dirty-Zustand, Exit-Code ungleich null.

Haarlinien trennen, Flächen nicht

Segmente werden durch eine 1-px-Linie geschieden, oben wie unten um 10 px eingerückt. Sie trennt, ohne zu rahmen. Powerline-Pfeile, Kapseln und abgesetzte Flächen sind bewusst nicht Teil des Systems.

Der einzige durchgehende Strich ist die Außenkante zur Terminalfläche.

Status ohne Farbe

Drei Stufen, drei Gewichte. Die Leiste wird nicht bunter, sondern schwerer.

subtle

normal

strong

Die ganze Palette

Sechs Werte, gebunden an die Token von mzone-ui. Im hellen Theme dreht sich die Rampe um.

surface

hairline

muted

text

bright

KONTRAST

Messwerte stehen mit #e9edf2 auf #10161d — Verhältnis rund 15:1. Marken erreichen mit #7f8a99 rund 5:1 und liegen damit über der Schwelle für Fließtext, obwohl sie nur Beschriftung sind.

OHNE FARBE LESBAR

Kein Zustand hängt an einem Farbton. Die Leiste ist unter jeder Form von Farbfehlsichtigkeit und in Graustufendruck identisch interpretierbar.

SCHRIFTUNABHÄNGIG

Alle Textbreiten sind über textLength gesperrt. Fehlt die Wunschschrift, verschiebt sich nichts — es wird nur anders gezeichnet.

SCHIRMLESER

Die SVG-Assets tragen role="img" mit <title> und <desc>. Die Demo meldet jeden Zustandswechsel zusätzlich über eine aria-live-Zeile.

Die drei Dateien liegen als Assets im Publisher. Sie sind inert: kein Script, keine Ereignis-Attribute, keine externen Verweise.

KOPFLEISTE · 1200 × 36

Fensterzeichen, Shell, Pfad, Benutzer · Branch, Ahead/Behind, Diff, Dirty.

SVG 1200×36 Inert

<img src="/published/asset-termbar-mono-header/asset.svg" alt="Terminal-Kopfleiste">

FUSSLEISTE · 1200 × 32

Modus, CPU, Speicher, Load, Akku · Netz, Meldungen, Exit-Code, Uhr.

SVG 1200×32 Inert

<img src="/published/asset-termbar-mono-footer/asset.svg" alt="Terminal-Fußleiste">

GLYPHENSATZ · 1350 × 520

Dreizehn Zeichen im 12 × 12-Feld, als Tafel mit Namen.

SVG 1350×520 Inert

<img src="/published/asset-termbar-mono-glyphs/asset.svg" alt="Termbar-Glyphen">

Zwei Wege, ein Ergebnis

Jede Farbe steht als var(--mz-token, dark-wert). Inline in einer mzone-Seite themt die Bar mit; per <img> geladen greift der Fallback, und das Bild sieht aus wie das Artefakt, aus dem es stammt.

<!-- Als Bild: greift auf die Dark-Fallbacks zurück -->
<img src="/published/asset-termbar-mono-header/asset.svg" alt="Terminal-Kopfleiste">

<!-- Inline: erbt die Token der Seite und wechselt mit dem Theme mit -->
<svg viewBox="0 0 1200 36">
  <rect fill="var(--mz-surface, #10161d)" />
</svg>
        