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.
Standardise to these five. Custom ratios only with editorial sign-off.
No drop shadow on imagery. Hairline ring optional for placement on light surfaces.
Caption sits below image, left-aligned, small grey.
A delegate at the DTTT Forum 2026, Helsinki. Photo · DTTT
24×24 grid, 1.5px stroke, rounded line caps, no fill. Use the framework's eight glyphs as the canonical set.
| 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. |
Confidence over playfulness. Short, decisive, always reversible.
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.