# PixieMatch design

The source of truth for the PixieMatch brand. The brand book, logo files and
font kit are made from this file; the code tokens live in
`assets/css/app.css` and must match it. Change this file first, then the CSS.

> _Take a selfie. Get spotted._

## 1. Brand core

**What we are.** Event photographers and organizers create albums; guests find
every photo they're in with one selfie, then download or buy it. Payments run
through Paystack (M-Pesa and cards), and photographers withdraw from a wallet.

**Promise.** Your event photos, found with one selfie.

**Audiences.** Photographers (get paid, save time), organizers (one album for
the whole event), guests (find me, fast). Kenya first: prices in KSh, M-Pesa
named plainly.

**Personality.** Quick, warm, a little playful, never careless with faces.

| We are             | We are not            |
| ------------------ | --------------------- |
| Bright, energetic  | Loud, gimmicky        |
| Plain-spoken       | Technical, AI-hype    |
| Trustworthy        | Corporate, cold       |
| Celebratory        | Party-only, unserious |

## 2. Voice

- Short sentences. Say what happens: "Take a selfie. We'll show you every photo you're in."
- Talk to one person, "you". Photographers are "photographers", not "creators".
- Name money exactly: "KSh 500", "M-Pesa", "10% platform fee".
- Privacy is stated, not buried: "Your selfie is used to search, then deleted."
- Never say "AI", "facial recognition" or "biometric" in marketing copy; say
  "find your photos" or "selfie search". Legal pages use the precise terms.
- Buttons are verbs: "Find my photos", "Create album", "Withdraw".

Taglines: _Take a selfie. Get spotted._ · _Your event photos. Found with one selfie._
· _For photographers, organizers, and every guest._

## 3. Logo

**The mark.** A P made of pixels on an 8×8 grid: an outer corner, the P with
its square counter, and an inner corner that closes the frame. It reads as a
P, a viewfinder and a match bracket.

```text
path (viewBox 0 0 8 8, evenodd):
M0 0h8v1H1v7H0Z M2 2h4v4H3v2H2Z M3 3v2h2V3Z M7 2h1v6H4V7h3Z
```

**The wordmark.** PIXIEMATCH in Bricolage Grotesque SemiBold, all caps,
tracking 0.3em.

**Lockups.**

| Lockup     | Use                                    | Wordmark size |
| ---------- | -------------------------------------- | ------------- |
| Horizontal | App header, email header, documents    | cap height ≈ 0.45 × mark |
| Stacked    | Splash, posters, QR posters, packaging | width = mark width |
| Mark only  | Favicon, app icon, avatars, watermark  | none |

**Colour.** Violet `#7545D7` on light; white on violet, photos or dark. Lime
is never the logo colour on white (too little contrast); lime on dark violet
is allowed for campaign use.

**Clear space.** One grid unit (1/8 of the mark width) on every side, two for
the stacked lockup.

**Minimum size.** Mark 16px (favicon only), 24px elsewhere. Horizontal lockup
120px wide. Below 120px use the mark alone.

**Don't.** Rotate, outline, add gradients or shadows, round the corners,
change the grid, re-letter the wordmark, set it in sentence case, or place
violet on busy photos without a scrim.

**Files** (`priv/static/images/`):

| File                        | Size       | Use |
| --------------------------- | ---------- | --- |
| `logo.svg`                  | vector     | Mark, master |
| `pixiematch-logo.png`       | 1662×1842  | Stacked lockup, print |
| `pixiematch-logo-email.png` | 480×532    | Stacked lockup, email |
| `pixiematch-mark.png`       | 256        | Mark, violet |
| `pixiematch-mark-white.png` | 256        | Mark, white |
| `icon-512.png`, `icon-192.png`, `apple-touch-icon.png`, `favicon-32.png` | — | App and browser icons |
| `pixiematch-social.svg/.png`| 1200×630   | Link previews |

## 4. Colour

Two brand colours with separate jobs:

