# Phone Deals UK brand guide

**Direction:** Editorial annotation
**Status:** Approved for production
**Version:** 3.2
**Approved:** 23 July 2026
**Maintainer:** Phone Deals UK product/design  
**Source of truth:** This guide, [`tokens.css`](https://phone-deals.uk/brand/phone-deals-uk-tokens.css) and the path-based masters in [`assets/`](https://phone-deals.uk/brand/)

This guide defines how Phone Deals UK should look, sound and behave across phone deals, SIM deals, comparisons, current and expired deal context, editorial guidance, product tools and external brand use.

![Phone Deals UK primary lock-up](https://phone-deals.uk/brand/phone-deals-uk-primary-lockup.svg)

## 1. Brand foundation

### Name

Use **Phone Deals UK** in prose, page titles, metadata, legal copy and the visual wordmark. Keep it in title case. Do not shorten the public name to PDUK.

Write the domain as **phone-deals.uk**. The domain is an address, not a substitute for the name in normal sentences.

### Brand line

> **Phone deals, properly checked.**

This is the permanent brand line. It explains the service; it is not part of the everyday logo. Use it in the homepage hero, launch material, link previews and occasional footer or campaign placements.

### Supporting line

> **We check the deals. You skip the sales patter.**

Use this selectively in campaigns and explanatory sections. It does not replace the permanent brand line.

### Promise

We check phone and SIM deals, do the sums, read the awkward bits and share the ones we think are worth your time.

### Essence

> **A smart mate with the receipts.**

The personality comes from being useful, candid and on the buyer's side. It does not come from forced slang, a named reviewer character or pretending to have tested something we have not.

### Positioning

Phone Deals UK sits between noisy phone retail and cold comparison tables. It combines evidence with a clear human judgement:

- the useful conclusion first;
- the real cost, not the teaser;
- the reason a deal looks good;
- the catch beside the benefit;
- evidence and uncertainty available when someone wants to inspect them;
- the same rank and verdict whether or not a link earns commission.

Design for ordinary UK phone buyers first. More confident shoppers should still be able to inspect exact variants, checked prices, support life, tariff schedules and comparison detail.

## 2. Personality and voice

Phone Deals UK is:

- **On your side:** helpful before commercial.
- **Sharp:** notices the storage, seller, fee, price rise or missing promise that changes the decision.
- **Plain-spoken:** translates evidence into normal English.
- **Honest:** comfortable saying “we don't know yet” or “we'd wait”.
- **Calm:** no hype, countdowns or manufactured urgency.
- **Economical:** feels good value, never bargain-bin.

It is not a network shop, phone dealer, corporate finance brand, gadget fan club, coupon dump, fake lab or matey character performing banter.

### Five writing rules

1. **Give the answer first.** “Looks good”, “fair price” or “we'd wait” comes before the calculation.
2. **Talk to one person.** Use “you”, “we've checked” and natural contractions.
3. **Show the working.** Say what was checked, when, and what the comparison is based on.
4. **Name the catch without drama.** Put trade-ins, price rises, weak support and unknowns beside the benefit.
5. **Be lightly human.** A dry line is welcome. Repeatedly saying “mate” is not a voice.

“We” means Phone Deals UK as a checking and comparison service. Use “hands-on review”, “we tested” or “we used this phone” only when that genuinely happened and can be documented.

### Preferred language

| Prefer | Avoid |
|---|---|
| Phone deals | Handset propositions |
| SIM deals | Tariff solutions |
| How we check | Our verification framework |
| Our take | Value signal |
| Why it looks good | Ranking rationale |
| The catch | Considerations apply |
| What you'd pay | Standardised total |
| We couldn't confirm it | Insufficient data confidence |
| See the full check | Explore deal intelligence |
| Checked at 10:42 | Real-time validated pricing |

Avoid “unbeatable”, “must-have”, “exclusive”, “hurry”, “selling fast”, “from only”, “massive saving”, “huge data boost”, “upgrade today” and “get yours now”. Unsupported “best”, “cheapest”, “record low” and “lowest ever” claims are also out.

### Tone by context

- **Verdict:** short, direct and specific.
- **Methodology:** clear and rigorous without sounding defensive.
- **Unknown or error:** candid, useful and free of blame.
- **Commercial disclosure:** matter-of-fact and placed beside the action.
- **Social:** conversational, never breathless.

## 3. Messaging system

### Homepage hierarchy

1. **Eyebrow:** No phone-shop patter. Just the useful bits.
2. **Hero:** Phone deals, properly checked.
3. **Explanation:** We check the full price, the small print and how long the phone should last — then tell you plainly whether it's worth it.
4. **Primary action:** See checked phone deals.
5. **Secondary action:** Compare SIM deals.

### Default deal order

1. Exact product or plan identity.
2. Delivered price or full comparison total.
3. **Our take:** Looks good / Looks good, but… / Fair price / We'd wait / Not enough evidence yet.
4. **Why it looks good:** one specific, supportable reason.
5. **The catch:** the most important limitation in normal English.
6. What was checked, when, and any evidence limitation.
7. Commercial label beside the outbound action.

### Reusable patterns

**Missing information**

> We couldn't confirm when software support ends, so we've left it unknown rather than guessed.

**SIM pricing**

> £7.95 sounds good. It rises to £9.95 in month four, so you'd pay £113.40 over twelve months.

**Trade-in**

> This price needs an eligible trade-in. Without one, the deal isn't nearly as good.

**Affiliate link**

> **Ad · affiliate link.** If you buy through it, we may earn a commission. That never affects how we rank the deal.

**Amazon affiliate link**

> **Ad · Amazon affiliate link.** We may earn a commission. Ranking unchanged.

**Ordinary retailer link**

Use the normal retailer action with no affiliate or non-affiliate badge.
Commercial disclosure is required beside a monetised action; the absence of
commission is not a product attribute and should not add visual noise.

Use `£429`, `£7.95 a month` and `£113.40 over 12 months`. Include mandatory delivery and unavoidable fees in the displayed total. Pair relative freshness with exact time when it matters: `Checked 12 minutes ago · 10:42`.

## 4. Visual direction

The visual direction is a **calm editorial utility**: bright, spacious and decisive, with enough character to be recognisable but no phone-shop theatre.

- Warm-white page canvas and true-white cards make comparison comfortable.
- Deep teal is the single primary action colour.
- Pale green identifies a properly checked, positive state.
- Pale amber makes a catch visible without making it alarming.
- Fine borders, restrained rounding and very soft shadows define structure.
- Sentence-case type makes the product feel human rather than like a dashboard.

### Identity idea

The wordmark treats **Deals** like a line someone has checked and annotated. A teal rule runs underneath it, turns upward at the right margin and points to a small **UK** note. It feels editorial, precise and quietly distinctive rather than like a retailer badge.

The compact mark reduces the same idea to a custom **D** and annotation turn. It is a reduction of the identity, not a separate symbol.

Avoid dark hero shells, neon accents, grid textures, terminal chrome, unexplained gauges, fake device gradients, giant sale stickers, glassmorphism and decorative “AI” flourishes.

## 5. Logo system

The canonical logo family lives in [`assets/`](https://phone-deals.uk/brand/). Every approved master is self-contained SVG artwork: all lettering is converted to paths, so no font is loaded or substituted at use time.

### Core variants

| Asset | Intended use |
|---|---|
| [`phone-deals-uk-primary-lockup.svg`](https://phone-deals.uk/brand/phone-deals-uk-primary-lockup.svg) | Default full-colour logo for roomy horizontal placements |
| [`phone-deals-uk-nav-lockup.svg`](https://phone-deals.uk/brand/phone-deals-uk-nav-lockup.svg) | Optically adjusted full lock-up for site navigation and compact horizontal placements |
| [`phone-deals-uk-stacked-lockup.svg`](https://phone-deals.uk/brand/phone-deals-uk-stacked-lockup.svg) | Portrait, centred and narrow compositions |
| [`phone-deals-uk-inverse.svg`](https://phone-deals.uk/brand/phone-deals-uk-inverse.svg) | Full lock-up on the approved deep-ink background |
| [`phone-deals-uk-mono-dark.svg`](https://phone-deals.uk/brand/phone-deals-uk-mono-dark.svg) | One-colour reproduction on light backgrounds |
| [`phone-deals-uk-mono-light.svg`](https://phone-deals.uk/brand/phone-deals-uk-mono-light.svg) | One-colour reproduction on dark backgrounds |
| [`phone-deals-uk-wordmark.svg`](https://phone-deals.uk/brand/phone-deals-uk-wordmark.svg) | Restricted placements where the annotation cannot be reproduced, or the mark is already established nearby |
| [`phone-deals-uk-mark.svg`](https://phone-deals.uk/brand/phone-deals-uk-mark.svg) | Compact full-colour identity at 48px and above |
| [`phone-deals-uk-mark-inverse.svg`](https://phone-deals.uk/brand/phone-deals-uk-mark-inverse.svg) | Compact identity on deep-ink backgrounds |

### Icons and social masters

| Asset | Intended use |
|---|---|
| [`phone-deals-uk-favicon.svg`](https://phone-deals.uk/brand/phone-deals-uk-favicon.svg) | Adaptive vector browser icon where SVG favicons are supported |
| [`phone-deals-uk-favicon-16.svg`](https://phone-deals.uk/brand/phone-deals-uk-favicon-16.svg) | Purpose-drawn 16px source; do not derive it by shrinking the 64px mark |
| [`phone-deals-uk-favicon-32.svg`](https://phone-deals.uk/brand/phone-deals-uk-favicon-32.svg) | Purpose-drawn 32px source |
| [`phone-deals-uk-maskable.svg`](https://phone-deals.uk/brand/phone-deals-uk-maskable.svg) | Source for maskable web-app icons; safe area is already built in |
| [`phone-deals-uk-social-square.svg`](https://phone-deals.uk/brand/phone-deals-uk-social-square.svg) | Square avatar/profile artwork |
| [`phone-deals-uk-social-card.svg`](https://phone-deals.uk/brand/phone-deals-uk-social-card.svg) | Link preview and editorial sharing artwork |

Use the supplied social and maskable canvases as they are. Do not crop their safety margins.

### Which full lock-up to choose

- Use the **primary lock-up** for brand pages, documents, partner placements and large page furniture.
- Use the **navigation lock-up** in a site header or whenever the full logo is shown below 280 CSS pixels wide. Its larger UK note and shorter annotation return are drawn for that scale.
- Use the **stacked lock-up** when a horizontal logo would become too small.
- Use the **compact mark** when even the navigation lock-up will not fit comfortably.
- Use the plain **wordmark** only when reproduction constraints genuinely rule out the annotation.

Do not build a hybrid from separate files.

### Clear space

For every full lock-up, define `x` as the cap height of the small **UK** note. Keep at least `x` of empty space beyond the outermost visible artwork on all four sides.

For the compact mark, keep at least one quarter of the mark's width clear on all four sides. The social-square and maskable masters already include their own safety area.

Clear space is empty space. Borders, text, icons, photographs and container edges should not enter it.

### Minimum size

| Variant | Minimum screen size | Preferred screen size |
|---|---:|---:|
| Primary lock-up | 280px wide | 320px or wider |
| Navigation lock-up | 180px wide | 200px or wider |
| Stacked lock-up | 140px wide | 168px or wider |
| Plain wordmark | 160px wide | 200px or wider |
| Compact mark | 48px square | 64px or larger |

For print, keep the primary lock-up at least 48mm wide and the compact mark at least 8mm square.

Below 48px, use the closest supplied optical favicon master rather than the general compact mark. Use the 16px drawing from 16–23px and the 32px drawing from 24–47px; never generate either by downsampling the general mark.

### Colour and backgrounds

- On white, paper and pale-neutral surfaces, use the primary, navigation or standard compact artwork: **Ink `#14211D`** with **Teal `#166B5A`**.
- On the approved Ink background, use an inverse asset: white lettering with the **Pale green `#C7F36B`** annotation.
- For one-colour production, use the supplied mono artwork rather than recolouring a full-colour file.
- On imagery, choose a quiet area with dependable contrast. If that is not available, use a plain white or Ink holding panel.
- Do not place the full-colour logo directly on teal, green, amber, a gradient or a busy photograph.

### Never

- typeset the wordmark instead of using an approved asset;
- stretch, rotate, skew, condense or rearrange the artwork;
- change the spacing between **Phone**, **Deals**, the annotation and **UK**;
- extend, shorten, thicken or round the annotation differently;
- detach the annotation turn and use it as a generic tick, bracket or verified badge;
- replace the compact **D** with a typed character;
- recolour individual pieces or add gradients, glows, outlines or shadows;
- put the logo inside an unapproved badge or phone silhouette;
- append the brand line to the navigation lock-up;
- use the logo beside unsupported urgency, “cheapest” or “record low” language.

## 6. Colour

The canonical implementation values live in [`tokens.css`](https://phone-deals.uk/brand/phone-deals-uk-tokens.css).

| Token | Hex | Role |
|---|---:|---|
| Ink | `#14211D` | Primary text and approved dark background |
| Paper | `#F7F8F6` | Main page background |
| Surface | `#FFFFFF` | Cards, controls and elevated content |
| Surface soft | `#EEF3F0` | Quiet sections and product stages |
| Ink soft | `#5B6762` | Secondary text |
| Rule | `#DCE3DF` | Decorative separators and card borders |
| Teal | `#166B5A` | Primary actions, links and checked accents |
| Teal hover | `#0E5144` | Primary-action hover and active state |
| Action soft | `#E3F3EE` | Selected and supportive teal surface |
| Pale green | `#C7F36B` | Positive emphasis and inverse-logo annotation |
| Amber | `#98500C` | Catch and caution text |
| Amber soft | `#FFF8EE` | Catch background |
| Red | `#B42318` | Error and expired states only |

Reference text combinations meet WCAG AA for normal text:

- Ink on white: approximately 16.6:1.
- Ink soft on white: approximately 5.9:1.
- Teal on white: approximately 6.4:1.
- Teal hover on white: approximately 9.2:1.
- Amber on white: approximately 6.0:1.
- Red on white: approximately 6.6:1.

Never communicate a verdict by colour alone. Pair colour with a plain label such as “Looks good”, “The catch” or “Expired”. Pale green is a background or highlight colour, not body text on white.

## 7. Typography

### Logo construction type

The outlined wordmark began with **Atkinson Hyperlegible Next Bold** and received custom spacing and annotation geometry. This font is construction provenance, not a licence to recreate the logo. Always use the supplied path-based master. Full source and licence notes live in `source/README.md`.

### UI sans

```css
font-family: "Segoe UI Variable", "Inter Variable", Inter, system-ui,
  -apple-system, BlinkMacSystemFont, sans-serif;
```

Use for prose, headings, controls and product names. The system-first stack is quick to render, private by default and familiar without feeling like a retailer.

### Data mono

```css
font-family: "Cascadia Code", "SFMono-Regular", Consolas,
  "Liberation Mono", monospace;
```

Use only for exact SKUs, timestamps and compact technical metadata. Do not use mono for section labels, long explanations or brand personality.

### Scale

| Style | Token/default | Use |
|---|---|---|
| Display | `clamp(3.25rem, 5vw, 4.8rem)` | Homepage hero |
| Section | `clamp(2.35rem, 4.5vw, 4.25rem)` | Major section headings |
| Price | `clamp(2.15rem, 4vw, 2.8rem)` | Primary price |
| Card title | `1.125rem` | Product and plan names |
| Body | `1rem / 1.55` | Default reading copy |
| Small | `0.875rem` | Supporting copy |
| Metadata minimum | `0.75rem` | Short labels and disclosures |

- Use 800 for displays, 700 for headings and important controls, and 400 for body copy.
- Use sentence case throughout the interface.
- Keep body lines close to 45–68 characters.
- Use tabular lining numerals for prices, schedules, tables and charts.
- Essential copy and commercial disclosures must never be smaller than 12 CSS pixels.

## 8. Layout, shape and depth

- Start at 320 CSS pixels and enhance upward.
- Maximum content width: 1200px.
- Page gutter: 14px at the narrowest viewport, growing to 20px.
- Use the four-pixel spacing rhythm in `tokens.css`.
- Major section spacing: 64–96px, fluid with viewport width.
- Use one column on narrow screens, two where cards remain comfortable, and three only when the content benefits.
- Keep the conclusion, price and catch visible without opening an accordion.

Standard card radius is 20px. Standard control radius is 12px. Use full pills only for short statuses, filters and compact facts. Cards use a fine cool-grey border and a very soft shadow. Avoid floating every surface, heavy elevation and rounded containers nested three levels deep.

Whitespace should make the comparison easier to scan, not make the service feel luxurious or remote.

## 9. Core product patterns

### Buttons and links

- Primary: teal fill, white text, 48px standard height.
- Secondary: white fill, visible border and Ink text.
- Hover and active states change colour or border; they do not bounce.
- Action copy describes the next view: “See the full check”, “See the full cost”, “Compare these phones”.
- Do not use “Buy now” unless someone is genuinely completing a purchase on Phone Deals UK.
- Underline links in prose. Do not rely on colour alone.

### Deal card

Every published deal card contains:

1. exact product or plan identity;
2. condition, region, storage/colour or plan allowance;
3. delivered price or full comparison total;
4. checked time and evidence state;
5. the plain-English verdict;
6. why it looks good;
7. the visible catch;
8. commercial label next to the outbound action when the link is monetised.

Keep human judgement separate from evidence state. “Looks good” is a verdict; “checked”, “needs recheck” and “expired” describe the evidence.

### Deal history

Deal history sits on the canonical phone page and contains discrete, dated retailer checks retained after the offer expired. It may include different retailers, but each card must remain grouped under the exact phone configuration and show the retailer, checked date, old deal price, availability recorded at that check, evidence limits and a prominent “Expired” label. Remove the outbound retailer action. Use past-tense archive copy rather than reusing a live verdict.

Introduce the section as “Past deals we’ve checked”, not a complete price tracker. Do not add charts, tracked-day counters, averages, lowest-ever claims or visual language that implies continuous market coverage.

### Why and catch

These belong together. They may sit side by side on wide cards and stack on narrow cards, with “Why it looks good” first. The catch never hides behind a tooltip, hover state or accordion.

### SIM schedule

Show every scheduled monthly price, the months it applies to, any stated rise date and the chosen comparison-period total. The introductory monthly price must not visually overpower the total. On mobile, use a vertical schedule rather than squeezed columns.

### Affiliate disclosure

Place `Ad · affiliate link` next to the linked result or action. Use the more specific `Ad · Amazon affiliate link` label for Amazon. Keep it readable and calm. It must never be shrunk, muted or separated from the commercial action. Affiliate status never changes rank or verdict styling.

## 10. Icons, imagery and data

- Use simple 1.75–2px strokes with rounded ends.
- Pair unfamiliar icons with text.
- Use a check only for an actual checked state.
- The logo's annotation turn is brand artwork, not an interface icon.
- Do not use network bars as a coverage claim unless they represent real coverage data.

Prefer authorised retailer-feed assets or manufacturer imagery with confirmed usage rights. Match the exact model and, where material, the exact colour and storage. Use a calm neutral stage rather than a fake retail showroom. Avoid lifestyle upgrade celebrations, confetti, sale stickers and copied retailer campaign art.

Charts answer a named question, show units and time period, label important points directly and provide their values in accessible text or a table. Do not use unexplained confidence gauges or decorative progress bars.

## 11. Interaction and motion

- Motion confirms cause and effect; it does not entertain while someone compares prices.
- Standard transition: 180ms with the system easing token.
- Prefer colour, border and opacity changes. Do not lift primary actions on hover.
- Never animate prices, urgency, countdowns or stock pressure.
- Respect `prefers-reduced-motion`.
- Do not place essential information only on hover.
- Loading states say what is being checked and retain layout to avoid jumps.
- Mobile navigation remains labelled, keyboard-operable and complete.

## 12. Accessibility and inclusive design

WCAG 2.2 AA is the release floor, not a final audit badge.

- Support keyboard use and logical focus order.
- Use a visible 3px focus indicator in deep teal on light surfaces and pale green on dark surfaces.
- Keep focused controls unobscured by sticky UI.
- House standard: 44×44 CSS pixels for primary controls and dense touch targets.
- Reflow meaningful content at 320 CSS pixels, except genuinely two-dimensional data.
- Keep essential metadata and disclosures at 12 CSS pixels or larger.
- Preserve text spacing and 200% zoom without clipping.
- Prefer semantic HTML before adding ARIA.
- Provide a skip link and descriptive page title.
- Support forced colours/high contrast and test verdict labels without colour.
- Give an informative logo `alt` when it conveys the organisation name; use empty `alt` when a surrounding labelled link already provides that name.

The static reference demonstrates direction; production components still require automated and manual accessibility testing.

## 13. Commercial truth

Commercial truth is part of the product, not footer copy.

- Show the total mandatory price up front, including unavoidable delivery or fees.
- Match the exact phone, storage, region, condition, seller and lock state.
- Keep calendar-month, 30-day and annual-prepayment SIM schedules distinct.
- Show stated in-contract rises in pounds and pence, with the date or month they begin.
- Do not subtract trade-in, redemption cashback, gift value or referral rewards from the guaranteed price.
- Keep trade-in, cashback, membership, credit and eligibility conditions next to the headline figure.
- Mark affiliate-linked content clearly where the action appears.
- Include useful non-affiliate offers in the same ranking system.
- Never imply independence through design while hiding a material commercial relationship.

Primary references:

- [W3C Web Content Accessibility Guidelines 2.2](https://www.w3.org/TR/WCAG22/)
- [CMA guidance on clear and accurate price information](https://www.gov.uk/government/publications/price-transparency-cma209/providing-clear-and-accurate-information-about-prices-summary)
- [Ofcom guidance on telecoms price rises](https://www.ofcom.org.uk/phones-and-broadband/saving-money/telecoms-price-rises-what-are-your-rights)
- [ASA/CAP guidance on affiliate marketing](https://www.asa.org.uk/advice-online/affiliate-marketing.html)

This is product and brand guidance, not legal advice.

## 14. Asset handling

The public page at **phone-deals.uk/brand-assets** is the preferred hand-off point for partners, press and contributors.

- SVG is the master format for web and print.
- PNG is for tools that cannot accept SVG.
- Use the exact exported favicon and app-icon sizes supplied in the public bank.
- Keep canonical artwork in `design/brand/assets/`; generated public copies must match it.
- Do not edit generated public files by hand.
- Do not convert screenshots or JPEGs into logos.
- Do not re-save SVGs through a tool that turns path data back into live type.

When the logo changes, update the master, public asset bank, web manifest, favicon links, social preview, guide version and tests as one release.

## 15. Release checklist

Before a page, component or asset ships, confirm:

- Does it sound like a useful person, not a dealer or press release?
- Is the useful conclusion visible before the methodology?
- Is the exact phone, plan or variant unambiguous?
- Is the unavoidable total as prominent as any teaser price?
- Is the main catch next to the benefit?
- Are check time, evidence limits and unknowns honest?
- Is affiliate status obvious beside the action?
- Does the layout work at 320px, 200% zoom and with keyboard only?
- Are touch targets, focus, contrast and reduced motion covered?
- Are images licensed, exact and dimensioned?
- Is the correct logo master used at or above its minimum size?
- Does the logo have the required clear space and background contrast?
- Are favicon and maskable artwork using their dedicated masters?
- Has retailer urgency, corporate jargon or decorative dashboard noise slipped in?

## 16. Canonical files

- [`properly-checked.html`](https://phone-deals.uk/brand-assets/) — approved visual reference using fictional data.
- [`tokens.css`](https://phone-deals.uk/brand/phone-deals-uk-tokens.css) — canonical implementation tokens.
- [`assets/`](https://phone-deals.uk/brand/) — canonical path-based logo family.
- `source/README.md` — construction-source provenance and licence notes.
- `/brand-assets` — public style guide and downloadable asset bank.

Production components consume the canonical tokens and artwork and link back to this guide. If implementation and this document disagree, resolve the difference deliberately rather than allowing a silent fork.

## Change log

- **3.2 · 26 July 2026:** Defined exact-variant deal history for discrete expired offers across retailers, with no live action or continuous-tracking claims.
- **3.1 · 26 July 2026:** Removed planned public price-history states and patterns; retained current checked prices, freshness controls and clearly separate expired editorial context.
- **3.0 · 23 July 2026:** Approved the editorial-annotation identity; replaced the rejected draft mark with outlined primary, navigation, stacked, compact, favicon, inverse, monochrome and social masters; fixed logo sizing, clear-space and source-provenance rules; retained the modern-clean product and personal “smart mate” voice.
- **2.0 · 19 July 2026:** Reframed Properly Checked as a modern-clean editorial utility and defined the public asset-bank requirement. Logo artwork was not yet approved.
- **1.0 · 18 July 2026:** Consolidated the initial visual, voice and implementation direction.