Lab

Components that actually work.

Live demos, not screenshots. You can manipulate them directly: they are the same kinds of components I use to ship product to production. Each one solves a concrete SaaS pattern, from trust in AI to the small details that only become visible when they are missing.

Functional demos

Designing visible intelligence.

Patterns for products where AI is central: visible confidence, inspectable reasoning, and bulk actions that respect a safety threshold.

3 demos

Confidence approval card

Each AI recommendation shows its confidence level as a percentage and a bar. Expanding a row reveals the signals behind the reasoning.

AI UXConfidenceBulk actions

Bulk approval threshold

>= 80% confidence

Increase stock - Item A

180 -> 240 units

+$28K

AI confidence

95%

Redistribute - Item B

95 units to hub B

+$12K

AI confidence

82%

Pause reorder - Item C

Pause for 2 weeks

-$3K risk

AI confidence

68%

Multi-input AI assistant

The same intent can start from voice, natural language, or pasted structured data. All paths converge into the same review screen.

AI UXInput modesConvergence

Smart filter chips with counts

Composable filters, each with a live count. The list reorders with motion when the selection changes.

Data UIFiltersLive counts

The pieces that repeat.

Foundational components that show up in any scaled product, shown in their raw form so they read as a system, not as isolated screens.

3 demos

Bulk allocation selector

Assign multiple roles to a project in one operation, with quantities per role and a live recalculated total.

Bulk patternsFormsLive total

Step 1

Assign roles

Each chip adds one person for that role. Before, this was one role per entry; now a project can include multiple roles in one operation.

Step 2 - Hours / person

40h

Step 3 - Summary

No roles assigned yet

0 people · 40h each

Design tokens playground

Tokens controlled by sliders, with a live preview. Presets simulate how the system would behave with another brand layer.

TokensThemesRe-skin

Presets

Accent color#B85131

Border radius16px

Font weight500

Output

:root {
  --accent: #B85131;
  --radius: 16px;
  --weight: 500;
}

Live preview

Card title

A sample card that follows the tokens.

Badge

Variable font axis lab

Weight and width sliders with a live preview, presets, and the exact CSS output.

TypographyVariable fontsCSS

Design with code in mind.

Weight (wght)500

Width (wdth)100

Presets

CSS output

font-variation-settings: 'wght' 500, 'wdth' 100;

03 · Data UI

Where decisions happen.

Patterns for dense information screens: inline editing without modals and metrics that communicate value, movement, and direction.

2 demos

Inline editable cell

A table where each cell becomes editable on click. Enter saves, Esc cancels, and clicking away also saves.

TablesInline editingKeyboard

ProjectOwnerHoursStatus

Click any cell to edit · Enter to save · Esc to cancel

Number ticker with delta

When a metric changes, it communicates the value, how much it moved, and in which direction.

MetricsMotionTabular numbers

Revenue

$48,230

+12.4%

vs. previous period

04 · UX Patterns

Details you notice when they are missing.

Systematized status pills and empty states that do more than say there is no data.

2 demos

Status pill system

Five semantic types across three variants and three sizes, with an optional status dot.

StatusVariantsSizes

Variant

Size

Indicator

ActiveIn reviewPausedCriticalDone

15 combinations (5 types x 3 variants) x 3 sizes - one component.

Empty states gallery

Each empty state works like a small onboarding moment: it names the problem, gives context, and offers the next step.

Empty statesUX writingOnboarding

No results

Try different filters.

Your search did not find any matches. Remove a filter or broaden the criteria to review more results.

Want to see how they work inside real products?

Explore the case studies.

See work →