01 / Shared DNA

Forms system atlas

Canonical board-first form patterns for contact, booking, quotes, search, uploads, auth, billing, compliance, supplier operations, roster workflows, support, and checkout. Interactive demos only; no production submissions are wired.

Production answer

Forms system atlas is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.

Primary CTAReview Forms system atlas states
Generative search brief

Forms system atlas: Canonical board-first form patterns for contact, booking, quotes, search, uploads, auth, billing, compliance, supplier operations, roster workflows, support, and checkout. Interactive demos only; no production submissions are wired.

Forms system / Source of truth

Every form family has a home.

This atlas promotes the existing gallery forms into the canonical board, fills the missing operational families, and gives every consuming route a stable pattern anchor.

Total families
23
Full demos reused
10
Compact demos added
13
Intent types
10
Forms DNA contract

Fields inherit the foundation before demos render

Forms now expose the atomic grammar downstream pages must consume: labels, hints, fields, selects, errors, submit rails, validation states, and the exact Shared DNA routes they depend on.

01WireframesForm sections inherit page, card, control-row, overlay, and mobile anatomy.02LayoutsField grids, sticky metadata, two-column panels, and mobile stacks follow the approved splits.03SizingFields, rows, icon wells, buttons, chips, and cards use named component-size tokens.04SurfacesForm panels, field wells, focus surfaces, and success/error rows inherit material recipes.05ActionsSubmit, reset, upload, save, verify, and queue commands use the canonical action layer.06SelectionRadio cards, chips, toggles, select menus, and active filters share choice-state taxonomy.07FeedbackValidation, pending, success, warning, and fault responses use one feedback language.
Typography

Label

Every control has a visible label or fieldset legend before the control surface.

--primitive-text-2xs / --primitive-font-monolabel text, legend, group label
Typography

Hint

Helper text is connected with aria-describedby and never replaces an error.

--primitive-body / --primitive-mutedhint text, format note, privacy note
Sizing

Field

Text, email, password, textarea, date, and search controls inherit field height, radius, focus, and recessed surface.

--primitive-size-field-mdinput, textarea, field wrapper
Selection

Select

Menus, radio groups, chips, toggles, and native selects use one choice-state grammar.

--primitive-size-field-mdselect, radio cards, chips, toggles
Feedback

Error

Invalid states reserve message space, expose role or aria-invalid semantics, and keep focus visible.

--primitive-red / --primitive-focus-ringerror row, invalid border, status copy
Actions

Submit

Submit and reset actions use Actions DNA for sizing, disabled state, destructive state, and success transition.

--primitive-size-command-smsubmit rail, reset command, local success status
01

Field anatomy

Label, control, hint, error, and command slots stay present across every form family.

Hint connected with aria-describedby.

Validation message occupies a reserved slot.

02

State grammar

Validation and submission states use Feedback, Surfaces, Actions, and Selection tokens.

IdleSurfacesField surface is recessed and readable before interaction.
FocusSurfacesFocus ring uses the shared focus token and does not shift layout.
FilledSelectionFilled controls keep label, value, and helper text visible.
InvalidFeedbackError copy appears in the reserved message slot.
SubmittingActionsSubmit command owns pending feedback and keeps secondary actions available when safe.
SuccessFeedbackSuccess state is local to the demo unless a production route wires a real endpoint.
03

Pattern inventory

Every live demo is mapped to a domain, intent, field list, consumer routes, and state list.

23canonical families
10gallery demos reused
13compact demos added
Domain matrix

Where each form belongs

Domains match the UI primitives board: public website, workshop, parts, commerce, CMS, operations, governance, agent surfaces, and marketing.

Live demos

Canonical patterns

All demos stay local to the board. They submit to component state only, so they can be exercised without touching production APIs or CMS data.

01Gallery canonical

Workshop contact

Name, email, phone, subject, message, attachment slot, and consent.

FamilyPublic enquiry
Used byforms-gallery, support, quote request, service pages
Fieldsname, email, phone, subject, message, consent
Statesidle, attached, submitted
Open full route
01 / Contact

Talk to the workshop

Send the team a message. We reply during workshop hours, Monday to Saturday.

Your details and message
Include vehicle make, model, year, and the symptom if possible.
AttachmentOptional · max 10 MB, JPG / PDF
02Gallery canonical

Newsletter signup

Compact email capture with success state and unsubscribe promise.

FamilySubscription
Used byforms-gallery, email-builder, marketing, footer
Fieldsemail
Statesidle, submitted
Open full route
03Gallery canonical

Workshop booking

Rego, date picker, slot selection, drop-off mode, callback, and confirmation.

