# Marketing

Marketing uses the same tokens, but turns the brand up: bigger type, the spectrum in blocks, live maps instead of screenshots.

## Website (visualli.ai)
- Hero: `eyebrow` kicker ("BUILT FOR SPATIAL MINDS"), a 72px `ui` 700 headline with exactly one `Signature` word, a 20px lede in `ink-muted` whose key verbs (at most three — "store, map and interact") are hand-set in `hand` at 1.15em in `ink`, without a swash, one primary (*Join early access*) and one ghost CTA, then a **live `VisualMap`** in a `radius-xl` frame with a Caveat `annotation` and a hand-drawn arrow that ends at a ringed node.
- Sections breathe at `space-9`; headlines 40px `ui` 700, sentence case, period at the end.
- How it works = three mini nodes with growing ring counts (0, 1, 2) — the rings teach the product.
- The closing band is `root-ink` with a `SpectrumBar` across its top edge. This replaces the blue→pink gradient pill: the CTA there is a white pill on root-ink.
- Light and dark are both first-class; the page follows the visitor's system setting.
- Responsive at three widths, no horizontal scroll at any width:
  | Width | Layout |
  | --- | --- |
  | > 1024px (desktop) | As above. The annotation's hand-drawn arrow shows only above 1180px, where it lands exactly on a ringed node. |
  | ≤ 1024px (tablet) | Side gutters `space-6`; the open-standard / co-creation pair stacks; steps stay three across while there is room (min 190px each). Below 1180px the annotation becomes a centered caption above the map. |
  | ≤ 760px | Nav links fold into a menu button; *Join early access* stays visible. |
  | ≤ 640px (phone) | Gutters `space-4`; hero CTAs stack full-width; steps become rows (mini node left, text right); the map frame is 400px tall; closing band and footer tighten. |
  Headline, lede and section heads scale fluidly with `clamp()` (headline 36 → 72px) rather than jumping at breakpoints.

## Email (release letters)
- 600px table layout, light theme values written literally (mail clients ignore CSS variables): `#f6f3ee` ground, `#ffffff` sheet, `#182140` ink, `#4f5671` muted.
- Top: a 6px spectrum stripe of seven cells. Then the wordmark (24px tall), an `eyebrow` ("RELEASE NOTES · OCTOBER 2026"), a 34px headline with one hand-set word, a two-sentence lede.
- One visual (pastel blob nodes, or a PNG export of a real map), then up to three items, each marked with a topic dot, then one pill button and an optional Caveat aside.
- Fonts fall back to Helvetica/Arial and cursive; the copy must still work in those.

## Social posts
| Format | Size | Pattern |
| --- | --- | --- |
| Stat / quote | 1080 × 1080 | Eyebrow, one huge number in `ui` 700, one line, a Caveat aside, one ringed node, wordmark bottom-left |
| Announcement | 1200 × 675 | Text half + live map half |
| Carousel cover | 1080 × 1350 | Spectrum stripe, eyebrow, 96px title, a cluster of nodes, "swipe →" in Caveat |
One idea per post, one hand-set word or annotation at most, no gradients.

## Pitch deck (16:9)
- Title slide on `root-ink` with the spectrum stripe and the tree mark on a white disc; content slides on `surface`; the closer on `topic-sun`.
- Big numbers in `ui` 700 at 120px+; Caveat only for citations and asides ("Ebbinghaus, 1885").
- Diagrams are drawn with `Node` and `Edge`, never with clip-art or stock icons.
- House phrases: "From 100 hours → one A3.", "Bring anything.", "Create lasting learners.", "Hop on."