# Design

Visual system for the NoonFox marketing site. Grounded in the mature exploration versions
(v4–v6) and the app's own onboarding palette (`FindIT2/OnboardingStyle.swift`). The rule that
governs everything: **the site wears the app's exact tokens** so the marketing surface and the
first app screen read as one object.

## Theme

Warm, editorial-but-modern, high-contrast. Light porcelain base with one committed safety-orange
accent and a deep warm-ink for type and dark worlds. Not glassy, not cardy, not "SaaS cream +
slate." The three-token discipline is the identity: adding a fourth hue is off-brand.

Art direction is **per-section-world**: the page moves through three surfaces —
cream (WHERE) → safety-orange drench (WHO) → ink dark (WHEN) — telling the "memory for your home"
story by color alone. Consistency of *voice* over consistency of *treatment*.

## Color

OKLCH-thinking, shipped as hex to match the app tokens exactly.

| Token | Hex | Role |
| --- | --- | --- |
| `--cream` | `#FFFCF7` | Page background (porcelain). The app's own. |
| `--cream-2` | `#F7F1E7` | Alternate section surface, panels. |
| `--ink` | `#241B14` | Primary text; the "WHEN" dark world; logo tile. The app's true ink. |
| `--ink-2` | `#57493D` | Secondary/body-muted text (passes AA on cream). |
| `--orange` | `#FF6F00` | Safety orange — the signature. Drench surface, CTAs, numerals, tags, arrows. |
| `--orange-hot` | `#E86300` | Orange CTA hover. |
| `--good` | `#2E7D5B` | Success ticks only. |
| `--dusk-ink` | `#C9BBAB` | Muted text on the ink-dark world. |

**Contrast law (non-negotiable, learned here):**
- Ink on `#FF6F00` ≈ 6:1 → **pass**. White on `#FF6F00` ≈ 2.8:1 → **fail**. Orange-drench
  sections use **ink** text, never white.
- Small orange text on cream ≈ 2.7:1 → **fail**. Orange is used only at large/bold display scale
  (≥ ~24px bold, where 3:1 large-text holds); ink/ink-2 carries all fine print. For a rare
  orange accent word at hero display scale, deepen to `#C25400`.

Color strategy: **Committed** — one saturated color carries a full section plus all primary
actions; not a 5%-accent restraint page.

## Typography

- **Display:** `Space Grotesk` (600) — the geometric, slightly mechanical grotesk used for
  headings, numerals, kickers, price. Committed weight/size contrast does the work.
- **Body:** `Inter` (400–700).
- **Note / open question:** the shared tracker `assets/style.css` describes the intended display
  face as `Fraunces` (a warm editorial serif — "field guide to a small fox" voice), but the mature
  versions (v4–v6) committed to `Space Grotesk`. This is an unresolved brand-font fork worth a
  deliberate decision in a future version; both Fraunces and Space Grotesk are on impeccable's
  reflex-reject list, so identity-preservation (what's already shipping) currently wins.
- Headings: `letter-spacing:-.025em`, `line-height:1.02`, `text-wrap:balance`. Body:
  `text-wrap:pretty`, line-length capped ~52–68ch.
- Fluid scale via `clamp()`: hero H1 up to `5.6rem`; section H2 up to `3.6rem`; giant section
  numerals up to `8.5rem`; price display up to `7.5rem`. Display letter-spacing floor respected
  (≥ -0.03em).

## Layout

- Container `--maxw:1140px`, `.wrap` padding `0 24px` (18px on mobile).
- Fluid section rhythm via `clamp()`; generous separations, tight groupings — varied, not uniform.
- Hero: two-column grid (copy | phone stage) collapsing to one column < 940px.
- The "loop" (snap→recognized→found): horizontal flex of three phone `.step`s joined by orange
  `→` arrows; arrows rotate 90° and the row stacks < 720px.
- "Everything else" is an **editorial ledger** (`<dl>`, two CSS columns, hairline rows) — never a
  card grid (cards are banned as "the lazy answer").
- No side-stripe borders, no `1px border + wide box-shadow` ghost-cards, no gradient text.

## Components

- **Buttons:** single language — solid fill, `border-radius:12px`, no ghost-card border+shadow.
  Primary = orange fill + ink text (700). Default = ink fill + cream text. Hover lifts `-2px`;
  visible `:focus-visible` outline.
- **Phone frame:** `#0c0a09` body, ~44px radius, notch pseudo-element, soft long shadow; image
  `aspect-ratio:369/800`, `object-position:top center`.
- **Recognition chips:** ink pill, cream text, orange `✓`; float around the hero phone and stagger
  in. Product-true (name the actual detected items).
- **Price stamp:** big display number with a rotated orange "locked forever" pill (ink text).
- **FAQ:** native `<details>`, `+`/`–` marker (ink), hairline separators.
- **Rationale layer (`assets/anno.*`):** the internal-only ⓘ pins + banner + master toggle. This
  layer is STRIPPED before anything ships to live noonfox.com — it exists only on the exploration
  site.

## Motion

Restrained, purposeful, exponential ease (`cubic-bezier(.16,1,.3,1)`). No bounce/elastic.
- **Hero load choreography:** one orchestrated moment — headline rises, lede/rotator/CTA stagger,
  phone settles, recognition chips pop in.
- **Hero rotator:** the "what are you always losing?" line cross-fades through real questions
  (opacity only, never layout).
- **Loop reveal:** scroll-triggered stagger via IntersectionObserver, enhancing an already-visible
  default, with a `setTimeout` safety net so it never ships blank if the observer misfires.
- **Reduced motion:** every animation has a `prefers-reduced-motion` off-path; content is always
  visible without JS.

## Assets

Real in-app screenshots in `assets/shots/`: `image_detail.jpg` (hero), `detected_items.jpg`,
`item_detail.jpg`, `search.jpg`, `timeline_items.jpg`, `timeline_real.jpg`, `timeline.jpg`.
Replace with short screen-recording loops before public launch. Fox mark is the 🦊 emoji on an
**ink tile** (v6 fix — was orange-on-orange, low contrast).

## Deploy & guardrails

- Every change = a **new `vN.html`** + a new tracker row on top of `website/index.html`. Never
  overwrite an old version; keep the ⓘ rationale pins.
- Deploy ONLY to the exploration Vercel site (`noonfox-marketing.vercel.app`). **Never** to live
  `noonfox.com` until the user explicitly says "ship it."
- Verify mobile on the **iPhone simulator** — desktop Chrome screenshots clamp at ~500px width and
  can't be trusted for phone layout.
- Pricing copy is locked: **$3.95/mo per person, unconditional forever price**, Bear-style "fair
  price so we keep building" framing. Apple Family Sharing is OFF (AI cost handled per-user).