✦ Sample builds and concept interfaces · brands and data are fictional

Interfaces that make complex things feel simple.

Seven interactive samples by Marvis Huff, spanning customizable UI, heat maps, dashboards, LLM assistants, APIs, real-time monitoring and mobile. Everything below is live, so click around.

7interactive samples
6solution areas
Liveevery sample is interactive
At a glance

Seven samples, one standard.

Filter by solution area, or jump straight to a project.

Sample 01

Theme Studio Customizable UI & design tokens

A live theming tool that lets product teams restyle an entire interface (color, corner radius, density and light or dark mode) and export the result as design tokens developers can drop straight into code.

Customizable UI
  • Live preview: every component updates instantly
  • Design tokens exported as ready-to-use JSON
  • Light & dark modes built from one token set
Built withCSS custom propertiesDesign tokensJavaScriptAccessibility
🔒 themestudio.demo

Theme settings

{ "color.accent": "#2f6fb0", "radius.base": "12px", "space.base": "16px", "mode": "light" }
New release
Welcome back, Jordan

Your workspace has 3 projects in progress and 2 reviews waiting.

Create projectInvite team
Website redesign72%
Mobile onboarding45%
Notifications
Email digests
Push alerts
Weekly report
Design team

8 members

Storage

18.4 GB of 50 GB used

Interactive: pick a color, drag the radius, switch modes
Sample 02

Footfall Retail traffic heat map

A heat map that shows when stores are busiest, hour by hour across the week, so operations teams can schedule staff around real demand. Switch locations and hover any cell for exact counts.

Data visualization
  • 168-cell heat map with a single-hue scale and legend
  • Hover tooltips with exact visitor counts
  • Auto-computed insights: peak hour, busiest day, weekly total
Built withSVG / CSS gridData visualizationJavaScript
🔒 footfall.demo

Visitors by hour

Average weekly footfall · last 8 weeks

12a
3a
6a
9a
12p
3p
6p
9p
Mon
Tue
Wed
Thu
Fri
Sat
Sun
Fewer More visitors
Peak hourSat 6p452 visitors
Busiest daySaturday3,183 visitors
Weekly visitors17,617across all hours
Visitors by day
MTWTFSS
Interactive: switch locations and hover any cell
Sample 03

Pulse Executive KPI dashboard

A one-screen executive dashboard: headline KPIs, revenue trend against last year, performance by region and channel mix. Change the date range and every chart updates.

DashboardsData visualization
  • Date-range filter (30 days, 90 days, 12 months)
  • Crosshair tooltip on the trend line
  • Accessible palette checked for color-vision deficiency
Built withSVG chartsResponsive layoutREST dataJavaScript
🔒 pulse.demo

Overview

Revenue$4.82M▲ 12.4% vs prior
Active customers38.2k▲ 6.7% vs prior
Net promoter score61▲ 4 vs prior
Churn rate2.1%▼ 0.5 pts vs prior
Revenue vs last year Last 90 days
This yearLast year
$290K$255K$220K$185K$150K
Revenue by region $K
North America1,639
Europe1,301
Asia Pacific1,012
Latin America530
Middle East337
Channel mix share of orders
4channels
  • Online46%
  • Retail28%
  • Partners17%
  • Direct sales9%
Interactive: change the date range and hover the chart
Sample 04

Ask Atlas LLM knowledge assistant

A retrieval-augmented AI assistant that answers questions from a company's own documents and shows exactly where every answer came from. Hover a citation to highlight its source.

AI & LLMs
  • Streaming answers with inline citations
  • Source panel linked to every claim
  • Guardrails: answers only from approved documents
Built withLLM APIsRAGVector searchStreaming UI
🔒 atlas.demo
+ New chat
Today
Parental leave policy summary
Q3 travel budget rules
This week
Onboarding checklist for engineers
Compare vendor security terms
Draft release notes from tickets
Explain the expense workflow
Ask AtlasModel: Balanced ▾
How much parental leave do new employees get, and when does it start?
3 sources1.4sAnswer grounded in company documents
Ask a follow-up question…
Sources
1Employee Handbook 2026Section 7.2 · Family leave
2Benefits GuidePage 14 · Eligibility
3HR Policy FAQUpdated March 2026
🛡️ Answers are limited to approved documents. Sensitive data is masked.
Interactive: hover a citation, or replay the answer
Sample 05

Relay API developer portal

A developer portal for a shipping API: browsable endpoints, parameter reference and copy-ready code in three languages, with a "Try it" console that sends a sample request.

APIs
  • Code samples in cURL, JavaScript and Python
  • Try-it console with live response and latency
  • Clear reference for parameters and types
Built withRESTOpenAPIJSONDeveloper experience
🔒 developers.relay.demo
Relay API
Shipments Tracking
POST/v1/shipments

Create a shipment

Creates a new shipment and returns a tracking ID, estimated delivery date and quoted price.

