PURE Design System

One set of modular components every PURE surface shares. Each is a single file, every feature is a switch you turn on or off, and the per-surface setup is admin-editable — so a page has exactly the pieces it needs and nothing it doesn't. Change it once here; it changes everywhere.

Modular — features on/off Admin-configurable Live-bound (fail-soft) Accessible Responsive

Component registry & roadmap

Every product in the system — scoped so nothing's missed. Done means a canonical shared file exists; the rest are queued in build order. A cron works the queue one at a time (below), and we check them off here as they ship.

—

design_system_autobuildEvery 4h · off-hours (8pm–8am CT) · one component per run · do → stage → complete → repeat

Next: —

Table — live

This is pure-table.js, the real component, mounted once. Drive it: sort a header, search, check rows for the action bar — then flip features on and off in the panel. The config on the right is exactly what a surface stores in Table Studio.

Search past 3×3

A search box appears automatically once the table is bigger than 3 rows × 3 columns.

Sort past 2×2

Headers become sortable (3-state, keyboard-friendly) once it's bigger than 2×2.

Select all + multi

Header checkbox with select-all + indeterminate; shift-click for ranges.

Then take action

A selection pops the action bar — Copy, Export, Share, Archive (extensible).

Listings

pure-table.js

Preset:

How it's governed: every surface's table reads one row from pure_table_configs (its columns + which modules are on + default sort + page size). Admins edit it in Table Studio; the Brand Manager owns the shared visual tokens. No page hand-rolls a table — they all mount this file, so an accessibility or brand fix lands everywhere at once.

Uploader — live

Same pattern, different job: pure-uploader.js — one capture surface for files, photos, camera and paste, with an AI-extract → human-review gate before anything saves. Drop a file (or Browse), watch it upload, then confirm the read fields. Flip modules and presets on the right.

Document capture

pure-uploader.js

Preset:

Capture → extract → review → save, everywhere: contract intake, license match, data-entry AI, and listing photos all mount this one file. The AI-extract + review step is the human gate — nothing writes until someone confirms. Which modules a surface shows is a pure_uploader_configs row in Component Studio.

Inputs & Controls — live

Four more off the queue, mounted live: pure-controls.js (toggles, pills, chips, slider), pure-form.js (validated fields), pure-tabs.js (tabs + segmented) — same self-injecting, brand-tokened pattern.

Toggles & switches

Pills & badges

Chips (removable)

Slider

Tabs

Segmented control

Form fields (validated)

Overlays & Data — live

Two more off the queue: pure-modal.js (focus-trapped dialog / drawer / confirm / wizard) and pure-statcard.js (KPI tiles with sparkline + trend) — same self-injecting, brand-tokened pattern.

Modal / dialog / drawer

KPI / stat tiles

Security — live

The last security FE item off the queue: pure-turnstile.js — a Cloudflare Turnstile wrapper with a per-surface admin toggle. It's fail-soft: with no sitekey it never blocks a login; add the sitekey + TURNSTILE_SECRET and enabled surfaces go live with server-side verify.

Turnstile — per-surface control

Component Studio — coming next

One admin to configure any component per surface (modules, columns, roles) over pure_*_configs. Rate-limit editor is the first adopter of the table.

Table deep-dive Back to Home