# 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.