foundations
Imagery and photography
We're not selling an app. We're selling visibility of a world most people don't photograph: the guards at gates, the civilians in townships, the control rooms at 3am.
Read the full specKodak disposable — the canonical treatment
Warm cast, elevated warm-tone saturation, visible fine grain, slight vignetting. Imperfect on purpose — the look of somebody who lives there taking the picture.
Neighbourhood · dusk · warm cast People in place · golden hour Phone-in-hand · night-flash feel Gate · night · ambient warmth
Aspect-ratio set
Pick one hero ratio per surface and stick to it. Mixing 16:9 and 4:3 hero images on the same page reads as sloppy.
- 1:11080×1080Social post, square card
- 3:41080×1440Portrait card, mobile hero
- 4:31440×1080Classic landscape
- 16:91920×1080Landscape hero, video thumb
- 9:161080×1920Story, Remotion vertical
- 21:92100×900Ultra-wide (rare)
Text on photo — overlay rule
If text must overlay an image, always use a 24% black overlay under the text zone. Never semi-transparent white on photo — it dissolves.
Community Wolf is safety data infrastructure.
Community Wolf is safety data infrastructure.
OG image preview
1200×630, self-hosted at public/og-image.png. Wolf green ground, mono-white lockup, Barlow 700 title, Source Sans 500 sub-title, Geist Mono URL at the foot.
Safety data infrastructure for safer cities.
Reports, patrols, access — unified into one data model.
communitywolf.com
{/* public/og-image.png — 1200×630 PNG */}
<meta property="og:image" content="/og-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />What we don't photograph
Even a perfect Kodak treatment can land on the wrong subject. Keep the subject list tight.
- Stock-photo diverse-team-pointing-at-laptop shots.
- Handshake / deal-closing office photography.
- Pure product shots on gradient backgrounds.
- Drone hero shots (maps section only).
- Victims of crime or imagery that re-victimises.
- Black-and-white marketing imagery — reads as art-house pretension.
- Duotone treatments — they fight the token palette.
- Semi-transparent white text over photo — use 24% black overlay instead.
No illustration style — v0.2 position
Wolf doesn't ship an illustration system. Decorative needs go to photography. Diagram needs go to SVG or Mermaid. Iconography goes to Lucide.
This is a deliberate decision to avoid the generic Humaaans / Undraw look that marks every consumer-productivity app. We revisit it in a future design-system version if a clear Wolf-specific use case emerges.