Imagery

Where a picture is allowed, the shape it is cut to, what fills the box before it arrives — and the one piece of art the system draws itself.

01 · The slots — where a picture is allowed

Six slots take a photograph: three on a slide, two on the site, one in the product. Each one fixes its own crop, and the crop is the design — the picture never sets the height. Three of the six are the same 16:9 within one per cent.

• 0.91 : 1 Slide · photo column
  L1–L3 · the library’s tall master
• 2.13 : 1 Slide · wide band
  L1H–L3H · the library’s wide master
• 1.26 : 1 Slide · media card
  a media card · the library’s card crop
• 411 / 231 Site · blog feature
  the light variant
  is 459 / 226
• 265 / 147 Site · blog card
  media at radius/8
  inside a card at radius/16
• 16 : 9 Deck tool · thumbnail
  neutral/100 shows while it loads

02 · Fit — a photograph is cropped by its box, a mark never is

Two rules, and they are opposites. A photograph covers its slot and the slot crops it (object-fit: cover). A logo scales inside its padding and is never cut (object-fit: contain, the mark filling the 142 × 33 box inside the chip’s 20 padding, a card logo caps at 150 × 22). The photograph stand-in below is the media card’s own accent gradient, not a picture.

• Do · cover
  The picture is larger than the slot and the slot crops it. Nothing of the ground shows.
• Do · contain
  A mark scales into the 142 × 33 box inside the chip’s 20 padding — up or down, never cropped, never stretched (Logo chip).
• Don’t · a photograph set to contain
  The slot’s grey shows at both sides. The crop is the design; a picture that does not fit is re-cropped, not letterboxed.

03 · Radius and depth — the box carries both, the picture carries neither

A picture has no corners and no shadow of its own. The slot rounds it and the slot lifts it: the slide’s image card is radius/16 under elevation/modal (the deck’s --shadow-xxl); the site’s feature media is radius/16 and its blog-card media radius/8 inside a radius/16 card; a picture nested in a host inherits the host’s corner — the L17 photo card is radius/32 and its image self-clips to it; an avatar is round at 96, 40 and 28.

• Slide · image card
  radius/16 · elevation/modal — the deck’s --shadow-xxl
• Site · blog card
  media radius/8 inside a radius/16 card, 12 padding, 1 px border/default
  its hover shadow is the site’s own shadow_XL, not one of the four elevation styles
• Slide · L17 photo card
  the host is radius/32; the picture inherits it (border-radius: inherit)
• Deck tool · avatar
  round (radius/full), cover; 96 / 40 / 28 — the three deck-tool sets, all in the library’s 24 / 28 / 36 / 40 / 96

04 · The placeholder — what an empty slot shows

A slot with no picture is never blank and never fakes one. The deck draws its placeholder: a 135° hatch of neutral/100 on white with the image glyph at 96 px in neutral/300. The deck tool shows neutral/100 while a thumbnail loads. State is honest: a grey box that pretends to be a photograph is the one thing this page rules out.

• Slide · the placeholder
  neutral/100 hatch at 135° on white, Icon/image at 96 in neutral/300
• Deck tool · while it loads
  neutral/100 behind every 16:9 thumbnail, so an unloaded picture is a quiet grey, not a hole

05 · Decoration — the blob is the only art the system draws

One shape, behind content, bleeding off a corner: the deck’s blob (.blob--right sits at right −420 / top −180 on the 1920 canvas). It is decoration and carries nothing — no text sits on it, no number reads against it. Its colour follows the accent, its opacity is accent/blob-opacity and its blur blur/blob. Multicolor has no blob at all: every decorative variant is hidden for it, because a rainbow blob would fight the six-colour sequence the cards step through.

• Slide · .blob--right at a quarter
  right −420 / top −180 of the 1920 × 1080 canvas; behind every layer of content. The blur stays the token’s 150 (blur/blob) at any scale, so at a quarter it reads softer than on the slide — the Blob page shows it at size
• no blob Slide · multicolor
  [data-accent=“multicolor”] hides .blob, .l17-blob, .l4-blob and the raw <img> blobs

06 · The library — 57 pictures, one style, three crops

The deck’s photographs are one library — 57 images today, 29 wide and 28 tall — in one style, cut to the crops of section 01. It stays one set because of the rules below.

57

pictures in the library

29

wide · 2.13 : 1
the L1H–L3H band

28

tall · 0.91 : 1
the photo column

3

crops

1

style profile
for the whole set

Do

• Write the style once. Palette, light, mood, realism — one prompt prefix of about 25 words shared by every picture, so the set reads as one set.
• Vary the subject inside a topic — people, objects, places, close-ups — so a deck of six slides does not show the same picture six ways.
• Hand the library a master and let it crop. The master’s ratio decides which slot it feeds — square → the tall column, landscape → the wide band; its pixel size does not matter, the slot covers.
• Keep exactly the pictures the design lead provides. The library holds no invented crops and no extra variants.

Don’t

• No readable text, no logo, no brand name inside a picture. Text renders badly and a mark in a stock photograph is somebody’s property.
• No logo drawn as a picture. Every mark is placed from Icons & logos exactly as exported — never re-drawn, never rasterised, never an emoji.
• No screenshot where a chart can be drawn. A number is a mark that states its own scale and bounds; a pasted chart states nothing and cannot follow the accent (Data viz).
• No picture doing a blob’s job. Decoration is the blob, the blob is decoration; a photograph is content and sits in one of the six slots or not on the slide.

On the Figma page

The same page in the Figma library: Imagery.