4.1 KiB
Control Panel Design Language
Overall Structure
The control panel uses a clear engineering-dashboard layout. Screens are divided into large functional regions, not decorative sections. A detail screen should usually split into:
- a left information column
- a right controls column
- stacked status/log panels when more than one information region is needed
Panels should align their titles with their primary content. If a title describes a card grid, align the title with the grid's left edge. If a title describes a log window, align it with the log window's left edge.
Do not use decorative icons beside section titles. Titles should read as labels for the content region, not as illustrated headers.
Color System
Use a restrained white-and-gray base with small semantic accents.
- Page background:
#F4F6F8 - Main panel background:
#FFFFFF - Normal card background:
#FFFFFF - Main panel border:
#C9D1D9 - Inner card border:
#D5DDE5 - Primary text:
#17202A - Secondary text:
#52616F - Muted text:
#7B8794
Semantic colors:
- Primary blue:
#2F80ED - Primary blue fill:
#F3F8FF - Soft blue control fill:
#E8F1FF - Success green:
#31A66A - Success green fill:
#D9F5E5 - Warning yellow:
#D99000 - Warning yellow fill:
#FFFBED - Scrollbar track:
#E5E9EE - Scrollbar thumb:
#A4AFBA
Avoid large colored surfaces. Blue, green, and yellow are reserved for semantic accents: primary operations, connected/success states, warnings, and log categories.
Radius
Except scrollbars, all rectangular UI surfaces use one radius:
- Standard radius:
10px
This applies to main panels, status cards, operation cards, chips, log windows, and reserved areas.
Scrollbars are auxiliary controls and may keep smaller radii:
- Scrollbar track radius:
6px - Scrollbar thumb radius:
4.5px
Typography
Use straightforward system-safe typography.
- Primary UI font:
Arial, sans-serif - Log/monospace font:
Courier, monospace
Text hierarchy:
- Main section title:
22px,700,#17202A - Section description:
14px,#52616F - Operation card title:
22px,700,#17202A - Operation card description:
14px,#52616F - Status card label:
14px,600,#52616F - Status card value:
38px,700,#17202A - Log line:
15px, monospace
RuntimeHost Detail Layout
The RuntimeHost detail view is a two-column detail page.
Left column:
- top panel: runtime status summary
- bottom panel: session log
Right column:
- full-height controls panel
Runtime Status Panel
The status panel contains:
- a title and one-line description
- a bound-state chip aligned to the title row
- three horizontal status cards
Status cards use white backgrounds, gray borders, and the standard 10px radius. Each status card has three levels:
- small label
- large core value
- small semantic detail
Use semantic detail colors sparingly:
- connected/ready detail:
#31A66A - warning/detail requiring attention:
#D99000 - informational detail:
#2F80ED
Session Log Panel
The log panel contains:
- a title and one-line description
- a compact
Start / Stopcontrol on the title row - a large log window
- a slim scrollbar
The log window is white with a gray border. Log text is monospace.
Log color mapping:
- TX:
#2F80ED - RX:
#31A66A - SYS:
#7B8794
Controls Panel
The controls panel contains:
- a title and one-line description
- a regular operation-card grid
- a reserved area at the bottom for future actions
Operation cards should have consistent size, spacing, title alignment, and radius.
Operation card color mapping:
- primary operations: fill
#F3F8FF, border#2F80ED - normal query operations: fill
#FFFFFF, border#D5DDE5 - attention operations: fill
#FFFBED, border#D99000 - reserved/future area: fill
#FFFFFF, border#C9D1D9, text#52616F
Visual Rules
- Keep large surfaces white.
- Use gray borders to define structure.
- Use color only for semantics.
- Avoid gradients, decorative textures, and illustrated title icons.
- Avoid mixed corner radii in the same screen.
- Align section titles to the primary content edge.
- Keep controls in a predictable grid.
- Keep logs dense and scannable.