Enterprise Patterns
Data-rich, role-based software stays efficient and legible under load — these patterns are how.
01 · Pillars
Four pillars under load
The rules that keep data-dense surfaces from collapsing into noise.
Density with dignity
Pack screens with information — respect the reader. Every pixel earns its place.
Stable geography
Chrome, primary actions, and content live in the same place on every screen.
Legible under load
Typography and spacing hold up at 10 rows or 10,000. No "nice at 10" solutions.
Predictable motion
Subtle transitions only. Long sessions don’t need applause.
02 · Patterns
Six patterns we reach for
Start from these compositions instead of a blank canvas.
Master / Detail
A scannable list on the left, full context on the right. The anchor pattern for any resource-oriented admin.
Three-pane shell
Global nav + contextual nav + content. Use sparingly — reserve for high-frequency power users.
Data table
Left-align text, right-align numbers, monospace for IDs. Zebra only when rows carry distinct meaning.
Filter rail
Facets live in a persistent left rail, summary pill row up top. Mirror filters into the URL.
Long form
Group related fields with a shared heading. Surface inline validation. Summarize errors on submit.
Progressive disclosure
Skeletons during load, then content. Never a full-page spinner above the fold.
03 · Status
One vocabulary, six chips
Map every business state to one of these. Inventing a seventh is usually a smell.
| Chip | State | Token | Meaning |
|---|---|---|---|
| Draft | Draft | --color-base-content/60 | Not yet submitted. |
| Pending | Pending | --color-info | Awaiting review or action. |
| Active | Active | --color-success | In production, healthy. |
| Paused | Paused | --color-warning | Temporarily suspended. |
| Error | Error | --color-error | Attention required. |
| Archived | Archived | --color-base-content/40 | Retained but read-only. |
04 · Multi-tenant
Themed, not forked
When a tenant ships with their own colors, the system still runs the layout.
Swap tokens, not layouts
Tenant branding flips a token set on <html>. Never fork a page template.
Core shells stay universal
Login, billing, and legal surfaces remain system-consistent regardless of tenant theme.
Accessible on both sides
A tenant’s theme must still pass WCAG 2.2 AA contrast — verify before enabling.