# 07 · Components

The building blocks for the website, email and any digital product. Print and social use the same shapes and colours (see [08 · Print](08-print.md) and [09 · Social media](09-digital-marketing.md)).

## 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](03-colour.md) 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.