Pattern Library

Schema 2.0.0 · 8 patterns imported from the SLDS export.

Schema: 2.0.0 Patterns: 8 Source: slds_patterns_export_v2.json

Portal Behaviors (Contract Patterns)

These contracts define expected, regression-safe UI behavior for DIG Portal pages.

1 Header Auth State Chip

Purpose: Communicate current portal auth state in the header with a clear navigation action.

When to use: Global header controls where users need to sign in or open their dashboard quickly.

Do: show Sign in for signed-out sessions, and replace with a Verified chip linking to /me when signed in.
Don't: infer auth state from unrelated guards; use the same Portal session truth source used by /me.

Accessibility notes: Header auth controls must remain a 44px minimum tap target; signed-in chip uses aria-label="Open my dashboard".

Live Example

Signed out

Signed in Verified

2 Status Badge + Icon Rendering (No Token Leaks)

Purpose: Keep membership status readable and trustworthy while preventing icon token leakage into visible UI.

When to use: Membership state surfaces, cards, rows, and summaries that display status labels.

Do: map unknown states to a real fallback icon in the icon set and keep text legible without icons.
Don't: render icon tokens/registry keys directly in the UI (for example, [QUESTION_MARK]).

Accessibility notes: Status text is always visible; icon-only meaning is not required for comprehension.

Live Example

Active Active Lapsed Lapsed Unknown/No membership on file Unknown/No membership on file

Contract test: Rendered HTML must not contain bracketed icon token patterns.

3 Copy-to-Clipboard Control (Value + Separate Control)

Purpose: Let users copy identifiers quickly without polluting the displayed value.

When to use: Contact IDs, hashes, and references where copy actions are needed.

Do: render value text alone and keep copy as a separate control with field-specific label.
Don't: concatenate "Copy" into the value string.

Accessibility notes: Use aria-label="Copy <field name>"; on mobile, allow wrapping/truncation while preserving a tappable copy button.

Live Example

0035...EAAZ

Includes inline "Copied" feedback when clipboard write succeeds.

4 Trust / Evidence Footer (Session + Evidence + Replay-safe + Hash)

Purpose: Provide trust indicators for the current portal state and request evidence.

When to use: Portal pages that need user-visible assurance about session and command integrity.

Do: reuse tokenized chip styles and one-sentence explanations for each trust chip state.
Don't: add one-off colors or bespoke chip variants outside the shared footer component.

Accessibility notes: Chips must wrap cleanly on mobile and keep hash legible in monospaced text.

Live Example

Placeholder evidence status (MVP) Verified session Evidence emitted Replay-safe command layer hash: 4f0f7de06eb7...cd3f18

Verified session: Your current portal visit is authenticated.
Evidence emitted: The action generated a verifiable audit record.
Replay-safe command layer: Duplicate command submissions are blocked for safety.

5 Header Utility Icon Buttons + Nav Active Pill

Purpose: Keep top navigation and utility controls touch-friendly and visually consistent in light/dark mode.

When to use: Header controls (Aa, bell) and primary nav links across all portal pages.

Do: use button controls with ui-header-icon-btn and 44px minimum hit area.
Do: use ui-topnav__link portal-nav-link for every nav item, plus portal-nav-active for the current page.
Don't: create one-off icon chips or alternate nav pill styles outside these classes.

Accessibility notes: Utility buttons require visible focus state and a clear pressed state on touch.

Live Example

Verified

Home Forum Governance

Classes: ui-header-icon-btn ui-header-icon-btn--text, ui-header-icon-btn, ui-topnav__link portal-nav-link portal-nav-active.

Design Tokens (DIG Design Language v1.1)

Navy 900 · #0A1628

Navy 700 · #1A2D4D

Slate 600 · #475569

Electric Blue · #3B82F6

DIG Red · #DC2626

White · #FFFFFF

Do: use token variables and semantic aliases for all nav, links, buttons, tiles, chips, alerts, focus rings, and selected states.
Don't: use browser default anchor blue, visited purple, or ad-hoc blues/purples/indigos.
Don't: allow visited links to alter navigation colors.

Only one game is rendered per session. Use shuffle to pick a new one.

Drag to move paddle. Arrow keys also work.

All Patterns

Badge Status

ID: badge_status Category: status

Compact status indicator (success, warning, error).

Required slots: label

Active Pending Failed

Clickable Row with Actions

ID: clickable_row_with_actions Category: surface

Faux-nested interactive control pattern. A row or card whose entire surface acts as a primary link hit area using the CSS breakout technique, while secondary action buttons remain independently clickable. No interactive elements are nested inside other interactive elements.

Required slots: title, actions

Sashimi Lunch 12 pieces · Chef's selection · $24
Garden Salad Mixed greens · Vinaigrette · $12
Strawberry Cake Two layers · Fresh berries · $18

Forum categories use this pattern: full-row anchor, quiet counts metadata, and chevron affordance.

Member Introductions Start here to introduce yourself to the Deaf in Government community. 24 threads · 137 posts

Command Palette

ID: command_palette Category: utility

Keyboard-invoked navigation palette.

Required slots: input, results

Liquid Glass Button

ID: liquid_glass_button Category: action

Frosted translucent primary action with high contrast and subtle depth. Includes size variants (sm, lg, icon-only), color variants (secondary, destructive, success), and companion glass surfaces (card, nav, badge, input). Uses backdrop-filter with solid fallbacks.

Required slots: label

Primary

CTA Accent

Danger

Sizes

Status chips Default Active Critical

Panel and nav surfaces with DIG v1.1 tokens:

Surface Card

Demonstrates tokenized panel, input, and CTA button states.

Object Console

ID: object_console Category: navigation

Split-panel console layout with primary record and related timeline.

Required slots: primary_panel

Member: Jane Smith

Status: Active

Page Header

ID: page_header Category: layout

Top-of-page context block with title, meta, and actions.

Required slots: title

Record Card

ID: record_card Category: surface

Card surface representing a record or summary object.

Required slots: body

Member #1042 · Individual

Active profile with current term through Dec 31.

Tabset

ID: tabset Category: navigation

Horizontal tab navigation for related views.

Required slots: tabs

Overview content panel for related record details.

Pattern Library

Portal Behaviors (Contract Patterns)

1 Header Auth State Chip

2 Status Badge + Icon Rendering (No Token Leaks)

3 Copy-to-Clipboard Control (Value + Separate Control)

4 Trust / Evidence Footer (Session + Evidence + Replay-safe + Hash)

5 Header Utility Icon Buttons + Nav Active Pill

Design Tokens (DIG Design Language v1.1)

Cards + Swipe Game Controls

Permit Breaker

All Patterns

Badge Status

Clickable Row with Actions

Command Palette

Pattern Demo: Command Palette

Liquid Glass Button

Object Console

Pattern Demo: Object Console

Membership Record

Page Header

Pattern Demo: Page Header

Record Card

Pattern Demo: Record Card

Tabset