Active portals12
Quiet Operations · Reference 1.0
Client Portal design system.
The production reference for tokens, components, states, spacing, and motion. Use the visible class names when adding or reviewing interface work.
Color tokens
Tenant color is an accent. Neutral surfaces carry hierarchy.
neutral-50 · surface
neutral-200 · border
neutral-500 · muted
neutral-900 · primary
brand · accent only
Actions and icon frames
Icons always occupy a centered, fixed frame. Highlighting changes the frame, never the glyph geometry.
ActiveCompleteNeeds attention
Tabs and navigation states
Horizontal and vertical selections use the same complete outline.
Operational metrics
Use for the dashboard’s primary status strip.
Active clients48
Activity, 24 hours126
Synced objects24
Cards and status
Fine outline, restrained elevation, consistent 12px radius.
Projects
Person scoped · 24 visible records
Client accounts
Mapped to synchronized CRM people.
Recent activity
Writes, exports, and invitation changes.
Metadata
Current schema and connection health.
Forms and tables
38px controls, visible focus, compact CRM density.
| Project | Status | Owner | Due date |
|---|---|---|---|
| Atlas website launch | In progress | Maya Chen | Jul 18, 2026 |
| Northstar research | At risk | Theo Martin | Jul 8, 2026 |
Inline feedback Keep success, warning, and error messages next to the action context.
Motion
220ms content entrance, 110ms exit. No decorative movement.
View and tab content enters with a restrained 6px lift.
Implementation map
Canonical production selectors and intended use.
.app-section-tabHorizontal context tab with full outlined active state..sidebar-linkPrimary vertical navigation with framed icon and outlined row..builder-stage-navState-preserving, one-section-at-a-time configuration stages..stat-cardHigh-emphasis operational metric..cardDefault bounded surface with fine outline and restrained shadow..activity-iconCentered 28–38px icon tile; never offset the SVG itself..workspace-viewRoute-level transition boundary.--brand-primaryTenant accent for focus and selection.--icon-colorIndependent tenant-controlled color for navigation and operational icons.