Controls canon

The transactional controls — fields, OTP, slots, notices. Warp discipline: controls stay CRISP (a warped frame reads as a highlight, not a text box). The only in-control warp is .err — a deliberate callout. Selection/focus show by the blue-structure pole + rings, not a warp. Rendered from the real primitive.

Fields — .field / .inp (crisp; focus tints; .err warps)

Input rides transparent above a crisp bordered .inp::before. Focus-within → border tints to primary + ring. .inp.err is the sanctioned callout warp.

Your email

Message

Focus state

Error — the ONLY control warpEnter a valid email address.

OTP — segmented code entry (passwordless email OTP)

Crisp boxes (controls don't warp) · focus tints to primary · .otp.err tints red. Flow: email → 6-digit code → verify.

.otp — default / filling

.otp.err — wrong code

Slots — selectable time grid (crisp; selected = blue-structure pole)

Each slot a crisp control. Selected rides the blue-structure pole (red ground / blue dots) + a bracket-weight bump — never a warp. Toggle via [aria-pressed].

Notice — inline state banner (composes .edge; pole by intent)

ok = default blue-structure .edge · danger = + .danger · info = + .edge--inv. The dot carries the semantic colour.

Check your emailWe sent a 6-digit code to juergen@example.com — enter it to confirm.

Code expiredThat code is no longer valid. Request a fresh one to continue.

Heads upThis time was just taken — pick another open slot.

keep all · crisp controls + .err warp + pole-by-intent notice