- **Pixie Violet** is the brand. The logo, the main action in the app, links.
- **Flash Lime** is the camera flash: a highlight, never body text. The
  "spotted" pulse, selection, stickers, one key word in a headline. Always
  with `on-brand` text.

### Brand

| Token          | Light     | Dark      | Role |
| -------------- | --------- | --------- | ---- |
| `accent`       | `#7545D7` | `#8359E3` | Pixie Violet: logo, primary buttons |
| `accent-strong`| `#6530C2` | `#936FF3` | Hover / pressed |
| `accent-soft`  | `#F0EDFF` | `#2D234B` | Quiet highlight background |
| `accent-ink`   | `#6231BA` | `#C1AFFF` | Violet text on soft |
| `on-accent`    | `#FFFFFF` | `#FFFFFF` | Text on violet |
| `brand`        | `#C5EE37` | same      | Flash Lime |
| `brand-strong` | `#B5DE00` | same      | Lime hover |
| `on-brand`     | `#1B2602` | same      | Text on lime |

Campaign deep violet for gradients and social: `#35109B` → `#633BC8` → `#A99CEB`.

### Neutrals

| Token         | Light     | Dark      | Role |
| ------------- | --------- | --------- | ---- |
| `canvas`      | `#F7F7FE` | `#0C0C15` | Page background |
| `surface`     | `#FFFFFF` | `#16161D` | Cards, panels |
| `sunken`      | `#F2F2F7` | `#09080E` | Wells, inputs |
| `line`        | `#E4E4EA` | `#27272F` | Borders |
| `line-strong` | `#CDCCD6` | `#41414D` | Emphasised borders |
| `ink`         | `#171723` | `#F1F1F6` | Text |
| `ink-muted`   | `#545460` | `#B1B0BA` | Secondary text |
| `ink-subtle`  | `#797984` | `#807F89` | Hints, captions |

### Status and supporting hues

| Token     | Light     | Dark      |
| --------- | --------- | --------- |
| `success` | `#00753E` | `#4AD186` |
| `warning` | `#9A5B00` | `#F7B83D` |
| `danger`  | `#CD171E` | `#FF7670` |
| `info`    | `#0068B7` | `#73B6FA` |
| `pink`    | `#D43B86` | `#F471AA` |
| `teal`    | `#008E89` | `#49C7C0` |
| `amber`   | `#D6810C` | `#F7AC4D` |
| `sky`     | `#0089CA` | `#5CB4EF` |

Supporting hues are for icons, charts and tiles only, so the app isn't all
violet. Destructive buttons use `danger-solid` `#CD171E` with white text in
both themes.

**Proportion.** Roughly 70% neutrals, 20% violet, 5% lime, 5% everything else.

Hex values are sRGB conversions of the OKLCH tokens in `app.css`; the OKLCH
values are canonical.

## 5. Typography

| Role    | Family              | Weights        | Licence |
| ------- | ------------------- | -------------- | ------- |
| Display | Bricolage Grotesque | 600, 700, 800  | SIL OFL |
| Text/UI | Geist               | 400, 500, 600  | SIL OFL |
| Fallback| system-ui, Arial    | —              | — |

Variable WOFF2 files are vendored in `priv/static/fonts/`. Both are on Google
Fonts for design tools.

### Scale

| Name      | Size / line | Family    | Weight | Tracking |
| --------- | ----------- | --------- | ------ | -------- |
| Hero      | 56 / 60     | Bricolage | 700    | -0.03em |
| H1        | 40 / 44     | Bricolage | 700    | -0.02em |
| H2        | 28 / 34     | Bricolage | 600    | -0.015em |
| H3        | 20 / 28     | Geist     | 600    | -0.01em |
| Body      | 16 / 26     | Geist     | 400    | 0 |
| Small     | 14 / 20     | Geist     | 400    | 0 |
| Caption   | 12 / 16     | Geist     | 500    | 0.01em |
| Eyebrow   | 12 / 16     | Geist     | 600    | 0.12em, caps |
| Wordmark  | —           | Bricolage | 600    | 0.3em, caps |

