Transcribed from source_examples/common/InputText.vue,
TextField.vue and Checkbox.vue. Text inputs are 64px tall with an
8px radius — one of only two small radii the system permits — and focus draws a halo rather
than an outline. Every field below is live: click, type, hover, and tab through them.
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.
TextField.vueMin-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.
Default: 24px box, 8px radius, 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. The tick scales 0 → 1 on
both hover and check. The chip box takes a 4px corner rather than the 8px the default
carries, which is what the site renders: Checkbox.vue asks for
--radius-sm, the site's @theme never declares one, so it falls
through to Tailwind's default 4px. This system's own --radius-sm is 8px, and
8px on a 16px box is half its side — a circle, which reads as a radio, as pick-one when
the chips are pick-any. The number is pinned here so the specimen matches the site.
Field-for-field from source_examples/homepage/contacts-form.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.