Chapter 07 of 12
Components
On this page
The building blocks for the website, email and any digital product. Print and social use the same shapes and colours (see 08 · Print and 09 · Social media).
Buttons
Every button is a pill with sentence case text in Satoshi Medium.
| Button | Fill | Text | Border | Use |
|---|---|---|---|---|
| Primary | Sage #537156 |
White | none | The main action: Add to cart, Shop mattresses, Book a visit |
| Primary hover | Deep Green #365644 |
White | none | |
| Secondary on photos | White | Forest Ink | none | Second action over an image. Hover: Pale Sage |
| Secondary on dark | transparent | White | 1.5 px White | Second action on a Deep Green panel |
| Text link | none | Deep Green, Bold, underline on hover | none | "View all mattresses", "Read more" |
| Property | Value |
|---|---|
| Height | 48 px (44 px minimum on phones) |
| Padding | 0 28 px (0 20 px on compact buttons) |
| Type | Satoshi Medium 15 to 16 px, sentence case, no letter spacing |
| Corners | Pill (999 px) |
- One primary button per section. A second action is secondary.
- Never capitals, never square or 4 px corners, never Honey, Clay or any retired colour.
Tags and badges
| Tag | Fill | Text | Use |
|---|---|---|---|
| Product tag | Deep Green | White | New, Flagship, Best seller. Top left of the product image |
| Soft tag | Pale Sage | Forest Ink | "You're viewing this", filters that are on |
- Pill, Satoshi Medium 14 px, sentence case, padding 7 × 12 px.
- One tag per card at most. No "Save up to" badges: the price shows the saving.
- No cream, apricot or yellow tags.
Forms and selectors
| Element | Spec |
|---|---|
| Input | White fill, 1 px Control border, 12 px corners, 48 px tall, Satoshi 15 to 16 px Forest Ink |
| Label | Above the field, Satoshi Medium 14 px Forest Ink |
| Helper and error text | Satoshi 14 px. Errors in Forest Ink with an icon, never red |
| Focus | 2 px Sage outline, 2 px offset. Always visible |
| Size and option tiles | White, 1 px Control border, 12 px corners. Selected: Sage border plus a 1 px inner Sage line. Hover: Pale Sage |
| Toggle (e.g. firmness) | White pill track with a Hairline border; the selected option is a Sage pill with White text |
| Search | Pill field, round Sage button with a White magnifier |
Cards
| Card | Spec |
|---|---|
| Product card | Image on Sand with 16 px corners; one product tag top left; name Satoshi Medium 18 px Forest Ink; a short facts line in Slate Green 14 to 15 px (feel, sizes, fabrics); rating if 3+ reviews; price Satoshi Bold Forest Ink |
| Content card (journal, stories) | Photo with 16 px corners, Sage eyebrow, Medium 18 to 24 px headline, one line of body at most |
| Panel | Sand on a White band, White with a Hairline border on a Sand band, 16 px corners, 24 px padding |
| Review card | White, 16 px corners, the one soft shadow (0 1px 2px rgba(36,49,42,.04), 0 8px 24px rgba(36,49,42,.06)) |
No other shadows. Borders are Hairline or nothing.
Ratings and reviews
- Stars in Honey, the rating in Forest Ink, the count and source in Slate Green:
★★★★★ 4.8 · 265 Google reviews. - Show the source and the date checked. Never invent or edit a review. Show a rating on a product only when 3 or more reviews mention it.
- The review summary sits on Pale Sage with 16 px corners.
Header and navigation
- White ground, no bottom rule. The Forest Ink wordmark on the left (the real logo file).
- Menu in Satoshi Medium 15 px Forest Ink. The top row never wraps.
- Icons (search, account, cart) are line icons in Forest Ink.
- Mega menu: White, Hairline dividers, Forest Ink text, Deep Green "View all" links.
Announcement bar
Pale Sage ground, Forest Ink Satoshi Medium 14 px. One message at a time; arrows and a pause button if it moves.
Trust strip
Line icons in Deep Green with 14 px Slate Green labels (free delivery, warranty, showrooms, payment in instalments). Same icons and labels on the homepage and product pages.
Footer
White with a Hairline top rule. Forest Ink wordmark, Satoshi Medium 15 px headings, 14 px Slate Green links, Deep Green map links. Columns fold into tap-to-open groups on phones.
Icons
- Line icons, 1.5 px stroke on a 24 px grid, rounded caps and joins.
- Forest Ink or Deep Green; White on dark grounds. Never Honey or Fern.
- Simple and literal: a bed, a truck, a shield, a leaf. No emoji, no filled or two-tone icons.
- Always with a short label.
Motion
- Transitions 150 to 250 ms, ease-out. No bounce, no parallax.
- Carousels never move faster than every 6 seconds and always have a pause control.
- Videos do not load until they are near the screen. No sound without a tap.
- Respect "reduce motion" settings.
Accessibility
- Every text and ground pair from 03 · Colour passes 4.5:1.
- Tap targets at least 44 × 44 px.
- Every image has alt text that says what it shows.
- Panels that open (cart, menus) trap focus and close with Escape.