# SavrPass pubmat style guide

The aim: someone scrolling past should know a post is from SavrPass before they read it, whatever the layout.

## Colour

Every colour comes from the SavrPass logo: the blue phone, the red star and the navy wordmark.

| Role | Colour | Hex | Use |
|---|---|---|---|
| Hero | **Cobalt** | `#1D3FD6` | Highlighted headline word, buttons, icons, stat panels |
| Dark ground | **Navy** | `#0B1A3F` | Dark posts, photo scrims, footer bars |
| Light ground | **White** | `#FFFFFF` | Light posts, logo pill on dark |
| Signal | **Red** | `#E3262F` | One element per post: a badge, a boxed word, an offer price |
| Red on dark | **Coral** | `#FF4D57` | The red highlight on Navy |
| Blue on dark | **Sky** | `#7EA2FF` | Highlighted word, numbers and icons on Navy |
| Panel | **Ice** | `#EEF2FF` | Cards and soft panels on light posts |
| Panel on dark | Deep navy | `#16264F` | Cards on dark posts |
| Text | Ink / Slate | `#0F172A` / `#475569` | Headlines, body / captions on light |
| Text on dark | White / Mist | `#FFFFFF` / `#CBD5E1` | Headlines, body / captions on dark |

**Balance:** about 60% ground (White or Navy), 30% Cobalt, 10% or less Red. If red appears in more than one spot, it stops standing out.

**Never:** purple or rainbow gradients (competitors own that look), pure black `#000`, red text on Navy, more than one red element.

### Contrast (all pass WCAG AA)

| Text | Background | Ratio |
|---|---|---|
| Ink `#0F172A` | White | 17.9 : 1 |
| Ink | Ice `#EEF2FF` | 16.0 : 1 |
| Slate `#475569` | White / Ice | 7.6 / 6.8 : 1 |
| Cobalt `#1D3FD6` | White / Ice | 7.7 / 6.9 : 1 |
| White | Cobalt | 7.7 : 1 |
| White | Navy | 17.0 : 1 |
| White | Red `#E3262F` | 4.6 : 1 |
| Red `#E3262F` | White | 4.6 : 1 |
| Coral `#FF4D57` | Navy | 5.2 : 1 |
| Sky `#7EA2FF` | Navy / Deep navy | 6.9 / 6.0 : 1 |
| Mist `#CBD5E1` | Navy / Deep navy | 11.5 / 9.9 : 1 |
| ✗ Red `#E3262F` | Navy | 3.7 : 1, large text only. Use Coral instead. |

## Typography

| Level | Class | Font | Size @1080 | Weight / style |
|---|---|---|---|---|
| Headline | `.pm-h1` | Heading font | 66–112px | Brand preset: Anton, caps, leading 0.98. System preset: Arial Black / system bold, sentence case, leading 1.04 |
| Subhead | `.pm-h2` | Heading font | 52–58px | as above |
| Big number | stat, price, step | Heading font | 150–290px | Tight tracking (-0.03em) |
| Eyebrow | `.pm-eyebrow` | Body font | 22px | 800, caps, +0.12em tracking, Cobalt / Sky |
| Body | `.pm-body` | Body font | 30px | 500, line-height 1.4, Slate / Mist |
| CTA | `.pm-cta` | Body font | 28px | 800 |
| Small / source | `.pm-small` | Body font | 22px | 600 |

- **One highlighted phrase** per headline (`<span class="pm-hl">`), usually the outcome: "*ready today*", "*online booking*".
- For urgent or sale posts you can use the red marker box (`<span class="pm-mark">`) instead, but never both in the same headline.
- Headline ≤ 9 words, ≤ 3 lines. Body ≤ 22 words, ≤ 3 lines.
- Bisaya/Taglish hooks are encouraged. Keep the details (prices, dates, steps) in clear English or Taglish.
- Use non-breaking hyphens (`‑`) in words that shouldn't split across lines, such as "pag‑work" and "back‑and‑forth".

## Spacing

