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
About How it works Resources ▾
☀ Sign in Apply
Default · hover the links
Theme Menu Dropdown Sign in 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 ☀ Theme
DEAL ↑ NODE STAGE STATUS
Compliance audit Sato Proof In review
Cross-border settlement Mercer Task Verified
Custody review Brandt Task Verified
Liquidity routing Haas Task Verified
Page 1 of 2 · 4 shown
‹ 1 2 ›
Sort · filter · select · page · theme
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 ☀
Open a dialog above
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.
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.
☀ Theme Simulate server error: OFF
1Details
2Review
Work email
Node ID
Role
Select…▾
Territory
APACEMEA
Scope notes
Evidence (optional)
Click to attach ³
I accept the review boundary & terms.
Continue →
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: BR ☀
Fire a toast — Error carries an Undo action
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.
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.
☀ Theme Reset tabs
Underline tabs · badges · closable
Overview Activity 3 Records 12 Draft ✕
Overview
Reviewed nodes, open deals and proof summaries at a glance.
← → to move · Home/End to jump · ✕ closes Draft · Reset restores
Segmented control
Day Week Month
Showing: Week
Pill filters
All Verified In review
Filter: All
06B07FooterNewsletter · links · language · status · legal
Interactive component · upgraded
The footer,
comprehensive.
Apple-dense link grid + WCN brand — six columns, fine print, region selector, subscribe.
☾ Theme Server error: OFF
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