Imagery and illustration
Inline barely has imagery, and that is deliberate. The writing itself, on white sheets over a paper canvas, is the picture; this page defines the little that exists beyond it and names what never runs.
Photography
The product contains no photography. Marketing may add a photograph, rarely, when a real setting supports a claim; it is documentary and quiet or it is cut.
The preferred hero is typography plus an honest product frame, a real screenshot or the schematic language, because professors and institutions decide on clarity, not atmosphere.
The schematic language
Inline does not illustrate. No mascots, no spot characters, no isometric scenes: when a picture must explain, compose it from the system's own parts.
surface · line · radius 0ink-100 · 6pxbrand-200 · brand-700 baselinesurface · line · radius 0, manuscript plane- Compose from system parts. White sheets with hairline borders, gray manuscript lines, Butter Yellow marks, and margin cards.
- Use it for diagrams. Marketing and documentation compose these parts into explanations; the design system's own pages are the reference.
- Stay schematic. Gray lines stand for writing; never dress them up as fake handwriting or a fake alphabet.
- Tokens only. Every plane, line, and mark uses existing color, spacing, and radius tokens; nothing is drawn freehand.
Screenshots, ratios, and treatment
A screenshot is an exhibit, not decoration. Show a real product state carrying real, sensible sample writing, never lorem ipsum and never a student's actual draft.
- Real states, real writing. Capture the shipped product with sensible sample prose, the way the civic memory draft reads across these pages.
- Paper canvas visible. Crop so the paper shell or the white sheet reads; a floating fragment loses the register.
- 1x or 2x only. Export at device scale; no fractional zooms and no upscaled crops.
- No invented chrome. No fake browser bar with traffic lights unless the context needs a browser, no drop shadows, no perspective tilts.
1:1 · 4:3 · 3:2 · 16:9 · 1.91:1radius-lg · 12pxnone| Ratio | Use |
|---|---|
| 1:1 | Square tiles and social thumbnails |
| 4:3 | Documentation figures and product screenshots |
| 3:2 | Documentary photography |
| 16:9 | Video stills, decks, and wide marketing bands |
| 1.91:1 | The Open Graph card |
Media never rounds further, full-bleed imagery exists only on marketing surfaces, and nothing casts a shadow or tilts into perspective.
Rules
Six rules cover nearly every imagery decision. When in doubt, the answer is usually the writing itself.
- The product contains no photography and no illustration. Its imagery is the writing itself on white sheets and paper planes.
- Marketing photography is documentary or absent. Real writing settings in natural light, graded warm and neutral beside paper, and only ever in support of a claim.
- Some photography is banned on sight. Staged stock, AI-generated people, glossy laptops with charts, and dark moody gradients never run, whatever the deadline.
- Inline does not illustrate. No mascots, spot characters, or isometric scenes; diagrams compose the schematic parts the system already owns.
- Screenshots are exhibits. Real states, real sample writing, paper canvas visible, at 1x or 2x, with no invented chrome, shadows, or tilts.
- Treatment stays flat and framed. Crop to 1:1, 4:3, 3:2, 16:9, or 1.91:1 for the OG card, round no further than radius-lg, and go full bleed only in marketing.