PAGE 07 · IMAGERY, ICONS & MOTION
Imagery, icons & motion
How visual media is treated. Image ratios, caption rules, icon stroke and grid, motion principles. The defaults: 16:9 hero, 4:3 cards, 1:1 avatars; 1.5px stroke icons on a 24px grid; 200ms standard ease.
01.
Image ratios
Standardise to these five. Custom ratios only with editorial sign-off.
Standard ratios
21 : 9 · ULTRAWIDE HERO
21:9 · CINEMATIC HERO ON LANDING / SECTION COVERS
1 : 1
1:1 · AVATARS & ICON TILES
3 : 4
3:4 · PORTRAIT EDITORIAL
16 : 9 · DEFAULT
16:9 · HEROS, FEATURE BLOCKS, VIDEO
4 : 3
4:3 · CARDS & THUMBNAILS
02.
Treatments
No drop shadow on imagery. Hairline ring optional for placement on light surfaces.
Image treatments
FULL BLEED
FULL-BLEED · NO RADIUS
ROUNDED
ROUNDED · 8PX
DUOTONE
DUOTONE · EDITORIAL ONLY
03.
Captions
Caption sits below image, left-aligned, small grey.
Captioned image
IMAGE
A delegate at the DTTT Forum 2026, Helsinki. Photo · DTTT
04.
Iconography
24×24 grid, 1.5px stroke, rounded line caps, no fill. Use the framework's eight glyphs as the canonical set.
Icon grid
CLOCK
CHECK
ARROW
INFO
DOC
USER
SIZE 16
SIZE 20
SIZE 24 · DEFAULT
SIZE 32
Icon spec
| Property | Value | Notes |
|---|---|---|
| grid | 24 × 24 | 2px outer keyline; live area 20×20. |
| stroke | 1.5px | 1.25px allowed at 16px size; 2px never. |
| line-cap / join | round / round | No square caps. |
| fill | none | Outline-only system. Solid icons are reserved for status. |
| colour | currentColor | Always inherits — never hardcode. |
| alignment | vertical-align: -0.125em | Optical alignment with adjacent text baseline. |
05.
Motion principles
Confidence over playfulness. Short, decisive, always reversible.
Motion patterns
HOVER · 120MS
Subtle scale or color shift on interactive surfaces.
REVEAL · 200MS
Dropdown, tooltip, accordion. Opacity 0→1 + 4px slide.
MODAL · 320MS
Page transitions, modal in/out. Fade + 8px translate.
Always. Use
cubic-bezier(.4,0,.2,1). Never. Bounce, spring, elastic, or rotate-on-load. Respect prefers-reduced-motion by collapsing all transitions to ≤80ms cross-fades.