Inputs — the floating label and the violet halo

Text input — five states

The bold 14px label sits absolutely at 12px / 12px and the value is padded 28px 12px 12px, so label and value never collide. Placeholders drop to 14px --color-body-secondary; the value itself is --color-hovered.

Textarea — TextField.vue

Min-height 120px, same 8px radius and fill. In production it auto-resizes on input and the halo is applied to the wrapper via :focus-within, so the label glows with the field.

Checkbox — two variants

Default: 24px box, 2px #1B0D4E border brightening to --color-action on hover. Secondary is the chip form used for service selection — a 16px box seated in a #0F0F15 pill with an 8px corner (--radius-control, rounded-lg in source). The tick scales 0 → 1 on both hover and check.

The 24px box takes --radius-control (8px), the same corner as every other input. It used to take 4px, and that was nobody's decision: Checkbox.vue's scoped style asked for --radius-sm, the site declared no such name, and the box fell through to Tailwind's default 0.25rem. Fixed on both sides on 2026-08-20 — this package renamed its colliding radii to --radius-control and --radius-tile, and the site now declares --radius-control: 0.5rem in its own :root rather than inheriting a name it never defined (CCWEB2-313).

The 16px box takes --radius-control-sm (4px), and the corner cannot be size-independent. Half of 16 is 8, so the 8px control corner on the small box renders a perfect circle — a radio button for a pick-any control. Checkbox.vue keys this off a data-size attribute rather than a utility class, so it survives outside a Tailwind build. Note this variant is currently unreachable on the live site: Checkbox.vue types variant?: 'primary' and its case 'secondary' branch is dead code no caller passes, so the only checkboxes that render are the contact form's two 24px ones. The specimen stays because the branch is still in source.

Assembled — the consultation form

Field-for-field from src/components/common/forms/ContactUsForm.vue: e-mail is the only required field, name and company sit side by side above xl, then service chips, budget radios, the free-text brief, and two consent checkboxes. The submit is the glow button — in the real page this section is its own viewport, so the glow here is the single primary for the form, not a second copy of the hero CTA.