Internal reference

Visual style guide

At EchoArc, visuals do a job: they raise a question, reveal a system, or make a relationship clear. Nothing on this site exists to decorate a paragraph. This page describes the four image types we use, how to format them, and what we deliberately avoid.

Four image types

Editorial concept

16:9 — 1920×1080

How did a US$10 T-shirt become possible?

A conceptual image that provokes a question before it explains anything.

Use it for: Top of a section or article, where curiosity needs to come first.

  • One idea per image. If it needs a paragraph to work, it is a diagram.
  • Pair it with a question, not a caption that gives away the answer.
  • Warm, natural light. No composite stock montages.

Diagram

Full content width, built in code — not a bitmap

Framework diagrams are rendered, not photographed.

A custom framework illustration that makes a strategic relationship visible.

Use it for: Explaining approach, pathways, intervention levels or systems.

  • Build diagrams as components so they stay sharp, themeable and translatable.
  • Label steps in plain language; no jargon inside the boxes.
  • Generous whitespace. Never more than five steps in one row.

Workshop / founder photo

4:5 portrait or 3:2 landscape

Placeholder — replace with a real workshop or founder photo.

Authentic people photography that shows real work happening.

Use it for: Who We Are, workshop pages, project write-ups.

  • Real sessions and real people only — never stock boardroom imagery.
  • Natural light, candid posture, visible materials on the table.
  • Name the people and the context in the alt text.

Product consequence

1:1 square — 1200×1200

A plain T-shirt. 2,700 litres of water sit outside the frame.

An ordinary object shot editorially so the hidden system behind it becomes visible.

Use it for: Illustrating a question-driven example or a supply-chain insight.

  • Plain object, plain surface, single light source.
  • Let the caption carry the consequence, not a graphic overlay.
  • No symbolism — a shirt is a shirt, not a shirt beside a globe.

How to format an image

  • JPG for photographs. PNG only when transparency is genuinely needed.
  • Export at roughly 2× the display width, then compress — aim under 300 KB.
  • Treatment: rounded-2xl corners, a hairline border, no drop shadows.
  • Every image needs alt text describing the idea, not the object.
  • Add loading="lazy" to anything below the first screen.
  • Captions are part of the message — write them as short sentences.

What we avoid

These images signal a conventional ESG consultancy. They make credible work look generic.

  • Leaves, sprouts and green gradients
  • Recycling symbols and eco badges
  • Globes and cupped hands holding soil
  • Wind turbines and solar panels
  • Generic corporate sustainability stock
  • Smiling stock teams in glass meeting rooms

Icons

One icon family across the whole site: a single line weight, no filled shapes, no mixed styles. Icons clarify a label — they never replace one.

size-4

Inline with body text and small labels

size-5

Buttons, navigation and UI controls

size-6

Feature and section markers

Diagram in use

A rendered diagram stays legible at any size and can be translated without re-exporting an asset.

  1. Question

    What is really happening?

  2. Clarify

    What to say, what not to say.

  3. Translate

    Make it understandable.

  4. Activate

    Move toward action.

Have an image or a question about one?

Send it over and we will tell you which type it is — and whether it earns its place on the page.

Book a Consultation