Panel
A Panel is a simple surface container used to create visual sections inside an interface.
Overview
A surface panel with outer and inner borders.
When to use
- To group related content inside a larger container such as a Window.
- To visually separate sections within a layout (e.g. summary cards, item rows).
When not to use
- As a top-level container — use Window instead.
- For interactive or clickable areas — use Button or a dedicated interactive component.
Anatomy
- Outer border: 1px solid
--panel-border-outer. - Inner border: 1px inset box-shadow using
--panel-border-inner. - Background: Filled with
--color-accent-primary.
Props
Token mapping
| Property | Token |
|---|---|
| background | --color-accent-primary |
| outer border | --panel-border-outer |
| inner border | --panel-border-inner |
Changelog
| Date | Change |
|---|---|
| 2026-03-22 | Added inner border (1px inset box-shadow) to Panel; SummaryCard now composes Panel instead of duplicating styles |
| 2026-03-22 | Initial component created |