ParameterTypeDescription
originrequiredstringPickup city and country code
destinationrequiredstringDelivery city and country code
weight_kgrequirednumberPackage weight in kilograms
serviceenumstandard · express · overnight
metadataobjectUp to 20 custom key-value pairs
curl https://api.relay.demo/v1/shipments \
  -H "Authorization: Bearer $RELAY_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "origin": "Rotterdam, NL",
    "destination": "Austin, US",
    "weight_kg": 12.5,
    "service": "express"
  }'
201 Created84 ms
{
  "id": "shp_c1bajuso",
  "status": "label_created",
  "eta": "2026-10-03",
  "price": { "amount": 48.20, "currency": "USD" }
}
Interactive: switch languages and send the request
Sample 06

Sentinel Real-time operations monitor

A dark-mode command center for engineering teams: live uptime, latency and throughput, service health at a glance, a streaming log feed and open incidents.

DashboardsReal-time
  • Live metrics that update every second
  • Status with icon + label, never color alone
  • Streaming log with severity highlighting
Built withWebSocketsCanvas / SVGObservabilityDark UI
🔒 sentinel.demo

Sentinel LIVE

Production · all regions
Uptime (30d)99.98%
p95 latency182 ms
Requests / sec4,210
Error rate0.12%
Service health 9 services
Gateway✓ Healthy
Auth✓ Healthy
Search✓ Healthy
Payments▲ Degraded
Orders✓ Healthy
Inventory✓ Healthy
Notifications✓ Healthy
Reports✕ Down
Analytics✓ Healthy
Live log streaming
18:50:12 INFO GET /v1/orders 200 42ms
18:50:13 INFO POST /v1/checkout 201 118ms
18:50:14 WARN payments: p95 latency 612ms > 500ms
18:50:15 INFO GET /v1/search?q=shoes 200 36ms
18:50:16 ERROR reports: connection refused (retry 3/5)
18:50:17 INFO auth: token refreshed user_8f2c
18:50:18 INFO GET /v1/inventory 200 51ms
18:50:19 WARN queue depth 1,240 (threshold 1,000)
18:50:20 INFO deploy: gateway v2.14.1 healthy
18:50:21 INFO GET /v1/orders 200 42ms
Open incidents 2 active
✕ CriticalReports service unavailableStarted 6 min ago · on-call paged
▲ WarningPayments latency above targetStarted 22 min ago · investigating
✓ ResolvedSearch index lagResolved 1 h ago · 14 min duration
Interactive: metrics and logs update live
Sample 07

Wayfare Mobile travel app

A mobile travel app covering discovery, a day-by-day itinerary and booking confirmation, designed mobile-first with large touch targets and a calm, image-led layout.

Mobile
  • Three core flows: discover, plan, book
  • Mobile-first spacing and touch targets
  • Consistent components across every screen
Built withMobile UIDesign systemPWA-readyFigma
9:41●●● ▮
Good morning, Alex
Where to next?
⌕ Search destinations
PopularBeachesCitiesNature
♡NorwayFjord Coast★ 4.9 · from $890
Desert Dunes
Lagoon Isles
9:41●●● ▮
Day 2 of 5
Fjord Coast
Tuesday, Oct 14
08:30
Breakfast at the harborWaterfront café · 10 min walk
10:00
Fjord boat tour3 hours · tickets confirmed
14:00
Mountain rail journeyScenic route · window seats
19:30
Dinner reservationTable for 2 · local seafood
9:41●●● ▮
You're all set!

Booking confirmed and sent to your email.

TripFjord Coast
DatesOct 13 – 18
Travelers2 adults
Total$1,780
View itinerary
Interactive: three screens from one design system
Capabilities

What I can build for you.

From a single dashboard to a full product front end, with the delivery discipline to ship it.

Customizable UI

Themeable interfaces and design systems driven by tokens, so brands can restyle without rewrites.

Heat maps & data viz

Heat maps, trends and distributions with accessible palettes, legends and tooltips.

Dashboards

Executive and operational dashboards that answer the key question in five seconds.

LLMs & AI assistants

Chat and retrieval-augmented interfaces with citations, guardrails and streaming answers.

APIs & integrations

Developer portals, REST integrations and the front ends that consume them.

Real-time & mobile

Live-updating monitors and mobile-first apps that stay fast and readable.

Process

How a build comes together.

1

Discover

Understand the users, the data and the decision the interface needs to support.

2

Design

Wireframes, then a design system with tokens, so every screen stays consistent.

3

Build

Accessible, responsive front ends wired to real APIs and AI models.

4

Ship & iterate

Staged releases, feedback loops and measurable improvements every sprint.

HTML5CSS3JavaScriptTypeScriptReactNext.jsNode.jsPythonREST APIsSQLSVG & CanvasLLM APIsRAGAWSAzureFigma
Let's work together

Have an idea? Let's build it.

Get in touch