Patterns
Components are means; patterns are the end. These are real, interactive product screens you can lift into a SaaS or AI-native app. Try them — they're live.
App Shell
The frame every screen lives in: a quiet top bar, a scrollable content well, and a thumb-friendly tab bar.
Today
Settings Screen
Grouped, inset controls with instant toggles and soft chevrons — dense information made calm.
Settings
Profile Screen
A warm, human introduction: gradient cover, overlapping avatar, airy stats, and an obvious next step.
List + Detail
A responsive master/detail flow that pushes to full-screen on mobile and splits into two panes on wider screens.
Inbox
2 newSearch Screen
Forgiving discovery: recents and trending fill the empty field, results filter live, and a clear button is always near.
AI Chat Screen
A calm conversation with an assistant — gentle bubble reveals, a thinking indicator, and reply suggestions.
Atlas
● Online
Empty State
Nothing here yet, framed as an opportunity: a soft illustration, one warm line, and a single obvious action.
Projects
Your first project starts here
Create a space for your work, or bring something over from another tool. It only takes a moment.
Loading State
Skeletons that mirror the real layout so nothing jumps when content lands. Calm placeholders, never spinners.
Command Bar
Keyboard-first navigation. Open with ⌘K, type to filter, move with arrows, run with Enter.
Press ⌘K anywhere on this page to open it.