Design system
Every color, font, button, card, and pattern currently in use across the DayTimeOwl site — homepage, shop, our story, spice library, and wholesale — pulled from the actual token files and component CSS, not redrawn from memory.
Color
From tokens/colors.css. The purple scale is the page/surface background system; lime and orange are the two brand accents; cream is text and light surfaces.
Typography
Two system fonts carry the whole site; five self-hosted accent fonts (all Fontshare, ITF Free Font License) and two Google Fonts (Ballet, Rozha One — both OFL) are used sparingly for specific headlines and flourishes.
Buttons
All buttons hover to brand orange, regardless of their resting color — the one consistent interaction rule across the whole site. The Cart button also carries a specular shine: hover it and the border catches a soft white highlight that leans toward the cursor — gated purely by CSS :hover, never by cursor proximity, so it never lights up until the pointer is actually over it. Try it below.
Product card
Used on the homepage products grid and the shop page's Chai section — photo, title, origin, ingredient tags, price, Add button.
Glassmorphism
From tokens/glass.css. Three tiers — .glass-light (background level, high blur), .glass (primary panels), .glass-heavy (nav, elevated) — always placed over a photo or gradient orb so the blur has something to distort.
Full-bleed photo + glass CTA
The Wholesale page's pattern: a full-viewport photo slideshow (crossfades every 10s), a hover-to-reveal nav that stays off-screen until the cursor nears the top, and one centered glass card with a lime button that opens a floating glass enquiry form. No page scroll, no footer — the whole thing is one screen.
Do you own a cafe or run a business which consumes a lot of chai?
Hover-expand filmstrip
Ported from a Framer Motion component (Skiper 52 HoverExpand_001) to plain CSS width transitions. Used for the homepage Stat Badge blends and the Spice Library carousel — click/hover a narrow panel and it widens, others narrow back down.
Category row
From the shop page — one category per row, a lime "shop now" pill for what's live, a muted outline pill for what's launching soon.
Radius & shadow
From tokens/effects.css.