Calendar (Lustro)
Calendar examples in the Lustro language: glass surfaces, the indigo-to-pink gradient for the selected state, and JetBrains Mono for times. Event colors are category colors, not status colors. Demo data is fictitious; "today" in every demo is Wednesday, October 7, 2026.
Month view
Seven-column grid with a segmented view switcher. Today is a filled circle, weekends are slightly tinted, days outside the month are dimmed, and a cell shows at most three chips before a "+N more" link. Multi-day events repeat as connected chips.
Week view
Hourly time grid with an all-day row, a now line, overlapping events split side by side, and a tentative event drawn dashed.
Agenda
Events grouped by day: time column, category bar, title with location, then attendee avatars. Use it as the default view on narrow screens.
Event chips and categories
Five categories, each one color. Variants carry state through shape, not extra colors: all-day is filled, multi-day chips connect, tentative is dashed, declined is struck through, cancelled is faded.
Event card, quick create and conflict
Mini calendar and date pickers
Single date with event dots, range selection with presets, and a time-slot grid.
Availability
Free/busy rows per person with a suggested common slot, plus bookable slots for scheduling links.
Year overview
Heat map of busy days. Five steps from empty to packed.
Anatomy
| Part | Spec |
|---|---|
| Header | Month or range title, previous/today/next controls, segmented view switcher (Day, Week, Month, Agenda) |
| Day cell | Glass cell, 1px rgba(148,140,255,.16) rule; day number top left, weekends tinted |
| Today | Filled circle on the day number, a gradient #6366f1 to #ec4899 fill |
| Selected day | Same fill on the number plus a indigo-soft cell outline |
| Event chip | Tinted fill from its category color, 3px left rule in the full color, 12px text, one line |
| Time grid | 48px per hour, event height equals duration, 2px gap between stacked events |
| Now line | 2px pink #ec4899 line with a dot on the left edge |
| Agenda row | Time, category bar, title, secondary line, attendee avatars |
| Availability | Row per person: free (empty), tentative (hatched), busy (solid); suggested slot outlined |
Rules
- One color per category, five at most. Never reuse a status color for a category.
- Express state with shape: filled (all-day), dashed (tentative), struck through (declined), faded (cancelled).
- Times use JetBrains Mono in 12-hour or 24-hour format consistently within a view, never mixed.
- Show "+N more" instead of growing a day cell past three chips.
- Always mark today and the current time; selection never replaces them.
- Weekends stay visible; tint them rather than hide them.
- Conflicts are shown inline on the event, with a clear way to keep both or reschedule.