# JetAds Brand Guidelines (machine-readable)

Version: Brand V2. This file is the complete brand specification. Follow it literally.

## 0. Hard constraints

- Every section is a rounded panel sitting on the page with breathing room around it. Each panel takes one of two field themes — mist or ink — and the CTA colour is decided by the field, not by the page. Gradients are used deliberately: the two field gradients and the button gradients. No glows, no washes behind text, no drop shadows except on the sticky header and on white cards lifting off the mist field.
- Brand Blue (#1A8CFF) is the identity colour: the logo and the brightest accent.
- The site is built from rounded section panels in exactly two field themes — mist (#F4F4F5) and ink (#0C2247 to #071630 to #030711). Sections alternate light, dark, light. Never two dark panels in a row, never a third theme, and never a lighter variant of the ink gradient.
- The primary CTA is a gradient pill and its colour is decided by the field it sits on: Jet Blue on mist, the spectrum purple-pink gradient on ink. The header CTA reads "Book a call" with a right arrow; in-page primary CTAs read "Book a discovery call". One primary button per panel; section links are buttons, not underlined text.
- Text on the spectrum CTA is ALWAYS white.
- The hero headline carries one variable word (leads / calls / sales / ROAS) that cycles every few seconds, set in the spectrum gradient. That is the only place the spectrum is used as type.
- Magenta (#E31B63) belongs to the /performance funnel only and never appears on the main site.
- Headlines and button labels are sentence case. Proper nouns keep their capitals: JetAds, Meta, Google, AI.
- Never promise a ROAS figure or a specific multiple. We promise improvement on a recorded baseline.

## 1. Colour

### Core
Two fields carry the whole site: neutral light grey for reading, and the blue-black ink gradient for the hero, the heavier sections and the footer. Nothing else is a field.

- #1A8CFF `--v2-brand-blue` (Brand Blue) — The logo colour and the brightest identity blue.
- #1076EA `--v2-navy` (Jet Blue) — Primary blue for accents and icon tiles on light surfaces.
- #2F9DFF `--v2-navy-hi` (Jet Blue light) — The lighter end of every blue gradient.
- #0C2247 `--v2-ink-blue` (Ink blue) — Top of the dark field: the blue-black start of every ink panel.
- #030711 `--v2-ink-deep` (Ink black) — Bottom of the dark field. Every ink panel fades to near black.
- #F4F4F5 `--v2-mist` (Mist) — The neutral light field. Pure grey, no blue tint.
- #FFFFFF `--v2-paper` (Paper) — Cards on the mist field, and the page behind the panels.

### Action
The CTA is a gradient and its colour is decided by the field it sits on. One button style, two field variants: Jet Blue on mist, spectrum purple-pink on ink.

- #1076EA `--v2-grad-action` (Action on mist) — Jet Blue gradient (#1076EA to #2F9DFF), white label. The default CTA.
- #8B5CF6 `--v2-grad-spectrum` (Action on ink) — Spectrum gradient (#4F7CF7 to #8B5CF6 to #EC4899) with a white label, on dark fields only.
- #EC4899 `--v2-pink` (Pink) — The pink end of the spectrum gradient.
- #F472B6 `--v2-pink-hi` (Pink light) — The lift colour inside the dark field.

### Surfaces
Every section is a rounded panel. Cards inside stay pure white on light fields, translucent white on dark ones.

- #E3E3E6 `--v2-mist-rule` (Mist rule) — Hairlines and panel borders on the mist field.
- #060B13 `--v2-ink-deep` (Ink deep) — The bottom of the ink gradient.
- #071630 `--v2-ink-mid` (Ink mid) — The middle stop of the ink gradient, at 42%.
- #FFFFFF `--v2-paper-on-dark` (Card on dark) — Cards on ink and blue are white at 6-9% opacity with a 16% white hairline.

### Data and measurement
Numbers and proof. None of these is ever a button.

- #1076EA `--v2-navy` (Lift on mist) — Counting numbers, icon glyphs and up-arrows on the light field.
- #F472B6 `--v2-pink-hi` (Lift on ink) — The lift colour inside the dark field.
- #16A34A `--v2-green` (Growth Green) — Compounding and scaled winners in diagrams.
- #7C8794 `--v2-baseline` (Baseline grey) — Baseline figures, labels and muted metadata.
- #C0392B `--v2-flag` (Flag) — Disqualifiers and exclusions only.

### Accents
Used inside diagrams and stamps, never as a field and never as a button.

- #F5A524 `--v2-gold` (Signal Gold) — Guarantee and risk-reversal emphasis.
- #6C4BF6 `--v2-violet` (Violet) — The Google path in tracking diagrams.
- #E31B63 `--v2-magenta` (Magenta) — Reserved for the /performance funnel only. Never on the main site.

### Text
Three weights per field. Muted never goes below 13px.

- #0B1220 `--v2-text-head` (Headline on light) — Headlines on mist and white.
- #3E4651 `--v2-text-body` (Body on light) — Body copy on mist and white.
- #6B7280 `--v2-text-muted` (Muted on light) — Metadata on light. 13px minimum.
- #FFFFFF `--v2-text-head-ink` (Headline on dark) — Headlines on ink and blue.
- #B8C0CB `--v2-text-body-ink` (Body on dark) — Body copy on ink and blue.
- #9AA5B4 `--v2-text-muted-ink` (Muted on dark) — Metadata on dark fields. 13px minimum.

### Field themes

- Mist — field: Flat grey gradient #FBFBFB to #F4F4F5, pure white cards, #E3E3E6 hairlines. CTA: Jet Blue gradient with a white label. Used for: Hero, what actually works, proof, team, FAQ — the calm reading sections.
- Ink — field: Blue-black gradient #0C2247 to #071630 at 42% to #030711, translucent white cards, white headlines, #9AA5B4 body. No border, no glow — identical on every dark panel including the footer. CTA: Spectrum gradient (blue to purple to pink) with a white label. Used for: The hero, the problem section, how it works, how we use AI, the client quotes and the footer block.

### The signature field gradient

`--v2-grad-ink: linear-gradient(180deg, #0C2247 0%, #071630 42%, #030711 100%)`

The signature field gradient: blue-black at the top, fading to near black at the bottom, running straight down. Every dark panel and the footer use exactly this — no lighter variant, no glow wash, no border. Use it full-panel only: never on a button, never on a card, never on a light field.

### Never

- The spectrum gradient used anywhere other than a CTA on the ink field or the hero's variable word.
- Magenta on the main site — it belongs to the /performance funnel.
- The ink field gradient on a button, on a card, or on a light surface.
- A third field theme. Two only: mist and ink.
- A lighter or bluer variant of the ink gradient on one panel. Every dark panel is identical.
- Two dark panels in a row. Sections alternate light, dark, light.
- Title Case headlines or button labels.

### CSS custom properties

```css
:root {
  /* Core — two fields carry the site */
  --v2-brand-blue: #1A8CFF;
  --v2-navy: #1076EA;
  --v2-navy-hi: #2F9DFF;
  --v2-ink: #0C2247;
  --v2-ink-mid: #071630;
  --v2-ink-deep: #030711;
  --v2-mist: #F4F4F5;
  --v2-mist-rule: #E3E3E6;
  --v2-paper: #FFFFFF;

  /* Field gradients */
  --v2-grad-mist: linear-gradient(180deg, #FBFBFB, #F4F4F5);
  --v2-grad-ink: linear-gradient(180deg, #0C2247 0%, #071630 42%, #030711 100%);

  /* Action — the gradient is chosen by the field */
  --v2-grad-action: linear-gradient(100deg, #1076EA, #2F9DFF); /* on mist */
  --v2-grad-action-ink: linear-gradient(100deg, #4F7CF7 0%, #8B5CF6 42%, #EC4899 100%); /* on ink */
  --v2-on-action: #FFFFFF;
  --v2-purple: #8B5CF6;
  --v2-pink: #EC4899;
  --v2-pink-hi: #F472B6;
  --v2-grad-spectrum: linear-gradient(100deg, #4F7CF7 0%, #8B5CF6 42%, #EC4899 100%);

  /* Data and measurement — never a CTA */
  --v2-green: #16A34A;
  --v2-gold: #F5A524;
  --v2-violet: #6C4BF6;
  --v2-baseline: #7C8794;
  --v2-flag: #C0392B;

  /* Reserved for the /performance funnel only */
  --v2-magenta: #E31B63;

  /* Text */
  --v2-text-head: #0B1220;
  --v2-text-body: #3E4651;
  --v2-text-muted: #6B7280;
  --v2-text-head-ink: #FFFFFF;
  --v2-text-body-ink: #B8C0CB;
  --v2-text-muted-ink: #9AA5B4;

  /* Type */
  --v2-font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --v2-font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --v2-font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --v2-font-serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;

  /* Radii */
  --v2-radius-pill: 999px;
  --v2-radius-compact: 10px;
  --v2-radius-card: 20px;
  --v2-radius-panel: 32px;
  --v2-radius-panel-lg: 40px;
}
```

## 2. Typography

- Display: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif. Weights 600, 700, 800. Load from https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap
- Body / UI: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif. Body and UI, 15–17px, line-height 1.55.
- Labels and numbers: "IBM Plex Mono", ui-monospace, monospace. Labels and ALL numbers. Tabular nums. Kickers 11–13px, uppercase, 0.14em tracking.
- Editorial serif: "Instrument Serif", "Iowan Old Style", Georgia, serif. Pull quotes, split-header intro lines and section eyebrows. Editorial voice only — never body copy, never buttons.

Rules:
- Headlines and button labels are sentence case. Proper nouns keep their capitals: JetAds, Meta, Google, AI.
- Type scale: hero H1 68px desktop / 34px mobile, section H2 38/26, card titles 18, body 16, small labels 13. Nothing sits between 20 and 38.
- Tight leading on headlines: 1.02–1.1. Letter-spacing -0.025em.
- Emphasis colour follows the field: Jet Blue on mist, spectrum purple-pink on ink.
- Every number is set in mono, tabular, and carries its unit.

## 3. Radii

- 999px — Pill CTAs and badges.
- 10px — Compact buttons and inputs.
- 20px — Cards, tables, framed screenshots.
- 32px — Section panels on mobile, and the footer block.
- 40px — Section panels from 768px up.

## 4. The logo

The JetAds logo is a placed asset, not generated geometry. It is a single lockup file — the paper plane plus the "JetAds" wordmark. Place the file; never draw, rebuild or retype it.

- Source file: `src/assets/jetads-logo.png` — one transparent PNG master.
- Three colourways are generated from that one file (CSS mask on screen, canvas recolour for downloads), so every variant is pixel-identical: Brand Blue (#1A8CFF), White (#FFFFFF), Black (#0B1220).
- Brand Blue on light surfaces is the default lockup. White is for the ink field. Black is single-colour print and partner placements only.
- All three are generated from one transparent PNG master. An outlined SVG master is still needed before this goes to print or to an outside designer.

Rules:
- Brand Blue (#1A8CFF) on light surfaces is the default. Use it unless the surface makes it impossible.
- White is approved on the ink field. Never on a light surface.
- Black is for single-colour print and partner placements that can't take colour. Never the first choice.
- Clearspace is 30% of logo height on all sides.
- Never stretch, rotate, outline, add shadows, gradients or 3D effects, or recolour outside these three tones.
- Never rebuild or retype the wordmark — always place the file.
- The paper plane alone is the site motif: it floats gently up and down between sections and rides the scroll rail. It is never stamped repeatedly across a section as a pattern.
- When the plane is isolated from the lockup, crop the full glyph (x 0-194, y 21-119 of the 634x120 master). Never clip a wing or the tail.

## 5. Buttons and UI

- Primary on mist: Jet Blue gradient (#1076EA to #2F9DFF), white sentence-case label, 999px radius.
- Primary on ink: Spectrum gradient (#4F7CF7 to #8B5CF6 to #EC4899), white label, 999px radius.
- Outline: 1px field hairline, current text colour, transparent fill. The secondary action only.
- Compact: 10px radius, 11px mono label, used inside cards and tables.
- Hover: The gradient reverses direction and the button lifts 2px. Never change hue on hover.
- Rule: Section links are real buttons, not underlined text. One primary button per panel.
- Labels: The header CTA reads "Book a call" with a right arrow. Every in-page primary CTA reads "Book a discovery call". Never "Get started".

## 6. Ad creative spec

Frames:
- 1:1 — Feed and carousel. Safe zone: Keep text inside the middle 80%.
- 4:5 — Primary feed placement. Safe zone: Keep text inside the middle 80%, extra room at the bottom.
- 9:16 — Reels and Stories. Safe zone: Top 14% and bottom 20% are unsafe — UI sits there.

Rules:
- Hook text is always Plus Jakarta Sans 800, sentence case, maximum 2 lines.
- Never set hook text over a busy area of the image. Move it or add a flat ink panel behind it.
- The logo sits bottom-left at 6% of frame width with 4% clearspace, placed from the file.
- Proof screenshots are framed on a bone card with a 1px --v2-rule border. Never drop a raw screenshot onto the creative.
- The end frame is always the ink field with the guarantee line and one spectrum CTA pill.
- Panels and framed proof use 20px radius inside creative, matching the site cards.

## 7. Voice

- Plain, blunt, specific. Short sentences. Lead with the number, not the adjective.
- Sentence case headlines, ending in a full stop. Never Title Case.
- Canadian English: -ize endings (optimize, not optimise). -our endings (behaviour, colour).
- Every number is set in mono and always carries its unit.
- Say what we don't do. The anti-agency honesty is the voice.
- Never promise a ROAS figure or a specific multiple. We promise improvement on a recorded baseline, which is the only claim we can stand behind.

Banned words and phrases: leverage, unlock, seamless, game-changing, supercharge, crush it, 10x, secret sauce, revolutionary, we're passionate about, in today's fast-paced world.

Do / don't:
- DON'T: "Unlock Game-Changing Growth With Our Revolutionary Ad System"
  DO: "We write down your number. Then we beat it."
- DON'T: "Supercharge your ROAS with our secret sauce."
  DO: "Same ad spend. 34 more sales in 30 days."
- DON'T: "We're passionate about seamless, 10x performance marketing."
  DO: "We don't do branding, SEO, or social posting. We buy ads."
- DON'T: "Achieve a guaranteed 5x ROAS."
  DO: "We record your starting point and improve on it, or you don't pay."

## 8. Worked patterns

- Section panel (the base pattern): 32px radius on mobile, 40px from 768px up, 56px/24px padding growing to 88px/48px, a 1px field hairline, and one field theme applied to the whole panel.
- Stats band: a slim blue panel directly under the client logos, three mono numerals counting up with 13px labels beneath, and one white gradient CTA.
- Split section header: a 1.1fr/0.9fr grid — pill eyebrow and H2 on the left, the intro line set in Instrument Serif on the right. Used to break the centred rhythm.
- Card on a light field: pure white, 20px radius, 1px #E3E3E6 hairline, a soft shadow so it lifts off the mist. On hover it rises 2px and the hairline takes the field lift colour.
- Card on a dark field: white at 6–9% opacity with a 16% white hairline. Never solid white on ink, except the stats window, which is a deliberate white browser-style panel.
- Quotes: client quotes set in Instrument Serif on the ink field, never as a wall of identical grey cards.
- The plane motif: the paper plane floats between sections and rides a thin scroll rail at the right edge on wide screens. Nothing else uses the plane as decoration.