Headlines in sentence case. Numbers in tables and prices use tabular figures.

## 6. Shape, space, motion

- **Spacing:** 4px base; use 4, 8, 12, 16, 24, 32, 48, 64, 96.
- **Radius:** 8 inputs and small buttons, 12 buttons, 16 cards, 24 sheets and
  hero images, full for pills and avatars. The mark itself stays square.
- **Borders:** 1px `line`. Shadows are rare and soft; elevation comes from
  `surface` on `canvas`.
- **Motion:** `ease-soft` `cubic-bezier(0.22, 1, 0.36, 1)`; 150ms for hovers,
  300ms for UI, 700ms `rise` for page entrances. The lime `spotted` pulse marks
  a match. Respect reduced motion.

## 7. Iconography

Heroicons (outline 24 for UI, mini 20 in dense controls) via `<.icon>`.
Stroke icons in `ink-muted`; tinted tiles use a supporting hue at 12% on its
own colour. The scan-corner viewfinder (four rounded corners around a lime
dot) is the brand's signature illustration for selfie search.

## 8. Photography

Real African events: weddings, graduations, church, concerts, corporate days.
Candid, warm, people mid-laugh, groups more than portraits. Natural light and
golden hour; no stock-photo poses. Faces are the subject, so crops keep eyes
in the upper third. Over photos, use a violet-to-transparent scrim for text.
Images ship as WebP in `priv/static/images/home/` (full, `-card`, `-thumb`).

## 9. Applications

- **App UI:** neutral canvas, violet primary actions, lime only for "found you".
- **Email:** white background, stacked logo PNG at 120px wide, violet button.
- **QR poster:** deep-violet gradient, white mark, lime scan target, one line:
  "Scan to get your photos".
- **Social:** 1200×630, campaign gradient, white mark and wordmark, two-line headline.
- **Social profiles:** headers and covers for X (1500×500), LinkedIn (company
  1128×191, personal 1584×396), Facebook (1640×624) and YouTube (2560×1440),
  plus profile pictures and Instagram highlight covers. Night Sky gradient,
  white wordmark, "Take a selfie. Get spotted.", a lime pixiematch.com pill,
  pixel squares away from the words. The profile picture's overlap and phone
  crops stay clear. Download them from `/brand/social.zip`.

## 10. Social bios

One voice everywhere: the promise first, then what photographers and guests
each get. Link to pixiematch.com. At most two emoji, never in a headline.
Limits are the platform's, in characters.

**Instagram** (143/150)

> Your event photos, found with one selfie 📸
> Photographers: one album, paid by M-Pesa.
> Guests: take a selfie, get every photo you're in.
> 👇 Try it

**TikTok** (70/80)

> Take a selfie. Get spotted. 📸 Every event photo you're in, in seconds.

**X (Twitter)** (154/160)

> Event photos, found with one selfie. Photographers upload once. Guests find every photo they're in and pay with M-Pesa. Weddings, graduations, concerts 🇰🇪

**LinkedIn headline** (149/220)

> Event photo delivery for photographers and organizers. One album per event, guests find their photos with a selfie, photographers get paid by M-Pesa.

**LinkedIn about** (526/2000)

> PixieMatch gets event photos to the people in them.
>
> Photographers and organizers create one album for the whole event. Guests take a selfie and see every photo they're in, then download them, or buy them with M-Pesa or card. Photographers get paid straight to their wallet and withdraw when they like.
>
> No more sharing a hundred links, scrolling through thousands of photos, or chasing payments. Your selfie is used to search, then deleted.
>
> For weddings, graduations, church events, concerts and corporate days. Kenya first.

**Facebook** (243/255)

> PixieMatch gets event photos to the people in them. Photographers and organizers create one album; guests take a selfie and see every photo they're in, then download or buy them with M-Pesa or card. Your selfie is used to search, then deleted.

**WhatsApp Business** (114/139)

> Your event photos, found with one selfie. Photographers upload, guests find every photo they're in. pixiematch.com