writemedia
Writemedia is a bespoke software development agency. We build, operate, and evolve custom software — from SaaS products to government digital infrastructure. Our team spans the UK and The Gambia, combining international delivery standards with genuine local presence.
Resources for team members and AI tools working with the Writemedia brand.
Each document below covers one aspect of the brand in detail. Together they define how Writemedia looks, sounds, and communicates.
Accessibility variants: #DE1C86 (magenta for buttons — white text on magenta bg), #C81478 (magenta on light), #F24BA3 (magenta on dark small text), #5F6B7A (silver on light).
| Role | Size | Weight |
|---|---|---|
| Display / H1 | 2.4 / 2.0 rem | 700 |
| H2 / H3 | 1.5 / 1.25 rem | 600 |
| Body | 1 rem | 400 |
| Small / Caption | 0.875 / 0.75 rem | 400 |
| Button / Nav | 0.875 rem | 600 / 500 |
We speak plainly, show expertise through specifics rather than claims, maintain a steady tone, and focus on real outcomes. We never use unsubstantiated statistics or hyperbolic language.
All services operate under the Writemedia brand. We do not maintain separate brand identities for different market segments. Segment-specific positioning is handled through messaging and content — not through naming or visual identity.
With a team of seven people, maintaining multiple brand identities would dilute effort and create confusion. A single brand builds cumulative recognition. The three market segments (Gambia Development Sector, SaaS Partnership, Internal Business Systems) are served by the same team with the same values — the messaging framework handles the differences in how we talk to each audience.
Separate websites serve the Gambia and UK markets, each presenting the Writemedia brand with segment-specific messaging and content. The visual identity and brand system are the same across both.
| File | Variant | Use on |
|---|---|---|
| wmlogo.svg | WM circle mark | Any background |
| horizontal-lockup.svg | Circle + wordmark horizontal | Light backgrounds |
| horizontal-lockup-dark.svg | Circle + wordmark horizontal | Dark backgrounds |
| wordmark.svg | Text only | Light backgrounds |
| wordmark-dark.svg | Text only | Dark backgrounds |
| stacked-lockup.svg | Circle above wordmark | Light backgrounds |
| stacked-lockup-dark.svg | Circle above wordmark | Dark backgrounds |
These guidelines are intended for anyone creating content, designs, or communications for Writemedia — whether that's a person or an AI agent. The foundation documents linked above are the source of truth. This page provides an overview and quick reference; always refer to the detailed document for implementation specifics.
When creating new material, check:
| Creating... | Refer to |
|---|---|
| A web page or UI | Colour Palette + Typography Scale |
| A document or presentation | Colour Palette + Typography Scale + Logo Usage |
| Marketing copy | Voice & Tone + Messaging Framework |
| Social media post | Voice & Tone + Messaging Framework + Imagery |
| A proposal or tender | Messaging Framework + Logo Usage + Voice & Tone |
| Photography or visuals | Imagery & Photography + Colour Palette |
These rules address common mistakes when applying the brand system. They supplement the foundation documents with practical constraints learned from real implementation.
Magenta (#E91E8C) is a highlight colour, not a general-purpose accent. Use it sparingly so it has impact when it appears.
| Use magenta for | Use Cool Silver for |
|---|---|
| Primary CTA buttons | Section labels and overlines |
| Logo circle mark | Icon strokes |
| Key interactive elements (links, toggles) | Credential numbers and stats |
| Checkmark / success indicators | Badges, tags, metadata labels |
| One "brand moment" per page (if needed) | Secondary buttons (outline style) |
Rule of thumb: if you removed all the magenta from a page and it lost its visual hierarchy, you're relying on it too much. The page should work in greyscale; magenta adds emphasis, not structure.
Use the full tonal range, not just white and one grey. Each level has a specific role:
| Colour | Hex | Role | Use for |
|---|---|---|---|
| White | #FFFFFF | Maximum emphasis | Page titles, hero headings, CTA section headings |
| Warm white | #F5F0ED | Primary text | Section headings (H2), nav logo, dashboard values |
| Warm mid | #D4CBC6 | Secondary headings | Card titles, credential labels, trust point text, bold emphasis within body |
| Warm grey | #ACA4A0 | Body text | Paragraphs, descriptions, nav links, card body text |
| Muted | #958D89 | De-emphasised text | Footer text, captions, timestamps — minimum for readable text |
Do not use #5A5250 or darker for text. It fails WCAG AA on all dark theme surfaces. #958D89 is the floor for readable text on dark backgrounds.
White text on brand magenta (#E91E8C) achieves only 4.18:1 contrast — below the WCAG AA threshold of 4.5:1 for normal text. To solve this, buttons use a slightly darkened magenta: #DE1C86 (4.55:1 with white). The difference from brand magenta is imperceptible.
| Context | Magenta value | Contrast with white |
|---|---|---|
| Buttons, nav CTAs (white text on magenta bg) | #DE1C86 | 4.55:1 — passes AA |
| All other uses (icons, logos, decorative, links) | #E91E8C | Not applicable (no white text on magenta bg) |
Important: WCAG "large text" (3:1 threshold) requires 18px+ regular or 14pt bold (≈19px). Most button text is 14–16px, so it does not qualify as large text. Always use #DE1C86 for magenta buttons regardless of size.
When showing simulated screenshots, dashboards, or application UI in marketing materials:
| Do | Don't |
|---|---|
| Use realistic, neutral UI colours | Apply brand magenta to dashboard elements |
| Use standard status colours (green for live/success, amber for warnings) | Re-colour status indicators to match brand palette |
| Show real or realistic data | Use placeholder text like "Lorem ipsum" |
| Present in browser frames or device mockups with dark chrome | Show floating screenshots without context |
The brand identity lives in the page around the screenshot, not inside it. Screenshots should look like real working software.
The dark theme surface hierarchy (#1A1717 → #221E1E → #2A2525) is deliberately subtle. To ensure cards and sections are visually distinct:
| Element | Border colour | Hover border |
|---|---|---|
| Cards on page background | #3B3535 | #5A5250 |
| Section dividers | #2E2929 | — |
| Input fields / interactive containers | #3B3535 | #5A5250 or magenta for focus |
Don't rely solely on background colour differences to separate sections. Use borders (#3B3535) to make card edges visible.
All Writemedia digital materials must meet WCAG 2.1 Level AA as a minimum. This section summarises the key requirements; the colour palette and typography documents contain the specific values.
| Text type | Min contrast ratio | Definition |
|---|---|---|
| Normal text | 4.5:1 | Any text below 18px regular or 14pt (≈19px) bold |
| Large text | 3:1 | 18px+ regular weight, or 14pt+ (≈19px+) bold (700) |
| UI components & graphical objects | 3:1 | Icons, form borders, focus indicators |
These pairings have been tested and pass AA. Use these rather than picking arbitrary combinations from the palette.
| Foreground | Background | Ratio | Typical use |
|---|---|---|---|
| #FFFFFF | #1A1717 (page) | 18.3:1 | Hero headings, page titles |
| #F5F0ED | #1A1717 (page) | 16.0:1 | Section headings |
| #F5F0ED | #221E1E (surface) | 14.5:1 | Nav logo, card headings |
| #D4CBC6 | #221E1E (surface) | 11.1:1 | Card titles, secondary headings |
| #ACA4A0 | #1A1717 (page) | 7.5:1 | Body text on page |
| #ACA4A0 | #221E1E (surface) | 7.2:1 | Body text on cards/nav |
| #958D89 | #1A1717 (page) | 5.7:1 | Footer text, captions |
| #B0B8C4 | #1A1717 (page) | 9.2:1 | Overlines, stat numbers |
| #FFFFFF | #DE1C86 (button) | 4.55:1 | Primary button text |
| #221E1E | #F5F0ED (light page) | 14.5:1 | Light theme headings |
| #6B6362 | #FFFFFF (light card) | 5.9:1 | Light theme body text |
| #C81478 | #FFFFFF (light card) | 4.6:1 | Magenta on light backgrounds |
Colour contrast is the most common accessibility consideration when applying brand guidelines, but it is not the only one. When building pages and materials:
| Requirement | What to do |
|---|---|
| Semantic HTML | Use proper heading hierarchy (h1→h2→h3), landmark elements (nav, main, footer), and meaningful link text |
| Keyboard navigation | All interactive elements must be reachable and operable by keyboard. Visible focus indicators required |
| Focus indicators | Use a 2px magenta (#E91E8C) outline or the browser default. Never remove focus outlines without providing an alternative |
| Alt text | All informational images need descriptive alt text. Decorative images use empty alt (alt="") |
| Responsive design | Content must be usable at 320px viewport width and up to 400% zoom without horizontal scrolling |
| Colour not sole indicator | Never use colour alone to convey information (e.g. error states need text or icons too, not just red) |
| Link distinction | Links within body text should be distinguishable by more than colour — use underline or bold weight |