Workbench · component reference
Room for the work.
Warm paper, graphite ink and useful rules. These examples use the application’s stylesheet and tokens.
A space that feels like you
Eight considered themes, with light and dark versions. Everyday palettes feel calm and familiar; developer palettes bring crisp type and a little more edge. Pick one below to try it across this page.
Surfaces & ink
Color supports a label or shape. Shared access, bot identity and deadlines are always written out.
Type & measure
A quieter week
Each theme brings its own display face. Body text stays readable; dates and actions keep their hierarchy. Secondary text stays readable.
Prepare the studio notesPlanned Oct 7 · Due Oct 10 · Alex
| Role | Size | Purpose |
|---|---|---|
| Display | 32px | Place names |
| Body | 14px | Tasks & fields |
| Metadata | 12px | Dates & context |
| Minimum | 11px | Compact hints |
Actions & focus
Tab through these controls to inspect the solid focus outline. Pointer press feedback is brief. Keyboard actions are instant.
People & helpers
A circle identifies a human; a rounded square identifies a bot. The text makes the distinction explicit.
Time & commitments
Events have an accent rule and fill. Task reservations use paper and an outline. On the ordinary wall-clock grid, sixty pixels represents one hour. Overlapping intervals share lanes.
A planned date is when work should appear. A deadline is when it is due. Reserving time never changes either.
Motion rules
| Surface | Timing | Trigger |
|---|---|---|
| Search & keyboard actions | Instant | Every time |
| Dialog / inspector entrance | 200ms | Pointer open only |
| Feedback | 125ms opacity | Pointer result |
| Press | 100–120ms | Fine pointer |
| Polling & data updates | Instant | No entrance replay |
Reduced motion removes translation and scaling. Native dialogs own focus containment and background inertness. The app’s lifecycle checks live separately from this visual reference.