CtrlBDESIGN.md alpha
A dark-first, terminal-native observability interface built for engineers who need sub-second answers at petabyte scale. The UI channels the authority of a CLI and the density of a data dashboard — monospace type, high-contrast neutrals, and a single electric-cyan accent that fires only on interactive elements. Every pixel serves query speed, log density, or trace clarity.
Color Palette
Typography
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Corner Radius
Spacing
Base: 2pxA dark-first, terminal-native observability interface built for engineers who need sub-second answers at petabyte scale. The UI channels the authority of a CLI and the density of a data dashboard — monospace type, high-contrast neutrals, and a single electric-cyan accent that fires only on interactive elements. Every pixel serves query speed, log density, or trace clarity.
Components
Buttons
Cards
Card Title
Sample body text for the card component.
Inputs
default
default
Do's & Don'ts
Do
Don't
Responsive Behavior
| Name | Width | Key Changes |
|---|---|---|
| Desktop | ≥1280px | Full sidebar (240px), 3-column dashboard grid, query bar full-width |
| Tablet | 768–1279px | Collapsed sidebar (64px icon-only), 2-column dashboard grid |
| Mobile | <768px | Hamburger nav, single-column layout, table rows stack vertically |
### Touch Targets
• Primary CTAs ≥ 44 × 44px minimum touch target (WCAG AAA compliant).
• Table row click targets ≥ 36px height.
• Sidebar nav items ≥ 40px height when collapsed to icons.
### Collapsing Strategy
• Sidebar transitions: full-width (240px) → icon-only (64px) → hamburger menu.
• Dashboard grid drops from 3 → 2 → 1 columns at breakpoints 1280px and 768px.
• Log table switches to card-based stacked layout below 768px.
• Query bar input maintains full width; toolbar buttons collapse to overflow menu.
Known Gaps
• Dark mode is not a variant. The UI is dark-only. A light mode is not in scope.
• Animation and transition timings are not defined. Hover states, focus rings,
and panel transitions should use standard CSS defaults (150–200ms ease) unless
otherwise specified.
• Empty states are not extracted. No design exists for empty log views, no-query
results, or disconnected agent states.
• Print styles are out of scope. The UI is designed for screen-only consumption.
• Icon system is not defined. Icon selection (Feather, Lucide, custom) and
sizing conventions are deferred to implementation.
Use with MCP
Don't have the MCP? Install it here