Motifs
Brand motifs shared by the app and the marketing site
The marketing site introduced a family of decorative treatments that are now part of the shared stylesheet, so the app and any future surface can use them without reinventing the recipes.
Atmosphere
The ambient colour wash: soft indicator-tinted halos in a with-color
context, built entirely from theme tokens so it re-tints with the theme and
inverts per mode. The Atmosphere component (from @daybridge/components)
arranges four fixed-size halos in a dawn or dusk composition, tuned for
band-scale surfaces — a hero, a section, a full-width panel. flip mirrors
the wash vertically (for closing a surface rather than opening one) and
strength scales its peak. For small bespoke surfaces, compose the
underlying halo utility directly — a single gaussian-falloff ellipse of
the indicator token, hue from the colour context, peak via --halo-peak.
dawn
dusk, flipped
Gradient ink
ink-sky clips the sky's blue-to-purple gradient to the glyphs — the display
treatment used for hero headings and OG cards. Dark mode lifts the stops to
pastel versions of the same hues automatically. ink-sky-soft is the solid
blue-grey for a supporting line beneath a gradient-ink heading.
Time well spent
A calendar that works the way you think.
Chip seating
Treatments for event chips sitting over imagery rather than the calendar
grid. chip-lift draws a crisp 1px edge dyed in the chip's own hue (top,
right and bottom — the left edge carries the chip's accent bar) plus a small
hue-dyed drop shadow. chip-glow gives Block chips a soft white glow instead
of a hard outline.
Flight to Lisbon
Design review
Focus time
Stripes
The Block-event hatch: a -45° repeating gradient mixed from the event's own
hue. Defaults draw the standard chip hatch; retune per site with
--stripe-color, --stripe-ink, --stripe-gap and --stripe-width.
Fade masks
Alpha dissolves so imagery, washes and texture melt into the page instead of
ending on a hard edge. The suffix names the dissolving edge(s): fade-b
(bottom), fade-t (top), fade-r (right), fade-x (both sides), fade-y
(both vertical ends), with -deep variants dissolving a larger share and
fade-bx / fade-tx / fade-rb intersecting two axes.