FamilyScheduling
Used byforms-gallery, booking-widget, calendar, workshop scenes
Fieldsrego, date, slot, drop mode, callback
Statesdate selected, slot selected, submitted
Open full route
02 / Booking

Book a workshop bay

Reserve a slot at Oak Flats. Confirmation is sent by text within the hour.

NSW or any state plate — 6 characters max.
Drop off mode
Preferred date
June 2026
MoTuWeThFrSaSu
Preferred slot
04Gallery canonical

Vehicle intake

Rego lookup, make/model/year, engine, body, fuel, photo tray, and notes.

FamilyVehicle profile
Used byforms-gallery, booking-widget, quotes, workshop scenes
Fieldsrego, make, model, year, engine, body, fuel, notes
Stateslookup, photos attached, locked
Open full route
03 / Vehicle intake

Tell us about the vehicle

Run a quick lookup, then confirm the details so we can match the right cat-back.

NSW plate format · 6 chars max.
Vehicle profile
Fuel type
Photo tray
Optional — the workshop reads every note before quoting.
05Gallery canonical

Quote request wizard

Three-step vehicle, service multi-select, contact, and audience flow.

FamilyQuote intake
Used byforms-gallery, quotes, CRM, homepage CTA
Fieldsvehicle, services, name, email, phone, audience
Statesstep 1, step 2, step 3, submitted
Open full route
04 / Quote request

Build a workshop quote

Three short steps — vehicle, service needs, contact. Quotes are emailed within 24 hours.

  1. Step 01Vehicle
  2. Step 02Services
  3. Step 03Contact

Vehicle details

06Gallery canonical

Address capture

Country, street autocomplete, suburb, state, postcode, and delivery override.

FamilyBilling and delivery
Used byforms-gallery, billing, commerce, KYC
Fieldscountry, street, suburb, state, postcode, delivery address
Statesautocomplete, delivery override, saved
Open full route
09 / Address

Where do we send it?

Country first, then a street autocomplete and a postcode mask. Optional separate delivery.

Billing

Required
SuburbOak Flats
07Gallery canonical

Search and filter

Keyword, price range, category, vehicle, supplier toggle, and sort menu.

FamilyCatalog discovery
Used byforms-gallery, search, parts pages, file browser
Fieldskeyword, price, category, vehicle, supplier, sort
Statesexpanded groups, selected filters, applied
Open full route
10 / Search filter

Find a part fast

Keyword, price range, category, and vehicle type — collapse what you do not need.

Maximum spend
$100$1200$2000+
08Gallery canonical

File upload

Drop zone, file list, progress, type/size validation, remove, and submit.

FamilyEvidence and media
Used byforms-gallery, file-browser, email-builder, KYC, supplier portal
Fieldsfiles, type, size, progress
Statesdrag active, uploading, done, error
Open full route
08 / Upload

Drop your evidence

Underbody photos, sound recordings, prior quotes — drag and drop or browse.

Drop files here

or click to browse. Photos, video, and PDF up to 25 MB each.

.jpg.png.pdf.heic.mp4≤ 25 MB
underbody-2010-commodore.jpg4.2 MB
Type okSize ok
exhaust-noise-recording.mp418.3 MB
Type okSize ok
previous-quote.pdf760 KB
Type okSize ok
Total queued · 3 files23.3 MB
09Gallery canonical

Feedback and review

Star rating, category, title, message, photo attachment, and anonymity toggle.

FamilyCustomer sentiment
Used byforms-gallery, reviews, support, emails
Fieldsrating, category, title, message, anonymous
Stateshover rating, photo attached, submitted
Open full route
10Gallery canonical

Survey and NPS

Recommendation scale, multi-select improvements, ranked list, notes, and slider.

FamilyResearch
Used byforms-gallery, surveys, reviews, roster
Fieldsscore, improvements, ranked reasons, notes, satisfaction
Statesprogress, ranked, submitted
Open full route
Survey progress2/5 · 40%
07 / Workshop survey

Help us tune the workshop

Five short questions. Two minutes. Everything stays anonymous.

How likely to recommend Oak Flats?1 – 10 scale
What would you most like us to improve?Select any
Rank what matters mostReorder
  1. Workmanship quality
  2. Turnaround time
  3. Price transparency
  4. Communication
How satisfied overall?70
Not at allWorkshop legend
11Atlas compact

Auth and security

Login, password, OTP, recovery, session trust, and security consent.

FamilyIdentity
Used byauth, KYC, permissions, supplier portal
Fieldsemail, password, OTP, remember device
Statesidle, invalid, verifying, trusted
Auth / security

Verify an operator

Credential, OTP, and device trust in one compact security pass.

Six digits from authenticator or SMS.
12Atlas compact

Account and team settings

