1Strataix · Wireframes · low-fi · before the hi-fi
The structure behind the visual. Every one of these layouts has a hi-fi equivalent in the canvas — click through to see the finished version. Kept here for provenance.
1aOverview · dashboard — persistent left nav · topbar · 6-up KPIs · hero chart + side list · two mid charts · table + alerts
See hi-fi →
LOGO
org
budget
search
24h
live
KPI
KPI
KPI
KPI
KPI
KPI
Spend · hero chart
Spend by model
Latency chart
Traffic chart
Top cost drivers · table
Alerts & findings
1bRequests · list + detail drawer — filters top · scrollable log · right drawer with timeline, prompt, response, actions
See hi-fi →
LOGO
filter chips
export
save
request · pill + id
key / value fields
Timeline
Response · error
Replay
Route
Fallback
1cRoutes · flow canvas — left route list · canvas with entry → guardrails → transform → primary + fallbacks → response · A/B + health strip
See hi-fi →
LOGO
filter + new
support/triage · live
copilot/complete
data/extract
support/summarize
chat/assistant
v12
history
Deploy
ENTRY
guardrails
transform
primary · 92%
fallback · 7%
fallback · 1%
response
A/B split · canary wins
1dSettings · Appearance · theme + accent — sub-nav of settings · theme tile row · accent swatch row · live preview with dark+light side-by-side
See hi-fi →
LOGO
header · "Appearance"
+ more
THE REST · GO STRAIGHT TO THE HI-FI
The wireframing step covered 29 surfaces in total. These four lo-fi diagrams give you the layout grammar — everything else uses the same vocabulary (sidebar + topbar + content grid) and lives in the hi-fi pages below.
Sitemap Onboarding Sessions Providers Guardrails Keys Budgets Alerts Billing Members Integrations Audit log States Mobile Patterns Command palette Emails Pricing Docs Changelog Style Guide Handoff Hi-fi direction Landing