Design System
Pages · Apps
Whole app screens — kanban, mail, chat, calendar, notes, POS and more — each a full page over the shared app shell, composed from the kit over mock fixtures.
A kanban board — Backlog / In-progress / Review / Done columns of task cards.
Board · Aurora
Sprint 14 · drag to move
Backlog
3Draft the pricing page copy
Audit color contrast on dark mode
Spike: offline-first cache
In progress
2Wire the settlement receipt
Illustrate the empty states
Review
2Q3 revenue report
Onboarding flow copy
Done
2Repin goldens off new tokens
Ship the API keys screen
A notes app — a wall of colored note cards with tags and timestamps.
Notes
Your thinking, kept
Q3 planning outline
Three themes: honest metrics, one composition ladder, and paying down the surface debt. Open question on churn framing.
Palette migration notes
Repin ritual: frontend:css → snapshot bodies → PIN=1 driver. Diff must be theme-only; no member surface moves.
Reading list
Server-first rendering, deterministic builds, why numbers should re-execute. Add the drift-breaks-the-build field report.
Interview questions
What did you build that you later deleted, and why? How do you keep a design system from drifting?
Groceries
Coffee (matte stone pour-over), oat milk, olive oil, field notebook refills.
A chat app — a conversation list beside a message thread with an input composer.
Messages
Team & direct chats
Maya Ortiz
Online
Can you review the deck before 2pm? The revenue slide re-executes now.
9:41
On it — opening now.
9:42
Thanks. The only open question is the churn framing on slide 6.
9:43
Lower-is-better, so I flipped the delta color. Looks honest now.
9:45
Perfect. Ship it. 🎉
9:46
A social feed — a profile summary and a stream of posts with engagement counts.
Feed
What your network is shipping
Maya Ortiz
@mayaortiz · Head of Product
Maya Ortiz @mayaortiz
2h ago
Shipped the honest-metrics rewrite. Every number on the dashboard now re-executes from source. No more quietly rounding revenue up.
Devin Park @devpark
5h ago
Reminder: drift breaks the build. If your design system doesn’t enforce itself, it’s just a suggestion.
Aïsha Nouri @aishanouri
Yesterday ago
One committed token set → light and dark, every surface, zero runtime theme thrash. Here’s the before/after.
A mail client — folders, an inbox list and a reading pane, three panes.
12 unread
Q3 planning deck — review by 2pm
Dropped the latest cut in the shared drive. The revenue slide re-executes now, take a look before the sync.
Your payout of $4,200 is on the way
This payout covers invoices settled between Jul 14 and Jul 21. Expected arrival in 1–2 business days.
Invoice INV-2042 — thank you
Thanks for the quick turnaround on the migration. Invoice attached, net-30 as agreed.
Pushed the fix — tests are green
The chart regression is gone; goldens re-pinned. Merging once you give the nod.
[northwind/app] 3 checks passed
All required status checks have passed on your pull request #418. Ready to merge.
Updated the token set — light & dark
Repinned every surface off the new palette. Diff is theme-only, no member surface moved.
Weekly digest: 14 pages updated
Here is what changed across your workspace this week, grouped by team.
A to-do list app — grouped, checkable tasks with tags and an add row.
To-do
Grouped by area
Finance
Billing
Product
People
A task tracker — a filterable table of tasks with status, tag and owner.
Tasks
3 open · 1 done
| Task | Area | Owner | Status |
|---|---|---|---|
| Review Q3 revenue report | Finance | MOMaya Ortiz | Done |
| Approve pending invoices | Billing | DPDevin Park | Pending |
| Ship the pricing page update | Product | ANAïsha Nouri | Pending |
| Onboard two new teammates | People | LFLeo Faber | Pending |
A calendar app — a month grid with event chips and a side agenda.
July 2026
Team calendar
Agenda
Upcoming this month
Design review
Jul 3 · 10:00
Board sync
Jul 8 · 14:00
Payout window
Jul 14 · All day
Q3 planning
Jul 22 · 13:00
1:1 · Leo
Jul 22 · 16:00
Sprint demo
Jul 27 · 11:00
A file-manager app — a folder tree, a grid of file tiles and a details strip.
Files
12.4 GB of 50 GB used
All files
6 items
Q3-planning-deck.pdf
4.2 MB
brand-tokens.json
18 KB
revenue-model.xlsx
242 KB
hero-render.png
1.1 MB
contract-cartographer.pdf
320 KB
demo-walkthrough.mp4
86 MB
An API-keys screen — a table of masked keys with scope and status, and a create panel.
API keys
Manage access to the API
Your keys
Keys are shown once at creation
| Label | Token | Scope | Last used | Status |
|---|---|---|---|---|
Production server Created Jan 12 | nw_live_••••••••4210 | read · write | 2m ago | Active |
CI pipeline Created Mar 4 | nw_live_••••••••8f31 | read | 1h ago | Active |
Staging Created Apr 21 | nw_test_••••••••9a02 | read · write | Yesterday | Active |
Legacy import Created Nov 3 | nw_live_••••••••1c77 | read | 6mo ago | Revoked |
Create a key
Give it a name and a scope
You will only see the secret once. Store it somewhere safe.
A point-of-sale app — a product grid with category tabs and a running cart with totals.
Point of sale
Front counter
Espresso
$3.50
Cappuccino
$4.50
Cold Brew
$5.00
Croissant
$3.75
Blueberry Muffin
$3.25
Avocado Toast
$8.50
Matcha Latte
$5.50
Sparkling Water
$2.50
Current order
A courses app — a catalog grid of courses with authors, levels and progress.
Courses
Catalog & progress
Continue learning
Pick up where you left off
Composition, end to end
68% complete
Honest metrics in practice
Completed
Deterministic rendering
22% complete
Design tokens & theming
0% complete