Editing an artifact
A slide or email canvas stays light in dark mode: it represents the finished artifact.
From components to complete screens · v1.18.0
Give your interface a shape.
Choose the frame. Find the right page. See how it adapts.
Start with the shell.
The persistent frame around your content.
Shell A
Learner portal
Top navigation keeps the focus on learning. Comfortable spacing gives content room to breathe.
Shell B
Admin workspace
Persistent side navigation and a top bar frame a focused workspace. Compact density supports daily operations.
Pattern C
Assistant alongside your work
The assistant joins an existing portal or workspace. It is an additional panel, not a separate application shell.
Then shape the page.
Seven compositions for seven kinds of work.
01 · Archetype
Pipeline & queue
Follow work through stages. Columns show status; cards keep each item visible.
02 · Archetype
Authoring & editor
An editing surface separates tools, the artifact and its properties. On mobile, switch modes instead of squeezing all panes together.
03 · Archetype
Dashboard & analytics
Bring measures and trends together so people can see what needs attention.
04 · Archetype
Browse & library
Help people explore a collection with categories, filters and recognizable content cards.
05 · Archetype
Detail & record
Keep the identity of one record visible while its information is organized into tabs and sections.
06 · Archetype
Workflow & wizard
Guide one task through clear steps, with a visible current stage and consistent navigation.
07 · Archetype
Conversation & AI
Give the conversation a stable space with a readable message history and an accessible composer.
1280 px
Explore the working example, or open it full screen for a closer look. Theme controls are inside the example. All content is sample data.
One shell. Different kinds of work.
A portal, a kanban board and an editor should not look like the same dashboard. The shell provides familiarity; the page composition fits the task.
Building a workspace
A report or query builder follows the dark theme: its canvas is part of the working interface.
Keeping the frame stable
In a fixed-height panel, content scrolls inside it. Corners and pinned actions stay visible.