BRAND INDEX
Interactive components · v1.0
Seven, production-grade.
Every interactive component on one page — each live below. Theme-switchable, accessible, and built on the locked WCN system. The full catalog closes the page.
01 NAV 02 TABLE 03 MODAL 04 FORM 05 TOAST 06 TABS 07 FOOTER 08 CATALOG
06B01Navigation barTheme · menu · dropdown · language · notifications · auth
Interactive component · production
The navigation,
alive.
Hover the links, open the menu, expand Resources, sign in, switch language — Esc closes, clicking the backdrop closes.
WCN
{{ nav.t.about }} {{ nav.t.how }} {{ nav.t.resources }} {{ nav.dropCaret }}
{{ nav.themeGlyph }} {{ nav.t.signin }} {{ nav.t.apply }} {{ nav.lang }} {{ nav.langCaret }} A
English
中文
NOTIFICATIONS
Proof published
proof_3xQ
Review required
task_8fK2a
Insights
Long-form research
Wiki
System library
Developers
Docs & API boundary
{{ nav.t.about }} {{ nav.t.how }} {{ nav.t.proof }} {{ nav.t.resources }} {{ nav.t.apply }}
{{ nav.hint }}
Theme Menu Dropdown {{ nav.authLabel }} Scrolled
06B02Data tableSort · filter · select · batch actions · pagination
Interactive component · production
The table,
complete.
Sort, filter, select rows, run batch actions, page through — light or dark.
All Verified In review Scoped Loading {{ table.themeGlyph }} Theme
{{ table.selCount }} selected
ClearExport ³
{{ table.allCheck }} DEAL {{ table.cDeal }} NODE {{ table.cNode }} STAGE {{ table.cStage }} STATUS {{ table.cStatus }}
Loading…
³
No deals match this filter.
Try another status.
{{ r.check }} {{ r.deal }} {{ r.node }} {{ r.stage }} {{ r.status }}
Page {{ table.page }} of {{ table.pages }} · {{ table.count }} shown
‹ 1 2 ›
{{ table.hint }}
06B03ModalVariants · sizes · sheet · scroll-lock · success state
Interactive component · production
The dialog,
complete.
Variants, sizes, long-content scroll, a bottom sheet, a success state — focus-trapped, scroll-locked, aria-labelled.
Confirm Form Destructive Long content Bottom sheet {{ modal.themeGlyph }}
{{ modal.hint }}
A11Y
role=dialog · aria-modal · aria-labelledby · focus trap · focus return.
BEHAVIOUR
Scroll-locked background · Esc + backdrop close · animated entry.
CONTENT
Sticky header + footer, body scrolls when tall. Bottom sheet on mobile.
{{ modal.title }}
✕
{{ modal.body }}
Node ID
WCN-0xb2a
Territory
APAC▾
This cannot be undone. The node and its scope will be removed.

1 · Reviewed contributors only. Nodes are accountable seats, reviewed before any operating role begins.

2 · Private evidence stays permissioned. Sensitive material never becomes public.

3 · Public proof summaries are anonymized and released only after privacy and risk review.

4 · Jurisdiction-gated. Participation and value flow follow applicable-jurisdiction compliance checks.

5 · Not an offer of securities, a token sale, or a promise of returns. Not open to US Persons during Phase 1–2.

6 · By continuing you acknowledge the terms, the privacy policy, and the proof-disclosure boundary.
Cancel {{ modal.confirmLabel }}
Submitted for review
06B04FormField types · blur validation · steps · submit states
Interactive component · production
The form,
complete.
Every field type, blur validation, a submit-failure path — type, blur a field empty, or hit the simulated server error.
{{ form.themeGlyph }} Theme Simulate server error: {{ form.failState }}
{{ form.s1mark }}Details
2Review
Work email
{{ form.emailErrMsg }}
Node ID
{{ form.nodeErrMsg }}
Format looks valid.
Role
{{ form.roleLabel }}{{ form.roleCaret }}
Operator
Partner
Researcher
Territory
APACEMEA
Scope notes
Evidence (optional)
{{ form.fileLabel }}
{{ form.agreeCheck }} I accept the review boundary & terms.
Please accept to continue.
 Continue →
