lab · exploring

Controls on the raster

Buttons, inputs and form controls inside rhythm scopes: which control heights centre on a line, and what fields, headers and footers do to the count.

frameworksastro
Exploringgridbuttoninputfieldselectcard
scenarioButton ladder — auto rows

Every size side by side, top-aligned in an ordinary rhythm grid. Expect only sm (24px = 1 line) to be green; the rest are fractional boxes flush with a line.

measuring…
scenarioButton ladder — centred in line slots

The same buttons on flow="lines", each spanning the whole-line slot it fits (1·1·2·2·3 lines) and centred in it. Every button should read blue (centred) or green.

measuring…
scenarioInput ladder — centred in line slots

Inputs follow the same Control Var Contract as buttons, so the same slot placement should centre them.

measuring…
scenarioA stacked form in a rhythm card

Field + Input, Select, Textarea, a checkbox and a radio pair, with actions in the footer. The card should stay whole; each control shows whether the field layout lands it centred on a line or not.

measuring…

Invite a teammate

They'll get an email

We'll send the invite here.

  • Admin

  • Editor

  • Viewer

scenarioHorizontal fields

Label beside control. Each row's height is set by the control (32px md), so rows stack in fractional lines unless something rounds them.

measuring…

Profile

Shown publicly.

  • Admin

  • Editor

  • Viewer

scenarioControls in banner and card headers

A search Group in a rhythm banner's trailing slot, and header actions in cards. The banner's text rows are quantised; its trailing control is not — does the banner's height stay whole?

measuring…

Projects

12 active · 3 archived

Header action · sm

Press ⌘ K to search. Beta

Header action · md

Press ⌘ K to search. Beta

scenarioSegmented choices

Button-appearance radios and checkboxes (still on the legacy controlSlots sizing) in a rhythm card, next to a regular button row.

measuring…

Environment