Form Inputs

The minimal treatment — a single hairline under the field, no fill, no surrounding box. Maximum paper; minimum chrome. Focus swaps the hairline from --hair-control to --green and bumps its weight 1→2 px. Best for clean forms where the form itself is quiet and the page chrome is loud; weakest where users need strong affordance ("this is editable") at a glance.

A raised field with a 1 px --hair-control border and 4 px radius. Most familiar — a textbook form control. Focus swaps border + adds a 2 px --green ring outside the box. Error swaps border to --err and shows icon+text below. Best general-purpose choice; trades the engraved-paper minimalism of A for unambiguous affordance.

A boxed field with a JetBrains-Mono eyebrow label sitting inside the top edge — "CASE NAME", "REPORTER", etc. The label is part of the field's frame, not above it; required fields get a red * in the eyebrow. Strongest signal that "this is a labeled form field"; uses more vertical space and trades visual lightness for affordance density. Good for dense, vertical-stacked forms.

A field set inside a --sunken surface, with the input itself on --paper + 1px inset hairline. The form "carves into" the page — most paper-native of the four. Wraps all three controls in a single sunken region with a top-level eyebrow label. Best where the form is part of a larger block of sunken content (a settings card, an integration panel); risks looking "embedded" when the field should feel like a free-standing input.