# Imagery and Illustration

## Purpose

Rules for images, illustration and graphics.

## Decisions

- **Image shapes:** four aspect ratios: **1:1** (avatars, tiles), **4:3** (cards), **3:2** (photos) and **16:9** (video, hero). Anything else is cropped to fit, never stretched.
- **Photo in a card:** **full-bleed to the card edge**, taking the card's 16px top corners; the title and details sit in the card below. Photos always show whole, never cropped by text on top of them.
- **Text with an image:** a **solid caption bar in the card colour that sits under the image**, so nothing is cropped off the image or covered.
- **Loading an image:** a **still block in the lighter tier `#272523` with the spinner (throbber) on it**.
- **Image fails to load:** an icon and "Image unavailable" on the lighter tier.
- **Illustration:** **flat shapes in the grey tiers with one violet accent**, for occasional use such as onboarding and large empty states. Everyday empty states use an icon.
- **Charts:** **bars with 4px rounded tops and faint gridlines** in the accent colour. Series colours come from [Colour Palette](colour-palette.md), starting from violet, orange, red-pink, emerald and blue.
- **Hero and promo cards:** plain card colour for ordinary content. A card meant to **stand out** gets a **fuller gradient wash at 45%**: orange, red-pink, magenta, violet, blue, drawn across the card at 135°. The magenta stop is `#e118b6`.
- **Hover on a stand-out card:** if the card's gradient is an **outline**, its border angle swings round when hovered; if the gradient is a **fill or wash**, it slides across the card when hovered.
- **Colour palette:** the full twelve-hue palette is on [Colour Palette](colour-palette.md). Core interface colours keep their roles; other hues are for conventionally coloured things and for categories.