- Safe margins: 10% of the canvas on each side (13% top and bottom on Stories).
- Spacing scale in canvas units: **8 · 14 · 22 · 30 · 40 · 56**.
  - 14–22 between related items (list rows, chips)
  - 26–30 between text blocks (eyebrow → headline → body → CTA)
  - 40+ between groups (header ↔ content ↔ footer)
- Corner radius: 28 for cards and images, 16 for small cards, full pill for buttons and badges.
- Align everything to the left edge of the safe area. Centre only in the overlay's *Centered* layout.

## Buttons and CTAs

- **One CTA per post.** Pill-shaped, with a chevron.
- Light posts: Cobalt button, white text. Dark posts and photos: white button, Navy text.
- Wording: **verb + outcome**, 2–4 words: "Get your booking page", "Claim your slot", "Set a reminder", "RSVP via Messenger". Avoid "Click here" and "Learn more".
- Pair the CTA with the URL `savrpass.com` (plain text, bold) unless space is tight.
- The CTA sits at the end of the reading order, after the proof.

## Logo

- Top-left inside the safe area by default. The two-column template puts it at the bottom of the text column. The overlay's *Top* layout puts it bottom-left.
- Height: 46px at 1080 (34px small, 60px large). Never smaller than 30px on export.
- On Navy, Cobalt or photos the logo always sits on a **white pill**. That happens automatically on dark themes and on the overlay template.
- Never recolour, stretch, outline, add shadows to, or crop the logo. Keep clear space at least the height of the star mark.

## Image treatment

- Real photos of real Cebu businesses beat stock photos. Natural light, people at work, hands mid-service.
- Photos get a **Navy scrim**, never black or purple: a bottom-up gradient behind the text, 0.85–0.94 opacity in the text zone.
- Keep text off faces. Move the photo with `--img-pos` or switch the text position.
- Screenshots go in rounded frames (28 radius) with a hairline border. Never skew them or fake a device you don't have.
- No photo? Use the stat panel, the built-in phone mock, or a text-only layout. Never post the placeholder.

## Persona (company avatar)

- One avatar, set once in `brand.css` (`--persona-image`). It's the SavrPass mark until the mascot is final.
- The avatar always sits in a white circle with a Cobalt ring, so it reads on every background.
- Voice: a helpful local friend. Short sentences, Bisaya/Taglish hooks, no hard sell. The CTA lives under the card, not inside the post text.
- Never imitate a real platform's UI exactly: no verified ticks, fake reaction counts or real app chrome.

## Layout families

| Family | When | Templates |
|---|---|---|
| Solid colour | Most posts; fastest to make | all |
| Photo background (flat scrim) | Any template when you have a good photo | 12 templates via Background → Photo |
| Photo + gradient scrim / floating card | The photo is the hero | Image overlay |
| Two-row split | Keep the photo clean, text in its own band | Horizontal split |
| Two-column | Words and a visual side by side | Two-column grid |
| Persona | The brand speaks | Persona post |

## Accessibility rules

1. Every text/background pair comes from the contrast table above.
2. Minimum 24px headline and 16px body at 1080 width. The templates start far above this.
3. Colour is never the only signal (highlight + weight/size; red badge + text).
4. Critical content stays inside the safe area.
5. Photos carry alt text in the HTML. When posting, add alt text in Facebook/Instagram.
6. Put the post's key text in the caption too, so screen readers and search pick it up.

## Do's and don'ts

| Do | Don't |
|---|---|
| Lead with the merchant's problem ("Nag-reply pa gihapon sa 11PM?") | Lead with a feature list |
| One message, one highlight, one CTA | Stack three offers in one post |
| Use real numbers with a source | Invent statistics or testimonials |
| Keep the same logo spot, colours and button style across posts | Restyle every post from scratch |
| Use Navy scrims on photos | Use black overlays or purple gradients |
| Show the real price, or none | Write "affordable" with no number |
| Use templates as a system and vary photos and hooks | Copy a competitor's layout or wording |