Atoms
Every button, pill, indicator, toggle, and range primitive applied here uses the same class names handlers and widgets reach for. Sources: css/atoms/button.css + pill.css for the global stamps; js/widgets/_base/widget-base-styles.js and js/handlers/widget/widget-bar.css for the widget-button family that lives with its surface.
Buttons
.widget-btn — green stamped chip, the workhorse
The primary affordance inside every widget bar (Tare, Start, Ignite, Launch…). Green-success fill with a 2 px hard-offset shadow, scaled down on press. Four state modifiers cover the patterns: .active is an explicit alias of the default green for toggles that flip an engaged state; .inactive is the cream-ghost "not currently selected" option in a radio group; .off is the dark-ink "currently off" state of a binary on/off master toggle (pairs with .active as the on state — label text carries the literal "OFF" / "ON"); :disabled mutes to a faded outline. Sample below renders the live .wb-btn (light-DOM mirror); shadow-DOM .widget-btn is visually identical and used inside <lab-widget-*> custom elements.
.btn-primary-dark — Space Grotesk black stamp
Heavy primary CTA used for destructive confirms and the prominent "Unpause" action. Space Grotesk 700, 18 px, hard 3 px shadow.
.btn-step-continue — yellow Continue stamp
Surfaced by the step bar when a ui: button step needs an explicit Continue. The .unpause variant flips to a black stamp during settle pauses.
.btn-completion-* — completion screen
Primary green + white outlined secondary. Stacked horizontally inside the success card.
.zoom-in-btn — floating yellow stamp
Auto-appearing zoom-in trigger. Visible while a camera_preset step is loaded. .active flips to a black stamp once the student has zoomed in.
.modal-btn-* — modal actions
Primary green for affirmative confirms, .danger black stamp for destructive ones, white outline for cancel.
Pills & stamps