Flows, annotated.
20 patterns documented as step sequences. Each step names the component, the tracking hook and the rule it enforces. Filter by audience.
Intent router & personalization
Visitors self-segment once; stats, proof and CTAs swap to match and the choice persists across pages.
-
1Choose intentDeploy · Partner · Invest · Join in header or router. data-cta="intent-switch-*"
-
2Swap contentStat band, proof line and primary CTA change in place. aria-live="polite"
-
3PersistStored locally; no account, no tracking cookie. localStorage kairon.intent
-
4ResetAlways visible; default is “Partner”. intent switch
Readiness transparency
Separate what is demonstrated from what is targeted, everywhere.
-
1Mark readinessTRL meter + Demonstrated / In testing / Target chip. K07 readiness chip
-
2Date & verifierDemonstrated needs a date and a named verifier. chip meta
-
3Forward-lookingTargets link to the forward-looking statement. K12 template
-
4FilterMilestones page filters by status. D05
Export-control gating
Restricted technical data stays locked with a clear, respectful request path.
-
1Region checkCountry of end user; sanctioned regions get a polite stop. data-step="gate-1"
-
2Company verificationWork domain + legal entity name. data-step="gate-2"
-
3End-use declarationFree text + certification checkbox. data-step="gate-3"
-
4ReviewLocked card shows “Requested · 5 business days”. toast + email
Pilot request
Turn “interesting” into a scoped, paid pilot with success criteria.
-
1Intent cardDeploy robots. data-step="1"
-
2QualifyTask, payload, shifts, site, start window. data-step="2"
-
3Book engineerSlot picker, 30 min. data-step="3"
-
4Thank youCalendar invite, prep checklist, case study. U01 thank-you
Capacity / quote request
Collect the technical inputs a foundry quote needs, nothing more.
-
1IntentAccess capacity. data-step="1"
-
2Technical inputsNode, wafer starts / month, packaging, tape-out date. number inputs with units
-
3NDA routeAuto-offer NDA if node ≤ 3 nm. access-request dialog
-
4ConfirmRouted to Silicon BD with a named contact. data-cta="capacity-submit"
Offtake interest registration
Register non-binding interest in Solis-1 power.
-
1IntentEnergy offtake. data-step="1"
-
2ProfileUtility / industrial, region, MW range, start year. segmented + slider
-
3DisclosureNon-binding; forward-looking; target dates. K12 notice
-
4Follow-upQuarterly program update + named contact. double opt-in
Investor data-room request
Qualified investors request data-room access in one dialog.
-
1Self-declarationQualified / professional investor checkbox. no pre-check
-
2IdentityFirm, role, work email. inline validation
-
3NDAE-sign in the next step. external signer
-
4Review2 business days; status in email. success state
Talent pipeline
From curiosity to application, or to the talent community.
-
1Search rolesTeam, site, level filters; results count live. facets
-
2Role detailProblem, team, process timeline, pay range. JobPosting schema
-
3ApplyCV + 3 questions, no account. data-step
-
4No fit yetJoin talent community by team. double opt-in
Gated resources & progressive profiling
Ask one field at a time, only when value is delivered.
-
1First downloadEmail only. data-step="gate-email"
-
2SecondCompany + role. prefill known
-
3ThirdUse case. optional
-
4NeverRe-ask known fields. profile store
Learn by interacting
Physics explainers teach through direct manipulation.
-
1Pose question“What does a stronger field do?” section intro
-
2ManipulateSlider with value label and units. K07 slider
-
3ObserveVisual + readout update together. aria-live
-
4ExplainPlain-language takeaway + source. illustrative label
Video authenticity
Viewers always know what they are watching.
-
1LabelAutonomous / Teleoperated, speed, edited or not. authenticity chip
-
2PersistChip stays visible on play and fullscreen. player overlay
-
3ContextDate, site, task in caption. transcript
-
4RawLink to uncut version. resource card
Comparison & objection handling
Answer the objections that stall deals before they are asked.
-
1SafetyStandards + independent audit. standards badges
-
2IntegrationROS 2, OPC UA, MES/ERP. spec sheet
-
3TCOCalculator with editable assumptions. TCO calculator
-
4Risk reversalPaid pilot, success criteria, exit clause. CTA band
Safety & environment for the public
Plain language first, data one click away.
-
1Short answerOne sentence, no jargon. FAQ
-
2CompareEveryday references (“less than a hospital MRI”). illustrative
-
3EvidenceRegulator documents, monitoring data. resource cards
-
4ContactCommunity line, open days. event card
Search, filters & facets
Find anything in two actions.
-
1QueryGlobal search, “/” shortcut. search overlay
-
2GroupResults grouped by type with counts. grouped list
-
3RefineFacets with counts; chips show active. filter chips
-
4EmptySuggest broader query + contact. empty state
Event & webinar registration
Register in one step, remember forever.
-
1RegisterName, email, company. Event schema
-
2ConfirmAdd to calendar (ICS, Google, Outlook). data-cta="add-to-calendar"
-
3Remind24 h and 1 h emails. opt-in
-
4ReplayRecording + transcript after. media player
Real-time data states
Every live number declares whether it is live.
-
1LiveFilled dot, timestamp ticks. live-state indicator
-
2StaleHollow square, age shown, value dimmed. > 60 s
-
3OfflineLast value + “Offline since”. critical notice
-
4SimulatedRing + “Simulated”, model version. info
Consent
Consent is informed, symmetric and revocable.
-
1Cookies“Accept all” and “Reject all” equally weighted. cookie banner
-
2FormsUnchecked boxes; purpose stated. checkbox
-
3Double opt-inConfirm email before first send. email
-
4Revoke“Cookie settings” in every footer. footer link
Empty, loading, error, success
Every async surface has four designed states.
-
1LoadingSkeleton mirrors layout; spinner only in buttons. skeleton
-
2EmptySay why + next step. microcopy K12
-
3ErrorWhat happened, how to fix, retry. inline error
-
4SuccessConfirm + what happens next. toast / page
Portal dashboard layout
Instrument-panel layout for operations teams.
-
1Status stripFleet health, alerts count, data state. KPI tiles
-
2Primary chartThroughput with uncertainty band. K10
-
3AlertsSorted by severity, acknowledgeable. data table
-
4TicketsMaintenance with SLA clock. table
Focus, skip links & motion controls
Keyboard and motion-sensitive users get a first-class path.
-
1Skip linkFirst focusable element. skip to content
-
2Focus ring2 px --focus, 3 px offset, never removed. :focus-visible
-
3OverlaysTrap focus; Esc closes; return focus. dialog
-
4PauseAny motion > 5 s has a pause control. WCAG 2.2.2