Showcase mode — pilot metrics and softer empty states for stakeholder tours. Runbook · Connect tours
Partner soft launch — share the readiness path: Readiness path · Partner kit
Institutional UI

Design system gallery

Live reference for Inst* primitives, semantic tokens, and WCAG 2.2 patterns. SSOT: design-tokens/tokens.json.

Accessibility statementTrust infrastructure
Surfaces

InstSurface variants

flat

Default panel — forms and prose blocks.

raised

Interactive cards with hover elevation.

highlight

Gold-accent emphasis surface.

280
Registry done
Meta

Kickers, tags, badges

InstKicker
InstEyebrow
InstTag
DefaultSafeWarnGold
Forms

InstField kit

Feedback

Alerts and empty states

Info alert — institutional scope reminder.

Warn alert — validation or rate limit.

Success alert — submission received.

No pending items

Example empty state for admin queues.

Typography

Semantic scale

  • inst-text-display — hero headings
  • inst-text-title-lg — section titles
  • inst-text-body — 15px body copy
  • inst-text-caption — 11px uppercase labels
Tokens

Brand palette (CSS vars)

Gold

--color-gold

Trust

--color-trust

Safe

--color-safe

Panel

--color-panel

Wave 1 primitives

Tabs, modal, toast, progress, breadcrumb, data list, form errors.

Tab panel content — institutional calm, 44px targets.

Scope reminder

The 777 Foundation does not provide legal, clinical, or emergency services. Crisis: 911 · 988.

Path completion65%
  1. Mirror
  2. Path
  3. AI guide
  4. Partner
Trust
Published scope and safeguarding
Readiness
Four-module self-serve path
Knowledge
Scoped AI guide — refusals enforced

InstAgentShell

Live three-column AI guide layout — scope panel, main chat area, next-step sidebar.

Sandbox · scoped tools

Ephemeral session — no employer names, addresses, or case details. Suggestions use an allowlisted UI catalog only.

  • Published scope corpusNo user PII stored
  • Internal route suggestionsCatalog allowlist only
  • Legal/clinical/crisis refusalsAlways on
Scoped navigation assistant

777 Guide preview

Scoped navigation assistant — not legal or clinical advice.

Chat surface mounts here on /ai-guide/. Journey intent chips and aria-live refusals ship on the production route.

Path intentPartner intentCrisis refusal

Scope & boundaries

Scope & boundaries

This assistant provides general information about The 777 Foundation Society and navigation readiness concepts. It is not legal advice, clinical advice, or crisis support.

May help with

  • Explain Society programs, scope boundaries, and governance approach
  • Suggest general readiness steps (timelines, document types, questions to prepare)
  • Point to external BC resources (988, 211, Employment Standards, etc.)
  • Help clarify what the Society does and does not provide

Will not

  • Provide legal representation, case strategy, or outcome predictions
  • Provide clinical diagnosis, therapy, or crisis intervention
  • Request or store employer names, addresses, or case-specific identifiers
  • Encourage sharing identifying details in chat

Crisis: If there is immediate danger, call 911. For crisis support in Canada, call or text 988. See our Resources page for more options. Full AI scope policy · BC resources

Commercial agentic (Google A2UI + sandbox)

Catalog-first handoffs, phased status, sandbox disclosure. Reference: docs/commercial-agentic-ui-references.md

Sandbox · scoped tools

Ephemeral session — no employer names, addresses, or case details. Suggestions use an allowlisted UI catalog only.

  • Published scope corpusNo user PII stored
  • Internal route suggestionsCatalog allowlist only
  • Legal/clinical/crisis refusalsAlways on

Understanding your question

  1. Understanding your question
  2. Checking scope boundaries
  3. Composing a scoped answer
Suggested next step

Readiness path

Four free modules — scope, checklist, referrals, next step.

Open path
Suggested next step

Mirror snapshot

60-second self-check — no signup, no PII on share.

Try mirror
Readiness scenario

Module 1 — Know your scope

Practice naming what you need — without sharing identifying case details.

Step 1 of 425%

Inst vs legacy

Public routes use InstSurface — LuxCard/LuxRow shims delegate here.

InstSurface raised

Canonical card — hover lift, gold border on focus.

InstSurface rowAction →
Field marketing

Field* layout

TrustField.ca + Notefield.com patterns — live band, hero, journey, surface grid, FAQ.

1

FieldHero

Eyebrow, gold gradient title, lead, loop aside.

FieldLiveBand

Status strip above trust bar on all public pages.

Copy SSOT: src/lib/field-copy.ts · Components: src/components/field/

Verify gate: npm run verify:design-tokens · Full bundle: verify:bundle · 100-step upgrade roadmap

Quick exit