Bento grids
Spatial dashboard organization: card size encodes metric importance. The eye finds revision/capability before reading any labels.
Design concept
Graphite Aurora — an alternative RAGRAF interface
A Senior UI/UX developer's take on the product interface in 2026: same panel, same information, different visual grammar. Toggle A/B — both concepts render the same dashboard on real pilot numbers.
Corpus state
REVISION
rev-0016
ready · joern_used=1 · 71 s
GRAPH
487 nodes
7 292 edges · stated 91% / derived 9%
QUALITY
457 chunks
max 5 543 / 8 000 tok · over-budget 0
norms 0.058–0.663 · zeros 0
AGENT SESSION
46 calls
write_check 14 · errors 0 · full-reads 0
~5,200 tokens saved
LATENCIES
- schema0.5 ms
- symbol0.7 ms
- write_check3.3 ms
- search~1 s
FRESHNESS
drift 0
corpus matches the revision · guard: OK
capability=full · slice OK · embedding fastembed-cpu
The same DOM and the same rev-0016 pilot data — two visual grammars. Switch the corpus state to degraded: in concept B the ambient signal changes the glow color, in A only the text badge changes (illustrating the "status by peripheral vision" trend).
Eight 2026 trends applied to the product
Ambient signals instead of banners
Corpus state (full/degraded/drift) lives in the border glow and aurora backdrop — status is perceived peripherally without distracting from the numbers.
Expressive typography
A pairing of "tight grotesque with negative tracking for headings + monospace for data". Numbers are a first-class citizen: tabular-nums, optical alignment.
Calm motion
150–220 ms, ease-out, meaningful only: state transitions, not decoration. Full respect for prefers-reduced-motion — data is accessible without animation.
Command-palette pattern
An engineer's tool must support ⌘K: the 22 operations are 22 palette commands with arguments. Mouse is second class, keyboard first.
Contrast as a feature
WCAG AA minimum, AAA for data: number labels ≥ 7:1. Focus rings visible on both backdrops. State color is duplicated by icon and text — never color alone.
True dark (OLED-aware)
Dark theme is not inversion: separate depth tokens (#0A0C0B instead of pure black), softened primary glows, blur only on floating layers.
Data-ink minimalism
Sparklines instead of heavy charts, numbers larger than headings, zero decorative axes and legends. Every unit of ink is about data.
Tokens: A vs B
Concept B is not a repaint: it is a different priority system. Data is louder than headings, state is read without reading, label contrast exceeds the norm.
| token | A · Graphite Terminal | B · Graphite Aurora | why |
|---|---|---|---|
| background | #09090B (zinc-950) | #0A0C0B + aurora 8% | B's background is 2° warmer and carries a barely perceptible state glow |
| primary | #34D399 (emerald-400) | #3EE6A8 → #2DD4BF градиент | B: the accent is an "aurora" gradient, used only on active elements |
| foreground | #FAFAFA | #F4F7F5 | B is slightly cooler: less fatigue during long number-reading sessions |
| muted-foreground | #71717A (5.2:1) | #8B948F (7.1:1) | B raises data labels to AAA contrast |
| radius | 8/12 px | 12/18/24 px (bento) | B: large card radii read as "separate instruments" |
| type scale | 13/14/16 px mono-led | 44/28/16/13 display+mono | B: 44px tabular number-headlines, 11px uppercase +0.14em labels |
| motion | мгновенно | 180 мс cubic-bezier(.22,1,.36,1) | B: the single signature easing curve of the product; everything else — 150 ms |
| depth | border 1px | border + inner glow + blur-слои | B: depth without "dirty" shadows — a 1px inner glow over the border |
Components in concept B
full
degraded
fast_reindex_threshold0.05
Settings saved · .bak
Buttons carry an inner glow instead of flat fill; state badges duplicate color with a glyph; the toast is a blurred "glass" layer. Everything is pure token-driven CSS, no images.
Responsiveness: 320 → 2560+
320 px
768 px
2560 px
Concept B's bento grid collapses deterministically: 6 cards → 2 columns → 1, with order priority preserved (revision and freshness above the fold on every screen). On ultra-wide — a 1600px content cap and larger gaps instead of stretched cards.
The designer's verdict
Concept A is an honest engineering terminal: appropriate for v0.1 and cheap to maintain. Concept B should be adopted incrementally, not as a full redesign: first ambient state signals and tabular numbers (minimal cost, maximal effect for operators), then the bento catalog layout, and only last the aurora aesthetic as a brand layer. The main transition rule: no number may become less readable for the sake of beauty.