Library
Every component, state, and pattern in the system. Composed against Apple HIG, Material, Polaris, and Atlassian — then tuned to Lumen's restraint.
What's in here
A flat catalog. Each section labels variants by their canonical names so consumers can search the page for anything.
Layout & structure
Page, Section, Header, Footer, Sidebar, Drawer, Modal container, Panel, Sheet, Toolbar, App bar, Divider, Spacer, Layout grid, Stack, Tabs panel.
Inputs · forms
Text · Textarea · Search · Number · Password · OTP · Tags · Combobox · Select. Field primitive bundling label, hint, error, leading, trailing.
32-character max
⌘K opens command palette
Markdown supported
At least 8 characters with mixed case
Press Enter or comma to add
Filter by lane price
Confidence threshold
For dispatch coordination only — never used for marketing.
Use a work email
Selection controls
Checkbox · Radio · Toggle · Switch · Segmented · Combobox · Select.
Date · Time · Calendar
Date picker, time picker, calendar (month / week / agenda).
File · image upload
Drop zone · file preview · validation · progress.
Data display
Card · List · Tag/Chip · Badge · Avatar · Tooltip · Popover · Accordion · Carousel · Timeline · Tree view · Empty state.
Spot rates refresh every 90 seconds and reflect the live market on a confidence-weighted basis.
- Quote sentLumen AI · 10:42 AM
- Customer requested rateSterling LTL · 10:38 AM
- Lane createdAvery M. · 10:31 AM
- Carrier scorecard updatedSystem · Yesterday
When a carrier responds to your request for rate, it'll show up here. Most quotes arrive within 6 minutes.
Adjust your date range or remove a filter to see results.
- Order ID
- QT-3442-A
- Customer
- Sterling LTL
- Origin
- Dallas, TX 75201
- Destination
- Long Beach, CA 90802
- Equipment
- Dry van · 53'
- Quote
- $1,840.00
- Status
- Live
Tables · data grids · kanban
Data table with toolbar, filters, sort, density, sticky columns. Kanban for workflows.
| Lane | Carrier | Rate $ | Δ | Status |
|---|---|---|---|---|
| TX → CA-014 | Sterling LTL | 1,840.00 | Live | |
| OH → FL-022 | Saia | 1,420.00 | Pending | |
| WA → NY-009 | Estes Express | 3,210.00 | Won | |
| AZ → IL-031 | ABF Freight | 2,104.00 | Lost |
Charts · graphs
Line · Area · Bar · Stacked bar · Donut · Pie · Heatmap · Scatter · Radar · Treemap · Funnel · Histogram · Waterfall · Bullet · Cohort · Sparkline.
- Sterling LTL38%
- Saia22%
- Estes18%
- ABF12%
- Others10%
- Won64%
- Lost22%
- Pending14%
| Cohort | M0 | M1 | M2 | M3 | M4 | M5 |
|---|---|---|---|---|---|---|
| Jan | 94 | 84 | 67 | 57 | 50 | 35 |
| Feb | 97 | 82 | 67 | 59 | 50 | |
| Mar | 91 | 81 | 73 | 62 | ||
| Apr | 95 | 81 | 70 | |||
| May | 100 | 83 | ||||
| Jun | 92 |
KPI · metrics
Stat block · KPI card · trend indicator · sparkline · goal progress · meter.
Feedback · status
Alert · banner · toast · snackbar · inline validation · system status.
Modals · drawers · popovers
Modal · type-to-confirm · drawer/sheet · popover · cookie consent.
Saia raised their fuel surcharge by 11% on Wednesday. The base rate is unchanged.
Essential cookies keep this site working. Optional cookies help us understand how it's used.
E-commerce primitives
Pricing · payment buttons · cart drawer · product gallery · selectors · checkout progress · feature comparison · inventory.
- Up to 50 quotes / month
- Live carrier rates
- Email support
- Unlimited quotes
- Multi-stop quoting
- API access
- 8-hour support SLA
- Everything in Growth
- Dedicated CSM
- 99.95% uptime SLA
- SOC 2 audit assistance
| Feature | Starter | Growth | Scale |
|---|---|---|---|
| Live carrier rates | |||
| Multi-stop quoting | — | ||
| API access | — | ||
| Dedicated account manager | — | — | |
| SLA · 99.95% uptime | — | — | |
| SOC 2 audit assistance | — | — |
Aero Trail Runner v2
- Cart
- Information
- Shipping
- Payment
- Confirm
Auth · account · settings
Login · signup · social login row · MFA · session expired · workspace switcher · settings panels.
AI · chat · copilot
Prompt input · suggestion · confidence · citation · thinking · shimmer · chat bubbles · composer · copilot panel.
Saia carries this lane at $0.18/mi vs current $0.24/mi. Adds 38 mi but stays inside SLA. Sterling LTL has 4 active loads on the new path so capacity is reliable.
All multi-stop shipments under 12,000 lbs are billed at base rate plus $42 per additional stop.
All multi-stop shipments under 12,000 lbs are billed at base rate plus $42 per additional stop.
Can we get a sanity check on the @sterling-ltl numbers? Their fuel surcharge looks 11% high.
Pulled the underlying — they re-baselined yesterday. Numbers check out.
Notifications · activity
Notification center · inbox item · grouping · preferences.
Editor · code · keyboard
Code block · markdown editor · keyboard shortcuts.
import { Stat, LiveDot } from "@lumen/react";
export function Hero() {
return (
<Stat label="Lane TX→CA" value="$1,842" trend={{ delta: 1.2 }}>
<LiveDot />
</Stat>
);
}State matrix
Default · Hover · Focus · Active · Pressed · Selected · Disabled · Loading · Error · Success · Empty · Read-only · Dragging.
Page templates
404 · 403 · 500 · Maintenance · Error recovery · Login · Onboarding.
The link's expired or never existed. Search the workspace or head home.
You don't have permission to view this resource. Ask an admin to share access.
Something on our side broke. We've been notified — try again in a few seconds.
We're rolling out a database migration. Quoting is paused until 14:00 UTC. Existing shipments continue to track normally.
Trust · compliance · environment
Trust badges · environment badges · sandbox/test mode banners.
Marketing · landing
Hero · trust row · feature grid · stat strip · testimonial · pricing · footer.
The instrument panel for North-American freight.
Live carrier rates, automated quoting, and operational signal in one calm surface. Built for the people who actually move trucks.
12,000 carriers indexed, refreshed every 90 s.
From email to bookable quote in under 6 minutes.
Confidence scores on every recommendation.
Built for sustained, eight-hour use.
Everything in the UI is also a typed endpoint.
Compliance posture documented in the trust center.
Spec · anatomy · handoff
The handoff layer: anatomy diagrams, redline specs, token references.
{
"color": {
"accent": "#00FA8A",
"fg": "var(--text-primary)",
"bg": "var(--surface-page)",
"muted": "var(--text-tertiary)"
},
"radius": { "sm": 5, "md": 7, "lg": 10, "xl": 14 },
"shadow": {
"sm": "0 1px 2px rgba(0,0,0,.06), 0 1px 1px rgba(0,0,0,.04)",
"md": "0 1px 2px rgba(0,0,0,.06), 0 4px 12px -2px rgba(0,0,0,.08)"
},
"motion": { "fast": "140ms", "base": "180ms" }
}