149 lines
4.1 KiB
Markdown
149 lines
4.1 KiB
Markdown
# 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 / Stop` control 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.
|