Two kinds of picture exist in the brand. Proof is the work itself: a client's site, a screenshot of something shipped. It stays exactly as it is, framed and captioned, because changing it would turn proof into decoration. Everything else is printed: photos go through the halftone pipeline into the brand's inks, 3D appears as print-shaded blocks, and illustration and icons come from one shape alphabet.
Rules#
| Id | Rule | Why | Checked by |
|---|---|---|---|
| BB-IMAGE-01Must | Keep proof untouched: no crop beyond the frame, no recolour, no halftone and no retouching.Applies to: Site, Docs, MAX//OS, Print, Documents, Social, Slides | Screenshots of client sites are proof (D-I1). Changing them would make the proof a picture. | ComponentProofTreatmentError |
| BB-IMAGE-02Must | Print every other photo through the photo pipeline: duotone by default, a 7 px cell, screens at 45° and 75°.Applies to: Site, Docs, MAX//OS, Print, Documents, Social, Slides | Printed photos sit in the brand's inks like everything else, and the pipeline makes them the same way every time. | Manual review |
| BB-IMAGE-03Never | Use stock photography, or a generated image presented as a person, a place or a piece of work.Applies to: Every channel | Every picture is either proof or plainly art. A stock photo or a fake portrait is neither. | Manual review |
| BB-IMAGE-04Never | Put an image behind text.Applies to: Site, Docs, MAX//OS, Print, Documents, Social, Slides | Text sits on plates (D-B1). An image under words costs contrast at every point where the picture changes. | Press checkrule 1, two layers |
| BB-IMAGE-05Must | Draw icons and illustration from the shape alphabet and the kits; no other icon set.Applies to: Site, Docs, MAX//OS, Print, Documents, Social, Slides | One alphabet in 2D and 3D (D-G2) is a large part of what makes the brand recognisable. | Lintbrand/import |
| BB-IMAGE-06Must | Give every image literal alt text, and mark decorative art aria-hidden.Applies to: Site, Docs, MAX//OS, Documents, Email, Social | Alt text is the literal zone: it says what the image shows, so a screen reader user gets the same page. | Press checkaxe |
| BB-IMAGE-07Must | Use photos of people only with their consent, and client logos only inside proof or with written permission.Applies to: Every channel | A face or a logo on the studio's materials reads as an endorsement. Consent and permission make it true. | Manual review |
| BB-IMAGE-08Must | Caption every MAX//OS screenshot "Fictional demo data".Applies to: Site, Docs, MAX//OS, Social, Slides | The demo cast is made up. The caption says so, so nobody mistakes it for someone's account. | Manual review |
| BB-IMAGE-09Must | Show 3D only as print-shaded blocks: stills in documents, email, social and slides, and live 3D only on the site and the docs.Applies to: Site, Docs, MAX//OS, Print, Documents, Social, Slides | One material keeps the blocks recognisable at every size (D-G1), and stills keep files light and identical everywhere. | Manual review |
| BB-IMAGE-10Must | Make case covers from project data with caseCover; never draw one by hand.Applies to: Site, Docs, MAX//OS, Print, Documents, Social, Slides | A cover drawn from data is deterministic: the same project always prints the same cover. | Manual review |
Specs#
Proof and printed#
Proof: untouched
Everything else: printed
The photo pipeline#
Every photo that is not proof prints through the pipeline: two halftone plates, made once and committed, filled with ink at render time, so one set of files prints in every colourway, volume and theme. A focal position for the crop belongs to PrintedPhoto (DF-55).
| Setting | Value | What it does |
|---|---|---|
| Mode | duotone | Two plates: the key at the first angle, the colour at the second |
| Cell | 7 px | The ink field's halftone cell |
| Density | 2x | Plates render at twice the display size |
| Screen angles | 45° and 75° | Key, then colour |
| Tone curve | black 0.04, white 0.96, gamma 1 | The levels each plate is cut from |
Where every image comes from#
| Image | Comes from |
|---|---|
| Proof | Client sites and screenshots of real work, in ScreenshotFrame with a caption |
| Photos | The photo pipeline and PrintedPhoto; people only with their consent |
| 3D | Print-shaded blocks: stills in documents, email, social and slides; live 3D on the site and the docs |
| Covers | caseCover, from the project's data |
| Illustration | The shape alphabet, its 3D twins, the print kit and the comic kit |
| Icons | The shape alphabet only |
| Client logos | Inside proof, or with written permission |
| MAX//OS screenshots | The demo cast, captioned Fictional demo data |
3D#
The blocks appear as one print-shaded material at every size: live on the site and the docs, as stills everywhere else. The 3D mark is an illustration; the 2D lockup appears in the same view (BB-MARK-12).
The shape alphabet#
Icons and illustration come from one alphabet in 2D and 3D. No other icon set (BB-IMAGE-05).
| Glyph | Name | 3D twin | Marks |
|---|---|---|---|
circle | disc | Websites | |
half-circle | half-cylinder | Illustration | |
triangle | prism | Growth | |
square | cube | Illustration | |
bars | slats | Software | |
diamond | octahedron | Custom apps | |
crescent | cut-cylinder | Illustration | |
arch | arch | Illustration |
Alt text#
Alt text is the literal zone: it says what the image shows, in a sentence, with no joke and no "image of". Decorative art is hidden from assistive technology. MAX//OS screenshots carry the caption "Fictional demo data" (BB-IMAGE-06, BB-IMAGE-08).
People and permission#
Photos of people appear only with their consent; client logos only inside proof or with written permission (BB-IMAGE-07). No stock photography, and no generated image presented as a person, a place or a piece of work (BB-IMAGE-03).
Do and don't#
Do
Don't
Do
Don't
Do
Alt: “The Fernlight Bakery home page on a phone, the order form open.”
Don't
Alt: “Cool screenshot”
Related#
- Printed photos and Case covers: the generators.
- Screenshot frame: how proof is framed.
- Icons and the shape alphabet.