Atlas Workspace Console UI Kit
A light-first creative operations console with ten coordinated components, a Flip-powered project inspector, workload charts, approvals, command search and responsive app navigation.
About This Kit
A light-first workspace console that sits between a complete SaaS template and a reusable component kit. Atlas combines a real creative-operations overview with ten extractable modules, all sharing one warm, restrained token system.
Read the full effect overview
The signature project inspector uses GSAP Flip to carry a selected project from the delivery board into a persistent detail surface, then returns it without stale geometry. Charts, metrics, approvals, activity, command search and responsive navigation make the assembled demo useful as a product starting point rather than a collection of disconnected cards.
What's Included
- Ten coordinated workspace components driven by one role-based token file
- Light porcelain theme by default with an optional ink theme from one root attribute
- Responsive app shell with a top workspace bar, desktop icon dock and mobile bottom tabs
- Four count-up metric cards with restrained trend treatments
- Workload curve with keyboard-operable 7d, 30d and 90d range controls
- Filterable delivery board with Flip reordering and a reusable project inspector
- Desktop side inspector that becomes a mobile bottom sheet, with focus trap and return
- Team capacity, approval queue and live activity components with complete empty and action states
- Cmd/Ctrl+K command palette with filtering, arrow-key navigation and live result counts
- Shared toast feedback, reduced-motion end states and touch-safe controls
Perfect For
- Creative agencies coordinating projects, reviews and launch dates
- SaaS workspaces that need a complete light-mode dashboard foundation
- Client portals combining delivery status with team capacity
- Internal operations tools that should feel calm rather than technical
How It Works
One calm design system
Every surface, ink colour, shadow, radius, spacing step and motion duration comes from tokens.css. Components consume role names rather than palette values, so the optional ink theme and any buyer re-skin require no component-level overrides or JavaScript branches.
A project moves into focus
The delivery board captures state with Flip.getState(), moves the selected project's identity into the inspector, and animates both the source layout and destination with Flip.from(). Closing reverses the relationship, restores focus and clears all temporary inline state so a second open is identical to the first.
Complete interaction contracts
The command palette and project inspector share a refcount-safe layer manager, trap focus, close from Escape and return focus to their trigger. Range controls use roving tabindex, live changes are announced, and reduced motion keeps every interaction while collapsing animation durations.
