01A workspace, at working density
Interactive sample · all names and figures are fictional
Recent orders
Sample data| Order | Customer | Channel | Amount | Status |
|---|---|---|---|---|
| Alex Morgan | Online store | $147.00 | Paid | |
| Jamie Parker | Online store | $98.00 | Review | |
| Taylor Reed | Online store | $49.00 | Paid | |
| Sam Ellis | Online store | $196.00 | Paid | |
| Casey Lane | Online store | $98.00 | Failed | |
| Jordan Bell | Online store | $147.00 | Pending |
02The same visual language, a tighter scale
Change the controls above to compare the entire page
Color + surfaces
--background--card--muted--primary--accent--borderSoftly tinted neutrals, a restrained accent, and opaque data surfaces. Elevation marks a boundary without adding bulk.
Typography
Geist Sans + Mono16 / 60014 / 60014 / 40012 / 400tabularSave space through layout and spacing. Keep primary information readable; use small text for secondary detail.
Density is a layout choice
Font size stays the sameIn a 352px table body, 32px rows fit 11 records; 44px rows fit 8. Actual rows grow with their content. Touch controls have a 44px minimum.
03Components with a job to do
Existing accessible primitives, composed into compact patterns
Simple section
Body content has an inset on every side.
Section with action
Explicit flush content retains its layout.
A longer section title that remains readable when the available width is narrow
Help labels and text spacing
Read the for details.
Actions + feedback
One primary action per group. Secondary actions stay visually quiet.
Toolbar and table actions use small buttons: 28px on a mouse, with 44px touch targets. Form buttons follow control density.
Try an action to see inline feedback.
Forms that fit
Progressive disclosure
When to use a panel
Code
Lumen code surfaces, at app densityconst preferences = { density: "compact", timezone: "America/Chicago" };Add PrismCodeToken for comments, highlighted names, and strings. Plain text works too; block code keeps its own dark surface.
"content_title":"TEMPL Daily Wellness",
"content_description":"A TEMPL presentation"Omit the filename for a bare snippet. Inline code, such as density="compact", uses a small accent chip.
# no filename needed
density: "compact",