One visual system for the household’s pages and documents. Daylight is Luke’s side: bright, mid-century, full of plants and morning light. Evening is Amber’s: layered bohemian color (plum, rust, brass, moss) on a warm linen ground. Both are light; the sites use Daylight, and Evening is there for pages that want more warmth.
Daylight pages feel like a sunny room. Evening pages feel like a warm, layered room. Neither one is a gray office.
BothLeaf shapes, wood tones and greens anchor every palette. Use organic curves for illustration and keep the layout grid straight.
Luke, biophilicMid-century forms: pill buttons, round dots, starbursts, a geometric sans. Clean lines, never sterile.
Luke, mid-centuryEvening adds depth: arches, a soft woven texture on the linen ground, plum and rust, and a serif voice for the big numbers.
Amber, bohemianBoth palettes use the same six color roles. Luke’s versions are clear and saturated, Amber’s are earthy and deep, so a page can switch between them without changing its meaning.
| Role | Use it for | Avoid |
|---|---|---|
| pool | Primary buttons, links, focus rings, selected states | Large background fills |
| leaf | Good news: under budget, saved, complete. Charts’ main series | Decoration that could read as “success” |
| sun | Highlights, callouts, the one thing to look at. Mild warnings | Body text (too light on Daylight) |
| ember | Over budget, errors, destructive actions | Anything that isn’t a problem |
| bloom | Personal touches: Amber’s or Luke’s tags, illustration, a second chart series | Status meaning |
| wood | Headline accents, dividers with character, the “&” in titles | Buttons |
Mid-century rooms use color in confident blocks. Keep it to one or two accents per screen and let neutrals carry the rest.
Jost carries the mid-century geometry for headings. Karla is the friendly, readable body face. Young Serif brings Amber’s warmth to big numbers and pull quotes. DM Mono lines up figures in tables.
Draw every motif from the color tokens so it works in both themes. One motif per page keeps it from turning into wallpaper.
Small badges, “new”, celebration.
Section markers, empty states.
Savings, growth, anything living.
Feature cards and headers in Evening.
Two of anything: Luke & Amber, A vs B.
Corners: 8px on fields, 14px on cards, fully round on buttons and chips. Arches only on one hero or feature card per page.
Use the switch at the top to see each one in Daylight and Evening.
Paste this at the top of a page’s stylesheet. The first block is Daylight; set data-theme="evening" on <html> to use Evening.