# 10 · Website: huxberry.com

How the 2026 rules apply to huxberry.com. The theme files that do this live in [`shopify/`](../shopify/).

## The system on every page

| Rule | Value |
| --- | --- |
| Typeface | Satoshi throughout. Headlines Regular, never bold |
| Column | 1320 px, 40 px gutters (20 px on phones) |
| Section spacing | 80 px (56 px on phones) |
| Bands | Full width, alternating White and Sand |
| Corners | 16 px panels, cards and photos; 12 px inputs and tiles; pill buttons |
| Buttons | Sage pills, sentence case, Deep Green on hover |
| Text sizes | Identical on every page (see [04 · Typography](04-typography.md)) |
| Text on green | White |

## Homepage, section by section

| # | Section | Ground | Rules |
| --- | --- | --- | --- |
| 0 | Announcement bar | Pale Sage | Forest Ink Medium 14 px, one message at a time, pause control |
| 1 | Header | White, no rule | Forest Ink wordmark, Medium 15 px menu that never wraps, line icons |
| 2 | Hero | Sand band | Desktop: photo with a short shade behind the text only. Phones and iPad portrait: clean photo, then a Deep Green panel with White headline, White pill and White outline pill |
| 3 | Trust strip | White | Deep Green line icons, 14 px labels, same as the product page |
| 4 | The lineup | Sand | Sage eyebrow, 28 to 40 px heading, White product cards, one Deep Green tag, "Find your feel" guide above the grid |
| 5 | Breathable comfort | White | Heading, 17 px intro, Medium 17 px points, lived-in photo with 16 px corners |
| 6 | Reviews | Sand | Pale Sage summary, White review cards with the soft shadow, Honey stars, source and date checked |
| 7 | Categories | White | Photo tiles with 16 px corners, sentence-case labels |
| 8 | Showroom invitation | Pale Sage panel | Sage eyebrow, Forest Ink heading, Sage pill button |
| 9 | Journal | Sand or White | Content cards |
| 10 | Newsletter | Alternating band | Pill email field with Control border, Sage pill button |
| 11 | Footer | White, Hairline top rule | Wordmark, 14 px links, tap-to-open groups on phones |

## Product pages

| # | Section | Ground | Rules |
| --- | --- | --- | --- |
| 1 | Overview | White | Gallery on Sand with 16 px corners and 12 px thumbnails; product name 40 px Regular; Bold price; Honey stars |
| 2 | Buy box | Sand panel | Size selector and option tiles with Control borders and 12 px corners; Sage selected state; Sage "Add to cart" pill |
| 3 | On phones | | Name, price, size, feel and Add to cart come before the service icons |
| 4 | Services | White | The same trust strip as the homepage |
| 5 | Choose your firmness | Sand | Pill toggle, Sage selected option, video with 16 px corners |
| 6 | Material stories | White | 40 px headings, Slate Green body, 16 px photos |
| 7 | Compare the collection | Sand | White cards with Hairline border; the current model outlined in Sage |
| 8 | FAQ and reviews | Alternating | Hairline rules between questions |

After Add to cart the visitor stays on the page and a cart panel slides in.

## Collection, search and content pages

- Collection and search: the same 1320 px column and product cards; "13 products" count beside Sort; filters in a panel with "Clear all" only when a filter is on.
- Locations, Warranty, FAQ, Contact, About and 404 share one **page header** section: a Sand band with the page title, then White and Sand bands.
- The 404 page offers search and three ways back.

## Content rules for the site

- Product names in full in page titles.
- One H1 per page.
- Only the certifications that apply to that category, worded for the part they cover.
- Warranty: 15 years on Huxberry mattresses, 10 years on Hypnos.
- No em dashes anywhere, including product descriptions and meta text.
- Payment badges (tabby, tamara) keep their own brand colours. That is correct.