Bento-Grids
Räumliche Dashboard-Organisation: Kartengröße kodiert Wichtigkeit. Das Auge findet Revision/capability vor jedem Label.
Designkonzept
Graphite Aurora — eine alternative RAGRAF-Oberfläche
Die Sicht eines Senior UI/UX-Entwicklers auf das Produkt-Interface 2026: dasselbe Panel, dieselben Informationen, andere visuelle Grammatik. A/B umschalten — beide Konzepte rendern dasselbe Dashboard mit echten Pilotzahlen.
Korpus-Status
REVISION
rev-0016
ready · joern_used=1 · 71 s
GRAPH
487 nodes
7 292 edges · stated 91% / derived 9%
QUALITÄT
457 chunks
max 5 543 / 8 000 tok · over-budget 0
norms 0.058–0.663 · zeros 0
AGENTEN-SITZUNG
46 Aufrufe
write_check 14 · errors 0 · full-reads 0
~5.200 Token gespart
LATENZEN
- schema0.5 ms
- symbol0.7 ms
- write_check3.3 ms
- search~1 s
FRISCHE
drift 0
Korpus stimmt mit Revision überein · guard: OK
capability=full · slice OK · embedding fastembed-cpu
Dasselbe DOM und dieselben rev-0016-Pilotdaten — zwei visuelle Grammatiken. Schalten Sie den Korpus-Status auf degraded: In Konzept B ändert das Ambient-Signal die Glow-Farbe, in A nur das Text-Badge (Trend „Status peripher wahrnehmen").
Acht 2026er-Trends, auf das Produkt angewandt
Ambient-Signale statt Banner
Der Korpus-Status (full/degraded/drift) lebt im Rahmen-Glow und Aurora-Hintergrund — Status wird peripher wahrgenommen, ohne von Zahlen abzulenken.
Expressive Typografie
Paarung „enges Grotesk mit negativem Tracking für Titel + Monospace für Daten". Zahlen sind First-Class: tabular-nums, optische Ausrichtung.
Ruhige Bewegung
150–220 ms, ease-out, nur sinnvoll: Zustandsübergänge statt Dekoration. Volle Beachtung von prefers-reduced-motion — Daten ohne Animation zugänglich.
Command-Palette-Muster
Ein Ingenieurs-Werkzeug muss ⌘K unterstützen: Die 22 Operationen sind 22 Palette-Befehle mit Argumenten. Maus zweite Klasse, Tastatur erste.
Kontrast als Feature
Mindestens WCAG AA, AAA für Daten: Zahlenbeschriftungen ≥ 7:1. Fokusringe auf beiden Hintergründen sichtbar. Statusfarbe wird durch Icon und Text gedoppelt — nie Farbe allein.
Echtes Dunkel (OLED-bewusst)
Dunkel ist keine Inversion: eigene Tiefen-Tokens (#0A0C0B statt reinem Schwarz), gedämpfte Primary-Glows, Blur nur für schwebende Ebenen.
Data-Ink-Minimalismus
Sparklines statt schwerer Charts, Zahlen größer als Überschriften, null dekorative Achsen und Legenden. Jede Einheit Tinte handelt von Daten.
Tokens: A gegen B
Konzept B ist keine Umlackierung: es ist ein anderes Prioritätensystem. Daten lauter als Überschriften, Status ohne Lesen erfassbar, Beschriftungskontrast über der Norm.
| token | A · Graphite Terminal | B · Graphite Aurora | warum |
|---|---|---|---|
| background | #09090B (zinc-950) | #0A0C0B + aurora 8% | Bs Hintergrund ist 2° wärmer und trägt ein kaum wahrnehmbares Status-Glühen |
| primary | #34D399 (emerald-400) | #3EE6A8 → #2DD4BF градиент | B: Akzent ist ein „Aurora"-Verlauf, nur auf aktiven Elementen |
| foreground | #FAFAFA | #F4F7F5 | B ist etwas kühler: weniger Ermüdung bei langen Zahlen-Lesesitzungen |
| muted-foreground | #71717A (5.2:1) | #8B948F (7.1:1) | B hebt Datenbeschriftungen auf AAA-Kontrast |
| radius | 8/12 px | 12/18/24 px (bento) | B: große Kartenradien wirken wie „eigenständige Instrumente" |
| type scale | 13/14/16 px mono-led | 44/28/16/13 display+mono | B: 44px Tabular-Zahlen-Titel, 11px Uppercase-+0,14em-Beschriftungen |
| motion | мгновенно | 180 мс cubic-bezier(.22,1,.36,1) | B: die eine Signatur-Easing-Kurve des Produkts; alles andere — 150 ms |
| depth | border 1px | border + inner glow + blur-слои | B: Tiefe ohne „schmutzige" Schatten — 1px Inner-Glow über dem Rahmen |
Komponenten in Konzept B
full
degraded
fast_reindex_threshold0.05
Einstellungen gespeichert · .bak
Buttons tragen Inner-Glow statt flacher Füllung; Status-Badges doppeln Farbe mit einem Glyph; der Toast ist eine „Glas"-Ebene mit Blur. Alles reines Token-CSS, ohne Bilder.
Responsivität: 320 → 2560+
320 px
768 px
2560 px
Das Bento-Grid von Konzept B kollabiert deterministisch: 6 Karten → 2 Spalten → 1, Reihenfolge-Priorität bleibt (Revision und Frische auf jedem Screen above the fold). Auf Ultrabreit — max. 1600px Inhalt und größere Abstände statt gestreckter Karten.
Das Designer-Fazit
Konzept A ist ein ehrliches Ingenieurs-Terminal: passend für v0.1 und günstig im Unterhalt. Konzept B sollte schrittweise kommen, nicht als Komplett-Redesign: zuerst Ambient-Statussignale und Tabular-Zahlen (minimaler Preis, maximaler Effekt), dann das Bento-Katalog-Layout, zuletzt die Aurora-Ästhetik als Markenschicht. Wichtigste Regel: Keine Zahl darf für Schönheit schlechter lesbar werden.