Imagery & Photography Style Guide

1. Overall Visual Tone

Writemedia's imagery should feel warm, grounded, and competent — never cold, corporate, or flashy. The brand sits between two worlds: UK technology and Gambian development. Imagery must feel credible in both contexts.

2. Photography Subjects

People at work

The primary photographic subject. Show team members engaged in real work — coding, discussing, reviewing screens, on video calls. Candid or lightly directed; never stiff posed shots. The team works remotely (home offices), so photography will typically show individuals at their desks or on screen-shares rather than shared office environments.

Context	Subject Guidance	Avoid
Team / about us	Individual team members at their screens, on video calls. Natural expressions, home office settings are fine.	Arms-folded group shots, forced smiles, matching outfits
Development process	Screens showing real code or design tools (blurred if needed). Hands on keyboards.	Stock "hacker" imagery, glowing screens in dark rooms
Client collaboration	Video call screenshots, screen-sharing, pointing at prototypes. Relaxed but purposeful.	Handshakes, suited boardrooms, overly formal staging
Gambia context	Team members working. Government offices, training sessions, institutional settings where software will be used.	Tourism imagery, charity-style framing

Workspaces and environments

Secondary subject. Laptops, monitors, notebooks, coffee — real home office setups, not pristine showrooms. For Gambia materials, institutional settings and urban environments provide useful context.

Software and screens

Showing actual products we've built. Always presented in context (on a device, in a browser) — never as flat screenshots floating in space. See Section 5 for screenshot presentation rules.

Locations (Gambia-specific)

For Gambia development sector materials: urban architecture, government buildings, institutional settings. Modern, professional contexts.

3. Photography Style Rules

Lighting

