FREESIDE DESIGN SYSTEM · COMPONENT LIBRARY

Everything you need to build a Freeside surface.

Framework-agnostic CSS and markup patterns — the shell, Seldon and Case all build from these, whatever they're written in. Every component meets WCAG AA and ships its accessibility requirements inline. Load freeside.css then freeside-components.css.

Fields Buttons Navigation Status Overlays Data Mobile

01 · Form fields

Fields & inputs.

Anatomy is always label → control → hint or error. A placeholder is never a label. Required is marked in text, not colour. Errors are announced in text and wired with aria-describedby.

Text, textarea, select

Campaign name Required Shown to admins only, never to alumni.

Network (optional)

Objective

Plain language.0 / 280

States — default, focus, error, success, disabled, read-only

Default

Error Enter a valid email address.

Success Verified.

Disabled

Read-only

Warning Large audience — needs approval.

Input groups — icon, prefix/suffix, search, stepper

With icon

Attached addon

https://

Search (pill)

Password

Quantity

Date

Choice — checkbox, radio, switch, segmented, slider

Send a summary to me Copy the network owner Indeterminate Disabled

Every week Every fortnight Balanced2 contacts / week · +18% projected

Human approval required Auto-archive completed runs

Confidence threshold

Tokens & file upload

Audience tags

EMEA Director+

Attachment

Drop a file or browseCSV or XLSX, up to 10 MB

Uploaded

emea-senior-alumni.csv412 KB

02 · Buttons & actions

Actions.

Primary is network blue. Agent orange is reserved for the single verb that dispatches an agent — never for ordinary confirmation. Icon-only buttons always carry an aria-label.

03 · Navigation

Getting around.

Use real landmarks (<nav>, <main>), mark the current item with aria-current, and keep tab order logical.

Tabs, breadcrumbs, pagination

Sidebar, menu, steps

✓

Segment

412 found

Review copy

Human-gated

Run

On approval

04 · Status & feedback

Telling the operator what's true.

Status is never colour alone — every state carries an icon and a text label. Live regions (aria-live="polite") announce agent updates.

Pills, badges, dots

Agent livePredicted Awaiting approvalExecuted Simulating

NetworkAgent +18% forecastScenario B Needs reviewAt risk

live / thinking predicted done

Alerts

Seldon refreshed this forecast

Model seldon-v3 re-scored the network an hour ago.

Campaign approved

Case is running the three steps now.

Large audience

412 recipients exceeds the auto-send threshold.

Sync failed

Molly couldn't reach the EA portal. Retrying in 5 minutes.

Case proposes a campaign

Review before anything is sent.

Status boxes

Run completed

412 sent · 38 opened

FINISHED 12 MIN AGO

Case is working

Seeding FinTech Leaders

Awaiting your approval

2 proposals queued

214 alumni at risk

Predicted to lapse within 60 days

Progress, skeleton, empty

DETERMINATE 66%

CONFIDENCE 82%

INDETERMINATE

No proposals yet

When Case finds an opportunity it'll appear here for your approval.

05 · Overlays

Modals, drawers, toasts, tooltips.

Trap focus while open, close on Esc, return focus to the trigger, and label the dialog with aria-labelledby. Never put a destructive action behind a hover-only affordance.

Campaign approvedCase is running it now.

Send failed3 addresses bounced.

06 · Data display

Showing the network.

Tables use real <th> headers with scope, numerics are mono and right-aligned with tabular figures, and sortable headers expose aria-sort.

Table

	Location	Status	Intent
Aaron Boudreau	Toronto	Contacted	0.42
Abel Isaacs	Greater London	High intent	0.91
Adele Ferrari	Bologna	Lapsed	0.18

Key-value, avatars, accordion, timeline

Tenant: yourcorp
Network: Global alumni
Members: 3,351
Last sync: 4 minutes ago

OGAB AI+9

Case sent 38 newsletters

12 MIN AGO

Owen approved the campaign

1 HR AGO

Seldon revised the forecast

2 HR AGO

What Case will do

Send a re-engagement newsletter, seed two articles, then invite top responders.

Who is included

412 senior alumni in EMEA, inactive more than 180 days.

Guardrails

Nothing sends without your approval. Every step is logged.

07 · Mobile web

On a phone.

Mobile-first, and an admin approving a proposal in a taxi is a first-class case. Targets grow to 44px on touch, inputs are 16px (or iOS zooms the page), hover-only actions are banned, and the page must reflow at 320px with no horizontal scroll. Full rules: DESIGN_SYSTEM.md §13. Narrow this window to see it.

What changes below `md` (768px)

NAVIGATION

Sidebar → .fs-bottombar (≤5 items, thumb-reachable) or an off-canvas drawer. The cockpit demo does exactly this.

DIALOGS

Modal → bottom sheet with a safe-area inset; drawer → full width; toasts span the viewport. Add .fs-modal--static only for docs previews.

TABLES

Either scroll inside .fs-table-wrap (+ .fs-scroll-hint) or stack with .fs-table--cards and a data-label per cell. Never shrink the type.

FORMS

One column, full-width controls, actions stacked with the primary last (nearest the thumb), labels above the field.

Card table — the same markup, stacked

Name	Location	Status	Intent
Abel Isaacs	Greater London	High intent	0.91
Adele Ferrari	Bologna	Lapsed	0.18

Sticky action bar

Case will contact 412 alumni. Nothing sends until you approve.

Bottom bar and action bar both pad with env(safe-area-inset-bottom), and layouts use dvh — never vh.