Prism
/ Next-app themeLumen's clarity. More room to work.
00Press me
Soft-body surfaces ported from Jelly UI · press, hold, drag, release
Every control below paints a soft body on a canvas behind the real control. Press and hold to dent it where your pointer is, drag while holding, and let go to watch it settle. Enter and Space squish from the center. Tab to a control and its focus ring is painted on the same surface, so the ring wobbles with the body.
Flat is the same button without a body, for comparison. Firmness retunes the membrane springs. Reduced does what the system reduced-motion setting does: the surface paints and the focus ring still works, but nothing deforms.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 | Phone | $98.00 | Review | |
| Taylor Reed | Marketplace | $49.00 | Paid | |
| Sam Ellis | Online store | $196.00 | Paid | |
| Casey Lane | Online store | $98.00 | Failed | |
| Jordan Bell | Phone | $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.
Compound section
Section with help
Section with description
A longer section title that remains readable when the available width is narrow
Help labels and text spacing
Read the for details.
Resizable panes
Drag either divider, or focus it and use the arrow keys. Double-click or Enter restores the default width. Widths here reset on reload; pass a storage key to keep them.
Floating windows
PrismWindow shows a record without leaving the page: drag the title bar, resize from the corner grip, minimize, maximize, or press Escape to close. Up to three open here.
Motion
Every transition here reads the shared motion tokens, so the whole app moves at one pace. Ask your operating system for reduced motion and each one snaps instead.
Button status
The label and badge swap in place without moving the button. Done returns to idle after 1.6 seconds.
Click the name to edit. Enter saves, Escape cancels.
- Revenue
$12,480.50$12,480.50 - Orders
140140 - Conversion
2.4%2.4%
- Daily revenue
- Refund queue
- Affiliate ledger
- Q3 revenue layout
- Support queue layout
- Spring launch layout
Nothing has been committed yet.
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 density# build, verify, publish
bp wiki theme init page.html --icons "circle-check,zap"
bp wiki theme verify page.html
bp wiki publish page.htmlAdd PrismCodeToken for comments, highlighted names, and strings. Plain text works too; block code keeps its own dark surface.
"content_title":"Sugar Tangles",
"content_description":"A CinnaChroma presentation"Omit the filename for a bare snippet. Inline code, such as density="compact", uses a small accent chip.
# no filename needed
bp browse "$URL" --check-contrast --check-contrast-failRelationships + processes
Existing FlowGraphLumen language → Prism tokens → Existing components → Dense workspace. Open the graph to pan, zoom, move nodes, and reset the layout.