• Prefer natural light — window light, daylight, ambient indoor lighting
• Warm colour temperature — avoid blue/cool casts. If correcting, push slightly warm (toward the brand's warm charcoal palette)
• Soft contrast — not blown highlights or crushed blacks. Aim for a balanced, open feel
• No dramatic lighting — no spotlights, coloured gels, or heavy mood lighting

Composition

• Leave breathing room — compositions should have clear space for text overlays when used as backgrounds or hero images
• Off-centre subjects — rule of thirds preferred over centred composition for environmental shots
• Shallow depth of field — acceptable for detail shots (hands on keyboard, screen close-ups) to focus attention
• Straight horizons — no Dutch angles or tilted framing

Colour treatment

• Desaturate slightly — imagery should not compete with the magenta brand colour. Pull saturation back 10-20% from camera output
• Warm shadows — shadows should lean warm (brown/amber), not cool (blue/purple)
• Consistent across a set — when multiple images appear together (e.g. team page, case study), colour-grade them to match

4. Stock Photography

Use original photography wherever possible. When stock is necessary, apply these selection criteria strictly.

Selection criteria

Criterion	Accept	Reject
People	Natural poses, real-looking workspaces, diverse ages and backgrounds, casual-professional dress	Models in suits, exaggerated expressions, unrealistic diversity staging, "pointing at whiteboard" clichés
Setting	Real offices, co-working spaces, meeting rooms that look used. Natural light.	Glass-walled corporate offices, Silicon Valley lofts, sterile white rooms
Technology	Real screens with plausible content (code, dashboards, design tools). Modern but not flashy hardware.	Glowing holographic UI, binary/matrix visuals, stock "cybersecurity" imagery
Colour	Warm natural tones, muted palette that won't fight the brand colours	Heavy blue tints, neon accents, saturated primary colours
Composition	Enough negative space for text overlay, clean backgrounds, clear focal point	Busy, cluttered scenes. Centre-punched subjects with no overlay space.

Gambia-specific stock

Stock of The Gambia is limited. Prefer original photography. If stock is needed, look for modern urban/institutional scenes or professional workplace settings. Broader West African imagery may work if it feels authentic to the context.

5. Product Screenshots & UI Presentation

Screenshots of software we've built are among the most important images. They prove capability directly. Always present them with care.

Presentation formats

Screenshot rules

• Use real data or realistic placeholder data — never lorem ipsum or obviously fake content in screenshots
• Blur or redact sensitive client data — names, figures, personal information
• Consistent sizing — when showing multiple screenshots together, match their visual scale
• Dark theme preferred — if the application supports dark mode, screenshot it in dark mode for brand alignment
• High resolution — minimum 2x display resolution. Never upscale a screenshot.

Screenshot background treatment

When placing screenshots on a page, use one of these background treatments:

6. Decorative Elements

Gradients

Subtle gradients are used for background depth and visual interest. Always understated — they should be barely noticeable.

Geometric patterns

Minimal, fine-line geometric patterns can be used as background textures. Think: subtle grid lines, faint dot grids, or thin ruled lines — the kind of marks you'd see on graph paper or a technical drawing.

• Colour: use #3B3535 (elevated) or lower opacity for pattern lines — they should be barely perceptible
• Scale: fine (1px lines, 20-40px grid spacing)
• Never heavy, decorative, or patterned in a way that suggests a specific culture or aesthetic

Shapes and dividers

• Rounded corners throughout: 8px for small elements, 10-12px for cards, 16px for large panels
• Dividers: 1px solid lines using #2E2929 (dark theme) or #E8E0DC (light theme)
• No decorative shapes (circles, triangles, blobs) used as pure ornament
• The magenta circle from the logo should not be replicated as a decorative element — it belongs to the logo only

7. Image Overlays & Dark Theme Integration

When photography is used as a background (hero sections, banners), it must be treated for readability and brand consistency.

Dark overlay

Apply a semi-transparent dark overlay for text legibility. Use the brand's warm charcoal, not pure black.

Overlay	CSS Value	Use When
Light overlay	rgba(26, 23, 23, 0.5)	Photo is already dark; just need to unify tone
Medium overlay	rgba(26, 23, 23, 0.7)	Standard hero section with heading text
Heavy overlay	rgba(26, 23, 23, 0.85)	Photo is light/busy; need strong text contrast

Gradient overlay variant

For hero sections where the photo should be visible at one edge but text appears at the other, use a directional gradient overlay:

8. Icon Style

Icons are used for navigation, feature lists, service descriptions, and UI elements.

Style specifications

Property	Value
Style	Outline/stroke (not filled). Consistent with the clean, modern brand feel.
Stroke width	1.5px at 24px icon size. Scale proportionally.
Corner radius	Rounded line caps and joins (round, not square or butt)
Grid	24px base grid with 2px padding (20px live area)
Sizes	16px (inline), 20px (UI), 24px (standard), 32px (feature), 48px (hero)

Icon colours

Context	Dark theme	Light theme
Default / navigation	#ACA4A0 (secondary text)	#6B6362 (secondary text)
Active / selected	#F5F0ED (primary text)	#221E1E (primary text)
Accent / feature highlight	#E91E8C (magenta)	#C81478 (magenta light-bg)
Disabled	#3B3535	#D4CCC8

Recommended icon library

Use Lucide (lucide.dev) as the primary icon set. It provides outline-style icons at 24px with 1.5px-2px stroke that match our style. Consistent, well-maintained, MIT licensed. If Lucide doesn't cover a needed icon, custom icons should match the same stroke weight and corner style.

9. Illustration

Writemedia does not use illustration as a primary visual tool. The brand relies on photography, screenshots, and clean UI design.

If illustration is ever needed (e.g. an empty state, an explainer diagram):

• Use simple line-art in the same style as the icon set (1.5px stroke, rounded joins)
• Colour palette limited to brand colours: magenta for emphasis, silver for structure, charcoal for lines
• No character illustrations, mascots, or cartoon figures
• Technical diagrams (architecture, flow) should use clean boxes and lines, not decorative shapes

10. Segment-Specific Guidance

Gambia Development Sector

• Team members at work, institutional settings, training sessions, software in-context
• Modern urban Gambia — government offices, infrastructure, professional environments
• Frame as capability and progress; avoid tourism or charity imagery

SaaS Partnership

• Lead with product screenshots — the software we've built together
• Show collaborative working (pair programming, design reviews, sprint planning)
• Emphasise the long-term relationship: growth over time, not just a single delivery

Internal Business Systems

• Lead with the interactive prototype / design process — this is the differentiator
• Show complex UI handling complex business logic (configurators, dashboards, workflows)
• Context shots of the environment the software serves (factory floor, warehouse, office) if available

11. Quick Reference

Element	Direction
Photography tone	Warm, natural light, slightly desaturated, candid
Primary subjects	People at work, screens with real software, workspaces
Stock test	If it looks like stock within 2 seconds, don't use it
Screenshots	In browser frames or device mockups, real/realistic data, dark theme preferred
Overlays	Warm charcoal rgba(26,23,23,x), never pure black
Gradients	Subtle surface-to-surface only, faint magenta glow acceptable
Icons	Lucide, outline style, 1.5px stroke, 24px base
Illustrations	Avoid. If needed: line-art matching icon style
Corner radius	8px small, 10-12px cards, 16px large panels
Gambia imagery	Capability and progress, never deficit or charity framing