Review & submit
Email{{ form.email }}
Node{{ form.node }}
Role · Territory{{ form.roleLabel }} · {{ form.territory }}
Evidence{{ form.fileSummary }}
Submission failed — the review service is unavailable. Please retry.
Back {{ form.submitLabel }}
Submitted for review.
We'll be in touch once the review clears.
Start another
06B05ToastStacked · countdown · hover-pause · actions · aria-live
Interactive component · production
The toast,
complete.
Stacked, countdown bar, hover-to-pause, action buttons, aria-live — fire one and hover it.
Success Info Warning Error + Undo Clear all Pos: {{ toast.posLabel }} {{ toast.themeGlyph }}
{{ toast.hint }}
ANATOMY
Status dot + title + meta + optional action, on ink. Tinted left edge by type, countdown sliver along the bottom. Hover pauses the timer.
A11Y & PLACEMENT
role="status", aria-live="polite". Configurable corner, newest on top, max 4 visible.
{{ t.title }}
{{ t.meta }}
✕
{{ t.actionLabel }}
06B06TabsSliding indicator · badges · closable · segmented · pills
Interactive component · production
The tabs,
complete.
Sliding indicator, count badges, closable tabs with overflow — click, close, or use ← → / Home / End.
{{ tabs.themeGlyph }} Theme Reset tabs
Underline tabs · badges · closable
{{ tb.label }} {{ tb.badge }} ✕
{{ tabs.paneTitle }}
{{ tabs.paneBody }}
{{ tabs.hint }}
Segmented control
Day Week Month
Showing: {{ tabs.segLabel }}
Pill filters
All Verified In review
Filter: {{ tabs.pillLabel }}
06B07FooterNewsletter · links · language · status · legal
Interactive component · upgraded
The footer,
comprehensive.
Apple-dense link grid + WCN brand — six columns, fine print, region selector, subscribe.
{{ footer.themeGlyph }} Theme Server error: {{ footer.failState }}
06B08Component CatalogStatic reference · all eight families in the locked system
Component Library · v1.0
The eight families.
Every UI building block, in the locked WCN system — EB Garamond, Archivo, JetBrains Mono; ink, paper, vermilion.
01Navigation
WCN
AboutHow it worksProof
Apply
TABS
OverviewActivityRecords
BREADCRUMB
Home/How it works/Proof
PAGINATION
‹12›
02Input & forms
Text field
Node ID
WCN-0xb2a
Select
Operator role▾
Slider
Checkbox
Accept boundary
Notify on review
Radio
Node applicant
Toggle
Public summary
Upload
Drop evidence ³
03Buttons & actions
Apply Secondary Outline Text link › Destructive Disabled Small Large
04Containers & layout
Cover card
Media over content.
ACCORDION
What is a node?−
An accountable, reviewed operating seat.
How is proof gated?+
PANEL
Proof boundary
A dark surface panel with divider.
05Data display
NODEREGIONSTATUS
NMercer
APACVerified
NVance
EMEAReview
PROOFS
1,204
REGIONS
38
Verified In review Node New ³
06Feedback
Proof verified
Review required
Toast · summary publishedView ›
PROGRESS · REVIEW
Reviewing…
Confirm intake✕
Modal / dialog.
CancelConfirm
07Media
AVATAR
AM+5
VIDEO
ICONS
LOGO MARK
08Typography
Display heading
Section title (Archivo 600)
Body copy in Archivo at 16px / 1.6. Reviewed contributors, private evidence, public proof summaries.
"Trust earned by evidence." — pull quote
LABEL · UPPERCASE · TRACKED
CODE / MONO
POST /v1/proof
node: "WCN-0xb2a"
³Bulleted with the ³ device
WCN · Component library v1.0 · 8 families
WCN · Interactive components · 7 live + full catalog