Design reference 15 · Workspaces & discovery
Temporal Planner
Make time, duration, overlap, and availability immediately legible.
Download design ZIP · Open interactive specimen
Design specification
Philosophy and fit. Make time, duration, overlap, and availability immediately legible. Suitable for schedules, personal planning, project calendars, event programmes, and resource booking.
Visual grammar. Use a time-based grid with explicit day and hour labels, a narrow agenda rail, and a compact toolbar for period and view changes. A friendly UI sans, clean white ground, dark blue-grey ink, and a small palette of labelled activity categories organise the page. Current selection, unavailable periods, and overlapping items have visibly different treatments.
Specimen and flow. *Weekcraft* contains a fictional workshop schedule. Users select a session, move it through an explicit date-and-time form, and inspect the updated week. Supporting states show a scheduling conflict and an agenda view containing the same appointments.
Adaptation and identity. Mobile defaults to the agenda or a single-day view; horizontal swiping is optional. Preserve the time structure and text labels; avoid drag-only editing, colour-only categories, and compressing a whole week into unreadable columns. Motion simply confirms a change. Effort: medium.
Files for a coding model
Reference images
- Desktop — 1440 × 1000 viewport
- Phone — 390 × 844 viewport
- Supporting state — 1440 × 1000 viewport
- Full page — 1440 × 1000 viewport
Supporting routes
Reuse
Use and adapt the original code and specifications for personal or commercial work under MIT. Keep applicable font and photo notices. The ZIP includes the complete runnable reference and its local assets.