Colors

The four colours the whole theme is built from.

Four values drive everything, plus a pair for the scrollbars.

Setting	Where it shows
Background	Page background
Text	All body copy, headings, borders on dark buttons
Accent	Boxed wordmark, checkout button, sale prices, link hover fills, focus outlines
Border	Rules between collection tiles, cart lines, FAQ rows
Scrollbar	The moving part of the bar on the collection grid, the cart, the filmstrip and the product description
Scrollbar track	The rail behind it

The accent does a lot

It's the red in the demo. Changing it changes the wordmark box, the checkout now button, sale prices, the hover fill on every navigation link, and the FAQ focus outline — all at once. That's intentional: one colour holds the theme together.

Pick something with enough contrast against your background that white text sits on it legibly. The demo's #FF0000 on white is deliberately loud.

Border

Easy to overlook. It's the hairline between collection tiles, between cart rows, and above and below FAQ questions. On a white background #E0E0E0 reads as structure without drawing attention. Push it darker and the grid starts to look like a table.

Scrollbars

Grey by default — #B4B4B4 on #D9D9D9 — because a scrollbar is a thing you look for when you want it and ignore the rest of the time.

They are their own settings rather than being derived from the accent, since a shop with a loud accent usually does not want a loud scrollbar. Set the moving part to your accent if you do.

Both apply to every scrolling pane in the theme: the collection grid, the cart's line list, the filmstrip and the product description.

Firefox draws its own narrower bar and takes the same two colours. Safari on a Mac hides scrollbars entirely until you scroll unless the system is set to always show them — nothing the theme can change.

Everything else follows these

The theme has no fixed greys left. Every surface and every quiet piece of text — the phone bar, the cart box, the cart page behind its table, product descriptions, dates, sold-out labels — is mixed from your Background and Text colours.

That means a dark shop works without touching anything else. On white the results are the same greys the theme always used; on black they invert to match, instead of leaving a pale bar with pale text inside it.

Filled buttons take the background colour for their label rather than white, for the same reason: white on a bright accent is unreadable, and the page colour is the one dependable opposite of the text.