Profile, team invite, role, bay assignment, notification preference, and save state.

FamilyWorkspace settings
Used byaccount, team, notifications, permissions
Fieldsdisplay name, email, role, bay, digest
Statesdirty, saved, invite ready
Account / team

Invite a bay operator

Team invite, role assignment, bay scope, and digest preference.

Bay access
13Atlas compact

Billing, payment, and tax

Card details, billing address, ABN, invoice contact, tax toggle, and receipt email.

FamilyPayment settings
Used bybilling, account, commerce, quotes
Fieldscard, expiry, CVC, ABN, billing email, country
Statesbrand detected, validated, saved
Billing / tax

Update billing profile

Payment card, invoice contact, ABN, country, and receipt delivery.

Demo validation only.
14Atlas compact

Quote authoring and signature

Line item editing, discount, terms, signer, signature method, and acceptance.

FamilyQuote to cash
Used byquotes, workshop scenes, CRM, print docs
Fieldsline title, quantity, discount, terms, signer, signature
Statesdraft, sent, signed
Quote / signature

Prepare a quote section

Quote line, discount, terms version, signer, and acceptance method.

Signature method
15Atlas compact

Calendar scheduling

Date range, time, recurrence, bay, technician, and conflict check.

FamilyAvailability
Used bycalendar, booking-widget, roster, workshop scenes
Fieldsdate range, time, recurrence, bay, technician
Statesavailable, conflict, scheduled
Calendar / schedule

Reserve bay coverage

Date range, time, bay, technician, recurrence, and conflict status.

Technicians
16Atlas compact

Identity evidence, declaration, consent, data request, policy version, and signoff.

FamilyRegulated data
Used bycompliance, KYC, permissions, print docs
Fieldsdocument, declaration, policy, consent, signature
Statespending, review, approved
Compliance / consent

Collect a signoff

Document type, declaration, policy version, and consent acknowledgement.

Review state
17Atlas compact

Supplier operations

Catalog upload, SKU creation, order acknowledgement, invoice, and compliance cert.

FamilySupplier portal
Used bysupplier-portal, inventory, billing, parts pages
Fieldssupplier, SKU, price, lead time, invoice, certificate
Statesqueued, submitted, needs review
Supplier ops

Submit a supplier update

SKU, price, lead time, catalog upload state, and compliance certificate.

Documents
18Atlas compact

Roster and workshop ops

Time off, shift swap, technician profile, bay assignment, and training signoff.

FamilyPeople and bays
Used byroster, workshop scenes, calendar, account
Fieldstechnician, shift, reason, coverage, approval
Statesrequested, approved, declined
Roster / ops

Request coverage

Shift swap, time-off reason, bay coverage, training, and approval state.

Request type
Coverage needed
19Atlas compact

Builder, editor, and admin rules

Field builder, validation rules, conditional logic, workflow variables, and admin query filters.

FamilyRule authoring
Used byform-builder, workflows, db-admin, reports
Fieldsfield type, default, condition, operator, target
Statesdraft, valid, published
Builder / admin

Author a validation rule

Field type, default value, condition, operator, target, and publish state.

Condition
20Atlas compact

Support and comment composer

Reply body, internal note, macro picker, mention picker, priority, and resolve toggle.

FamilyConversation input
Used bysupport, comments, inbox, reviews
Fieldsreply, note, macro, mention, priority, resolve
Statesdraft, queued, sent
Support / composer

Draft a support reply

Macro, mention, reply body, priority, internal note, and resolve toggle.

21Atlas compact

Commerce checkout

Customer, shipping, delivery, payment method, order notes, and terms acceptance.

FamilyCart to order
Used bycommerce, parts pages, billing, emails
Fieldscustomer, shipping, delivery, payment, notes, terms
Statescart, review, paid
Commerce / checkout

Review a parts order

Customer, shipping, pickup, payment, order notes, and terms acceptance.

Fulfilment
22Atlas compact

Notifications and permissions

Notification channel rules, quiet hours, role scope, access request, and approval reason.

FamilyPolicy controls
Used bynotifications, permissions, account, workflows
Fieldschannel, quiet hours, role, scope, reason
Statesrequested, approved, muted
Notifications / access

Set an access rule

Channel, quiet hours, role scope, approval reason, and muted state.

Channels
20:00
23Atlas compact

Email campaign builder

Subject, preheader, audience, personalization token, test recipient, and send check.

FamilyCampaign editing
Used byemail-builder, notifications, marketing campaigns, newsletter
Fieldssubject, preheader, audience, token, test recipient
Statesdraft, preview, test sent
Email / campaign

Prepare a campaign send

Subject, preheader, audience, personalization, test recipient, and send check.

Audience