Purpose
Standalone Form component design reference. Not a page — a spec artefact in DevHub that every form-bearing template (checkout, contact, my-account, product configurator) inherits from. Approved once; downstream mockups reuse patterns verbatim.
Structure: three worked examples showing form components in real ARTSABERS contexts, followed by a compact states appendix for edge cases the worked examples don’t fully cover.
Direction
Kyber Hull — apply the direction from SAS1. Carbon / void / charcoal grounds; warm orange ember forge accent on CTAs, focus rings, and required indicators; warm off-white body text; heading font on labels + display copy, body font on prose + input text; zero border-radius sitewide.
Page background follows the pattern locked on the shop archive (MAS51): CSS gradient + subtle horizontal panel-joint hairlines every ~240px + warm ember bloom in the top-left corner. No photographic imagery.
Overall layout
- Compact reference header — eyebrow “ARTSABERS · FORM COMPONENT SPEC · V1”, display H1 “Form Patterns”, one-line description of what this doc is. ~200px tall, no full site chrome.
- Three worked examples in order (Checkout Billing → Contact Form → My Account Edit Profile), separated by ember panel-seam hairlines.
- Compact states appendix at the bottom, one row per component with side-by-side state variants.
- Small footer noting the SAS1 styleguide version this spec pairs with.
Worked Example 1 — Checkout Billing + Shipping Address
Section heading: “Billing Address”. Below that, a “Shipping Address” section with a checkbox at the top “Ship to a different address” (unchecked → collapses; checked → expands the mirror address group).
Fields shown in the billing block:
- Two-column: First name / Last name — text inputs, both required
- Full-width: Email address — text input, required, help text “For order updates + delivery ETAs”
- Full-width: Phone — text input, required (courier needs it)
- Full-width: Country/Region — searchable select with flag icons on the left of each option (dropdown shown open in one state variant so the pattern reads)
- Full-width: Address line 1 — text input, required
- Full-width: Address line 2 — text input, optional (marked with “OPTIONAL” label)
- Three-column: Town / City — Postcode — State/Province (auto-swaps to State picker if US, hides if country doesn’t use one)
- Full-width: Order notes — textarea (~4 rows), optional, help text “Delivery instructions, buzzer code, etc.”
Patterns demonstrated: section heading, fieldset grouping, required indicator (small ember asterisk), optional indicator (uppercase muted label), two-column split, three-column split, help text, country picker with search + flags, conditional field (state auto-swap), textarea, address group as a reusable pattern.
Copy locks: section labels (“Billing Address” / “Shipping Address”), the “Ship to a different address” toggle text, help text strings as above.
Worked Example 2 — Contact Form
Section heading: “Get in Touch”. Compact form suitable for the future Contact page.
Fields shown:
- Two-column: First name / Last name — text inputs, required
- Full-width: Email — text input, required
- Full-width: Subject — text input, required, character counter shown (X / 100)
- Full-width: How can we help? — select dropdown (Order support / Product question / Wholesale enquiry / Warranty claim / Other) — required
- Full-width: Message — textarea (~6 rows), required, character counter (X / 2000)
- Checkbox: “Subscribe to occasional updates about new hilts and offers” — optional, off by default
- Submit row: primary CTA “Send Message” (ember gradient, right-aligned) + secondary link “Reset form” (left-aligned, muted)
Patterns demonstrated: select dropdown (closed state), character counter, checkbox (default unchecked), primary + secondary action pair, form validation summary would appear here in the states appendix.
Copy locks: “Get in Touch” section heading, “Send Message” CTA, “Reset form” secondary link, help texts and enum labels as above.
Worked Example 3 — My Account Edit Profile
Section heading: “Account Details”. Pre-filled form showing the “filled state” pattern for existing values, with a Password section that uses show/hide.
Fields shown:
- Two-column: First name / Last name — pre-filled with example values
- Full-width: Display name — text input, pre-filled, help text “How your name appears on reviews you leave”
- Full-width: Email — text input, pre-filled, help text “Used for order updates + account login”
- Section divider (subtle ember hairline)
- Section heading: “Change Password”
- Full-width: Current password — password input with show/hide eye icon toggle
- Full-width: New password — password input with show/hide + strength meter below
- Full-width: Confirm new password — password input with show/hide
- Section divider
- Section heading: “Preferences”
- Checkbox group (vertical): “Product launch emails” (checked) / “Restock alerts for wishlisted items” (checked) / “Occasional community + duelling event updates” (unchecked)
- Radio group: “Newsletter frequency” — Weekly / Monthly (selected) / Only for major drops
- Submit row: primary “Save Changes” (ember, disabled until form dirty — show in states appendix) + secondary “Cancel” (left-aligned, muted)
Patterns demonstrated: filled state, section divider, password input with show/hide + strength meter, vertical checkbox group, radio group (with one selected), primary + secondary action, disabled-until-dirty submit (shown in states appendix as the disabled state).
States Appendix
Compact reference block at the bottom of the page. One row per component group, side-by-side state variants labelled beneath each. Purpose: cover every state the worked examples don’t naturally show.
Rows:
- Text input states — six variants side by side: Default (empty, label above) · Focus (ember hairline glow border) · Filled (has value, no focus) · Error (forge-red hairline border + inline error message below “Please enter a valid email address”) · Disabled (muted, hatched or greyed) · Success (subtle ember tick to the right of the input)
- Select states — four variants: Default (closed, placeholder) · Open (dropdown shown with 5 options, hover on option 3) · Selected (has a value) · Error
- Checkbox / radio states — Default unchecked · Checked (ember tick / ember dot) · Focus (ember ring) · Disabled · Indeterminate (checkbox only, for parent-of-group patterns)
- Button states — Primary default (ember gradient) · Primary hover (brighter ember + subtle glow) · Primary loading (spinner + label “Sending…”) · Primary disabled (muted) · Secondary default (transparent + ember hairline underline) · Secondary hover
- Quantity stepper — Default (value 1 with − and + buttons) · Focus on input · At minimum (− disabled) · At maximum (+ disabled)
- Feedback strings — Required indicator (small ember asterisk after label) · Optional indicator (uppercase muted “OPTIONAL” tag after label) · Help text (small muted body font below input) · Character counter (right-aligned muted, e.g. “42 / 100”) · Inline error (small forge-red text below input with a small warning icon) · Success message (small ember text with tick icon)
Kyber Hull form styling notes
- Input background: dark hull-panel-lift tone (subtle elevation off the section ground). No hard border on default; hairline only at bottom or full outline in chrome-dim.
- Input focus: ember hairline border (all sides) + subtle ember box-shadow glow. NOT a big blue ring — Kyber Hull uses ember for focus.
- Input error: forge-red hairline border + inline error text below in matching red. If SAS1 doesn’t define a forge-red token, propose one (see gap flag below).
- Labels: heading font, uppercase, 0.16em letter-spacing, chrome-warm colour, sit ABOVE inputs (not placeholder-only). Placeholders exist inside inputs as ghost text in chrome-dim.
- Required indicator: small ember asterisk to the right of the label, ~0.7em size.
- Buttons: primary uses the same ember gradient as the shop archive’s in-grid banner CTA (bright ember-glow → ember → ember-deep). Secondary is transparent with an ember hairline underline (matches the shop archive “View Saber →” CTA pattern from the product card).
- Zero border-radius everywhere — inputs, buttons, selects, checkboxes are all rectangles per the Kyber Hull discipline.
Flag for operator confirmation
- Kyber Hull SAS1 has ember for accents but may not define an error / forge-red token. If it doesn’t, this spec proposes adding one (a warm red-orange in the ember family, distinguishable but tonally consistent). If SAS1 already has an error token, use it verbatim.
- Copy strings on the worked examples are proposed defaults — flag any you want to lock differently before the mockup is authored.