diff --git a/DESIGN.md b/DESIGN.md
new file mode 100644
index 0000000..0be99e8
--- /dev/null
+++ b/DESIGN.md
@@ -0,0 +1,148 @@
+# 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.
diff --git a/docs/runtime_host_status_detail.svg b/docs/runtime_host_status_detail.svg
new file mode 100644
index 0000000..3d8c188
--- /dev/null
+++ b/docs/runtime_host_status_detail.svg
@@ -0,0 +1,168 @@
+
diff --git a/docs/wireframes/control-panel-main-wireframe.svg b/docs/wireframes/control-panel-main-wireframe.svg
index c2a6794..514eb58 100644
--- a/docs/wireframes/control-panel-main-wireframe.svg
+++ b/docs/wireframes/control-panel-main-wireframe.svg
@@ -1,175 +1,170 @@
-