Every piece, themed live.
Primitives, app patterns, and the ArcDemo-signature surfaces. Toggle palette, theme, radius, and font above to see them all re-skin off the same tokens before we migrate the pages.
Color tokens
Semantic surface roles for the active palette and theme.
Typography
Headings use the secondary face, body the main, code the mono.
Make buyers click, not sit through a call.
A demo tool that looks like one of its own demos.
Capture a flow in Chrome, annotate it in an editor that gets out of the way, and ship a share link your prospect will actually finish. This paragraph is the body face.
const demo = await arcdemo.publish(steps)
Buttons
Primary carries subtle depth; others stay flat. Focus ring follows the palette.
Badges & status
Label chips and demo status pills.
Forms
Inputs, select, textarea, checkbox, switch, radio cards.
Navigation
Tabs, segmented control, accordion, breadcrumb, command, tooltip + kbd.
Overlays & feedback
Dialog, alerts, and toasts.
Page header
Breadcrumb + title + description + actions.
Analytics
Per-step engagement, traffic sources, and where viewers drop.
Stat cards
Metric tiles with trend; one inverted accent panel.
Table
Header, rows, hover. Used for leads, referrers, members.
| Demo | Source | Submitted | |
|---|---|---|---|
| harper@northshift.io | onboarding-flow | linkedin.com | 2m |
| team@ribbon.io | filtering-deep-dive | Direct | 38m |
| solo@indie.dev | api-quickstart | Embed · docs | 2h |
Demo cards
The library grid: thumbnail, status, title, meta, menu.
Onboarding walkthrough
Six step intro tour for new accounts.
Filtering & saved views
Advanced filtering and saved searches.
API quickstart
Get going with the SDK in five minutes.
Nav cards & empty state
Drill-in cards and a teaching empty state.
Form section
Labelled rows with hints, dashed dividers.
Workspace
The name and slug shown across the app.
Visible to all members.
Who can find this workspace.
Sliders, progress & charts
Pill controls and palette-themed Recharts.
Demo frame & annotations
The signature surface: browser frame, hotspot, dark callout.
The demo branches here between PMM and CS viewers.
Step flow & player bar
Step plates and the player's control bar.
Lead gate & completion
Player overlays that capture and close the loop.
No spam. Unsubscribe anytime.
People & loading
Avatars, recording chip, and skeletons.