Untitled Design System
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
Surface
Text
Accent & Semantic
On-Accent
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.
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.
Components
Buttons
Cards
Card Title
Sample body text for the card component.
Inputs
default
default
Do's & Don'ts
Do
Don't
Layout
### Spacing System
The spacing scale uses tight, compact values optimized for data-dense interfaces:
| Token | Value | Use Case |
|---|---|---|
| xs | 2px | Micro-separations between inline elements |
| sm | 4px | Tight gaps in button groups, badge clusters |
| md | 8px | Table cell padding, label-to-value spacing |
| base | 12px | Standard component internal padding |
| lg | 16px | Card padding, row spacing in tables |
| xl | 24px | Section gaps, panel margins |
| xxl | 32px | Major section dividers |
| section | 64px | Page-level section separation |
### Grid & Container
• Max content width: 1440px centered on desktop. Wider screens absorb extra
space as margin — the UI never stretches to fill.
• Dashboard grid: 3-column layout at ≥1280px, 2-column at ≥768px, single
column below 768px.
• Sidebar: Fixed 240px left navigation on desktop, collapses to a hamburger
icon below 1024px.
• Query bar: Full-width input spanning the content area with a fixed-height
48px toolbar above it.
### Whitespace Philosophy
Whitespace is compressed but never cramped. CtrlB prioritizes information
density — users are here to scan thousands of log lines and trace spans, not to
breathe. Padding inside cards is tight (16px), table rows are compact (36px
height), and gaps between elements are minimal. The result feels like a terminal:
maximum signal, minimum noise.
Shapes
### Corner Radius
| Token | Value | Use Case |
|---|---|---|
| none | 0px | Table cells, code blocks, raw data panels |
| sm | 4px | Buttons, input fields, small badges |
| md | 6px | Cards, panels, modal containers |
| lg | 8px | Large dialog containers, overlay panels |
| full | 9999px | Pill badges, severity indicators, toggle states |
### Shape Principles
• Minimal rounding. The maximum radius is 6px on standard components. This
reinforces the terminal-native, no-nonsense aesthetic.
• Pill badges. Severity indicators (ERROR, WARN, INFO) and status pills use
full rounding for instant recognition.
• Sharp code blocks. Raw JSON, SQL queries, and log output are always rendered
with none (0px) radius — they are data, not containers.
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