Workspace sign in
A split-screen sign-in: a still picture plate on one side, password entry, social providers, and SSO on the other.
Full application patterns assembled from vine-ds primitives — authentication and application shells first, then dashboards, record lists, settings, and the system states that keep it all honest. Every preview renders live in its own frame with desktop, tablet, and mobile sizing.
Pattern groups
Each group opens its live previews, with a size control on every screen.
14 groups with live routes
Every screen in the gallery is a real route rendered in an isolated frame. Each preview has its own size control — or open the route in a dedicated tab.
Authentication · 2 screens
Sign-in, registration, code verification, and account recovery flows built on the pill control language.
Onboarding & activation · 2 screens
Welcome, workspace setup, teammate invites, and the checklists that carry a new account from empty to its first real result.
Application shells · 2 screens
Complete application frames — sidebar, header-first, and mobile — that carry the chrome so content pages stay focused.
Dashboards & overviews · 2 screens
Data-forward overview screens that put the weight-first KPI grid and token-driven charts to work for analytics, operations, and first-run moments.
Data tables & record lists · 2 screens
Searchable, filterable, and selectable record collections — list, master–detail, board, grouped, virtualized, and card views that keep dense data readable.
Object detail pages · 2 screens
The single record seen head-on — identity, status, history, and the related things hanging off it.
Forms & data entry · 2 screens
Create and edit paths — the long form, the multi-step wizard, and the validation moments where a system usually breaks.
Search, filtering & command · 2 screens
Ways in — global results, faceted narrowing, saved views, and the palette that skips navigation entirely.
Four object types grouped so they never interleave, arrow-key traversal across group boundaries, and the matched line shown rather than a description.
A palette over a dimmed shell where commands needing one more answer open a second step, the command held as a chip that scopes what you type next.
AI & agentic · 2 screens
Streaming answers, agent runs, approvals, and the failure modes that only appear once a model is doing the work.
Messaging & activity · 2 screens
Threads, comments, and notifications — the surfaces where other people show up inside the product.
A list beside a reading pane, unread carried by weight rather than colour, and a composer pinned so the reply box never moves.
One level of nesting, mentions as chips, reactions that name who reacted, an edit history shown rather than implied, and resolve that folds without deleting.
Calendar & scheduling · 2 screens
Time as a layout problem — month grids, week columns, booking flows, and plans that run longer than a screen.
Two events a day then a count that opens the rest, multi-day bars split cleanly at the week boundary, and a today marker that survives navigation.
Overlapping events split into columns instead of stacking, a current-time line on today's column only, and a hover that shows where a drag would create.
Pricing & conversion · 2 screens
Plan comparison, paywalls, and checkout — the screens that ask for money rather than report on it.
Three plans as cards for the half-decided and a full feature grid for whoever has to justify it, with a term switch that rewrites both figures.
The ceiling stated as a fact over the work it stopped, the price shown monthly and prorated, and a real button for not paying.
Settings & preferences · 2 screens
Account, notification, credential, and appearance configuration built on tall pill controls and switch matrices.
System & edge states · 2 screens
Empty, missing, unavailable, and failing moments — quiet surfaces that keep the weight-led hierarchy calm under pressure.