# Opal's site: design brief

Opal is the MemberPress.ai assistant. The site is her own portfolio, and it speaks in her voice,
in the first person, throughout. Read [persona/opal.md](persona/opal.md) and
[docs/MESSAGING.md](docs/MESSAGING.md) before writing a line of copy.

## Type

All three fonts are on Google Fonts. The first two are what the Horizon film already uses, so the site and
the film match.

| Role | Font | Use |
|---|---|---|
| Display | **Michroma** (400) | Headings and the hero name: a wide, bold display face. Set it large, with tight leading (1.05) and slight negative tracking (-0.01em). |
| Body | **Sora** (400, 600) | Body copy, buttons, nav, chips. |
| Script | **Caveat** (600) | Only the one hand-lettered line above the hero heading. Nowhere else. |

```html
<link href="https://fonts.googleapis.com/css2?family=Caveat:wght@600&family=Michroma&family=Sora:wght@400;600&display=swap" rel="stylesheet">
```

### Type scale (rem, at a 16px root)

| Token | Desktop | Phone (390px) | Font |
|---|---|---|---|
| `--fs-hero` | 4.5 | 2.5 | Michroma |
| `--fs-h2` | 2.5 | 1.75 | Michroma |
| `--fs-h3` | 1.5 | 1.25 | Michroma |
| `--fs-script` | 2 | 1.5 | Caveat |
| `--fs-lead` | 1.25 | 1.125 | Sora |
| `--fs-body` | 1 | 1 | Sora, line height 1.6 |
| `--fs-small` | 0.875 | 0.875 | Sora |

## Colour

`--night-0`, `--night-1`, the opal hues, the glow and the neutrals are exact hex values from the Horizon film
(`video/horizon-34s.mp4`). `--night-2`, `--night-3` and `--ink` were picked to sit between them. Use one accent only.

```css
:root {
  /* night (the backgrounds) */
  --night-0: #04050A;   /* deepest, the film's black */
  --night-1: #060A15;   /* page background */
  --night-2: #0E1430;   /* navy */
  --night-3: #1B1A4A;   /* indigo, where the hero gradient ends */
  /* Opal's accent: the opal teal-violet. The gradient is for big surfaces only. */
  --opal: #8FF3E0;          /* teal: links, focus rings, the primary button */
  --opal-violet: #A9B8FF;   /* violet: the second gradient stop, the orb's rim */
  --opal-grad: linear-gradient(135deg, #8FF3E0 0%, #A9B8FF 55%, #F5B8E8 100%);
  /* warm light: the planet glow and the orb core. Never used as text. */
  --glow: #FFC968;
  /* neutrals */
  --ink: #0B1020;       /* text on the white card */
  --mist: #D3DBEC;      /* secondary text on night */
  --cloud: #EEF1F7;     /* primary text on night */
  --white: #FFFFFF;
}
```

- **Contrast:** `--cloud` on `--night-1` and `--ink` on white both pass AA. `--opal` is for text on
  the night background only, never on white.
- **Hero background:** a radial gradient from `--night-3` at the top right to `--night-1`, with a soft
  `--glow` planet arc bleeding in from one edge at about 25% opacity.

## Shapes and buttons

- **Radii:** buttons are pills (`999px`), cards `24px`, tiles `16px`, and Opal's badge a full circle.
- **Primary button:** an `--opal` fill, `--ink` text in Sora 600, 56px tall, 28px padding either side,
  with a gentle lift on hover (translate -2px, plus a soft `--opal` glow shadow).
- **Secondary button:** a 1.5px `--cloud` outline, `--cloud` text, a transparent fill.
- **Chips:** a translucent white fill (`rgba(255,255,255,.08)`) with a blurred backdrop, a 1px
  `rgba(255,255,255,.16)` border, small Sora text.
- **Focus:** always visible, a 3px `--opal` ring with a 2px offset.

## Hero layout

A two-column hero, set in Opal's night sky.

**Left column, top to bottom:**
1. The script line, in Caveat: *"You say it once. I handle the rest."*
2. The display heading: **Hi, I'm Opal**
3. Two plain lines on what she does for a membership site. You talk to her and she runs the site,
   and she speaks up when revenue or churn needs a look.
4. Two buttons: **Watch my intro** (primary; opens `video/horizon-34s.mp4` in a lightbox) and
   **Try me on MemberPress.ai** (secondary; links to https://memberpress.ai).
5. A trust row of true facts only: "Works inside your WordPress site" · "Built by the MemberPress team".

**Right column:** Opal (`characters/opal/opal-ref.png` or `characters/opal/poses/presenting-full.png`) in a
big circular badge. Her glowing orb sits behind her:
a soft `--opal-grad` sphere with a `--glow` core. One floating chip overlaps the badge's
edge: "I answer in seconds, day or night".

**Under the hero:** a floating white card (24px radius, a soft shadow, overlapping the hero's
bottom edge by about 64px), headed **What can I help you with?**, with four dark tiles in
`--night-2`, each with an arrow:
- Build a membership
- Write a course
- Fix what's broken
- Meet the Pips

**At 390px:** one column. The badge goes above the heading at about 70% width, the buttons are
full width and stacked, and the tiles sit in a 2×2 grid. There's no horizontal scroll at any
width.

## Pages

Home · Meet Opal · The Pips · Work (her videos and posts) · Press kit (this folder, as a
download) · plus a link out to memberpress.ai.

## Do

- Write in the first person, as Opal, warm and short. Her standing line is "You say it once. I handle
  the rest."
- Write MemberPress.ai with a capital M and P, every time.
- Frame the owner's problem as their time and the kit-car nature of a custom WordPress build
  (MESSAGING.md).
- Use only real characters, real videos and real facts. Pip never speaks: he's a silent
  reaction character, so he only stamps and celebrates.

## Don't

- No AI badge or disclaimer on the site.
- No invented numbers: no user counts, ratings, "X% faster" or testimonials.
- Don't cast MemberPress as the villain or the cause of a problem.
- Don't promise an approval step ("nothing goes live until you approve it" is retired), and
  don't promise prices, dates, refunds or features.
- Don't use a second accent colour, and don't use Caveat beyond the one script line.
- Don't put Opal on screen full body as if she were floating. The poses are cut for layering;
  ground her in the badge or crop her at the waist.