Panel
.panelLorem ipsum dolor sit amet, consectetur adipiscing elit.
Living reference
Shared layout and control roles
Actions use buttons; chips communicate compact state or metadata. Segmented choices are either full-row Fill or content-sized Comfortable, and every non-fill segmented toggle uses Comfortable spacing.
Structure
Panels, cards, and hierarchy
.panel · .control-card · .control-subsection · .control-row
Control card
.control-cardABC
Card heading
One outlined card owns a feature. Nested organization uses unboxed subsections rather than cards inside cards.
Control subsection
.control-subsection · .control-subsection-headingSubgroup title
Subsections organize a card without adding another outline.
Bezel mark editor
.bezel-mark-editor · .bezel-style-category · .bezel-style-groupGrid
Label
Type
Hand / Bezel matrix
.layout-visibility-header · .layout-visibility-row
Hand
Bezel
Hour
Minute
Second
Feature card + subsection
.control-card · .control-subsection · .control-rowDrive
Hour
Keep time
Driven element
Hand
Source lane
Source element
Ratio
:
Direction
Placeholder card
.control-card.placeholder · .placeholder-badgeFuture mechanism
Disabled future-work controls retain the active theme while the complete panel is attenuated by --placeholder-opacity.
Inspector splitter
.inspector-resize-handle
Clock area
Inspector
Settings section
.clock-settings-section · .settings-section-headingSection title
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Type
Typography and readouts
.eyebrow · .tagline · .readout-row
Eyebrow
.eyebrowABC XYZ
Tagline
.taglineLorem ipsum dolor sit amet, consectetur adipiscing elit.
Readout
.readout-row · .readout-labelABC
Emphasized readout
.readout-row.emphasizedXYZ
Actions
Buttons, state chips, and icon controls
.primary-button · .secondary-button · .chip · .toolbar-icon-button
Primary button
.primary-buttonSecondary button
.secondary-buttonNavigation action
Go to release
.secondary-button · .header-action-buttonText button
.text-buttonState chip (non-action)
ABC
.chip · .version-chipIcon button
.toolbar-icon-buttonInfo button
.toolbar-icon-button · .title-info-buttonLive status
ABC
.live-chip · .live-dotSelection
Segmented toggles and switches
.segmented-toggle · .toggle-switch
Fill, two states
.segmented-toggle .segmented-toggle--fill .segmented-toggle--2Fill, four states
.segmented-toggle .segmented-toggle--fill .segmented-toggle--4Comfortable, two states
.segmented-toggle .segmented-toggle--comfortable .segmented-toggle--2Comfortable, three states
.segmented-toggle .segmented-toggle--comfortable .segmented-toggle--3Switch
.toggle-switch · .toggle-track · .toggle-thumbLabeled option
.option-toggle · .toggle-switchFields
Inputs, dropdowns, search, and sliders
.compact-field · .settings-field · .preset-picker-field · .style-slider-row
Compact dropdown
.compact-fieldSettings field
.settings-fieldSearch field
.preset-picker-fieldSelect row
.style-select-rowSlider row
.style-slider-rowCompact checkbox
.compact-checkboxComposition
Rows and grouped actions
.button-row · .preset-action-row · .layout-element-control
Button row
.button-rowEqual action row
.preset-action-rowLayout element control
.layout-element-controlABC
Overlay
Dialog anatomy
.modal · .modal-heading · .modal-body · .modal-actions
ABC
Dialog title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus.
Tokens
Layout and color variables
:root custom properties
--panel-card-padding14px--panel-card-gap10px--panel-stack-gap10px--panel-subgroup-gap8px--panel-row-gap7px--segmented-padding3px--segmented-gap3px--segmented-label-padding-x5px--segmented-label-padding-x-comfortable9px--segmented-min-height25px--segmented-min-height-comfortable29px--page--panel--card--input--text--muted--border--accent--secondary--clock-hour-hand--clock-minute-hand--clock-second-hand