# Amie — Marketing site Design Spec

> Source: amie.so (live DOM, computed styles), 2026-07-25. 0 stylesheets blocked;
> 184 :root vars, mostly Tailwind scaffolding, so §2 is read from computed
> fills/text. The `.grsf-*` hover/shadow rules belong to an embedded GrowSurf
> referral widget, not the brand — excluded.
> **Screenshot could not be captured**: `computer` screenshot injection timed out
> repeatedly (5s) because the page runs continuous animation that saturates the
> main thread. JS extraction succeeded, so all values below are live-DOM reads;
> only the visual side-by-side is missing. That busy main thread is itself a
> finding — see §7.
> Reality check: **the hint is wrong on the product and on the register.** The
> queue said "joyful calendar — colourful, bold, emoji-forward". Amie has
> **repositioned as an AI note taker** (title: "Amie - AI Note Taker"), and the
> site is a **near-white #fafafa minimal surface** in plain Inter, not bold or
> emoji-forward. Colour survives only as small functional accents. What is
> genuinely playful is the **motion**: a spring-heavy easing library with four
> separate overshoot curves.

## 1. Visual Theme & Atmosphere

Restrained, product-first SaaS. The canvas is near-white, the type is Inter
throughout, and the layout is a quiet frame around app screenshots — the design
gets out of the way of the product. Colour is functional rather than decorative:
a green for recording/success, a blue for the primary action, soft mints and pale
blues on status chips. The playfulness the brand is known for now lives almost
entirely in motion — springy overshoot easings, bouncing pulses and a 70s
scrolling marquee — rather than in colour or type. Feels: clean, quiet,
product-led, springy.

## 2. Color Palette & Roles

| Token | Hex / value | Role / usage |
|---|---|---|
| canvas | #fafafa | THE page background |
| canvas-80 | rgba(250,250,250,.8) | translucent sticky chrome |
| white | #ffffff | cards, panels (13 uses) |
| black | #000000 | primary text (510 uses) |
| ink | #1c1c1c | secondary heading |
| ink-2 | #2e2e2e | 5px border colour |
| grey | #5c5c5c | body copy |
| grey-2 | #737373 | muted fill |
| grey-3 | #838383 | muted text |
| grey-4 | #a0a0a0 | faint text |
| grey-5 | #b2b4b6 | faintest text |
| grey-6 | #b5b5b7 | 2px border |
| border | #cdcdcd | control border |
| surface | #ebebeb | inset fill |
| surface-2 | #f0f0f0 | 1px border |
| green | #01ca45 | recording / live state |
| green-deep | #10a142 | green pressed |
| mint | #ccf4da | success chip fill |
| blue | #11a8ff | THE primary accent |
| blue-light | #41baff | gradient end |
| pale-blue | #cfeeff | gradient start / chip fill |
| periwinkle | #5890e7 | secondary accent |
| amber | #d48f00 | highlighted display word |
| gold-30 | rgba(255,215,0,.3) | highlighter wash |

Rules: chrome is achromatic near-white; every colour is **functional** — green
means recording, blue means act, amber highlights one word of the headline. There
is no decorative colour.

## 3. Typography Rules

**One family: Inter** (with `Inter var` for variable rendering) — no serif, no
mono, no display face. Display runs **56/64 at weight 700** with -0.7px tracking,
and one word is coloured amber #d48f00 rather than styled differently. Body is
16/28 at 400, nav and buttons a compact 14/14 at 500. Tracking is a consistent,
unusual **-0.003px** across most roles — effectively zero but explicitly set.

> Specimen substitution: **Inter is an open Google font**, so previews use the
> real face.

| Role | Family | Size/Line | Weight | Tracking |
|---|---|---|---|---|
| Display (largest) | Inter | 56/64 | 700 | -0.7px |
| Sub-head (h3) | Inter | 20/28 | 600 | -0.003px |
| Body | Inter | 16/28 | 400 | -0.003px |
| Nav | Inter | 14/14 | 500 | -0.003px |
| Button | Inter | 14/14 | 500 | normal |
| Caption | Inter | 13–14 | 400 | -0.003px |

## 4. Component Stylings

Radii cluster tight: **12px** dominant (31 uses), 8px, 9999px pills (21), 4px,
6px, 3px, plus **single-side pairs** `32px 32px 0 0` and `8px 8px 0 0` for
sheets and stacked panels. Nav buttons are a compact **32px** at 8px radius with
`6px 10px` padding. Shadows are soft and led by an **inset-white + drop pair**
(`rgb(255,255,255) 0 0 0 0 inset, rgba(0,0,0,.05) …`) — a subtle top rim-light
recipe. Borders are mostly translucent `rgba(0,0,0,.04)`.

| Component | Rest | Hover | Focus | Active | Disabled |
|---|---|---|---|---|---|
| Nav button | transparent, 8px, 32px, 14/500 | `all 0.3s ease` | not defined on brand chrome | — | not observed |
| Primary | blue #11a8ff fill | `color/background/border 0.15s cubic-bezier(.4,0,.2,1)` | not defined | — | — |
| Card | #ffffff, 12px, 1px rgba(0,0,0,.04) | `transform 0.3s cubic-bezier(.4,0,.2,1)` | not defined | — | — |
| Status chip | mint #ccf4da / pale-blue #cfeeff, 9999px | — | — | — | — |

Focus note: **no focus ring is defined on Amie's own chrome** — the only
hover/shadow state rules recovered belong to the embedded GrowSurf referral
widget. Record as an accessibility gap and supply a ring (e.g.
`0 0 0 3px rgba(17,168,255,.4)`).

## 5. Layout Principles

A translucent `rgba(250,250,250,.8)` sticky top bar with compact 32px nav
buttons. The hero is centred — a 56px Inter headline with one amber-highlighted
word — above large white product panels with 12px radii showing the note-taker
UI. Single-side radii (`32px 32px 0 0`) are used where panels slide up from the
bottom edge like sheets. A 70s marquee runs logos.

## 6. Depth & Elevation

Radius: **12px** dominant, 8px, 9999px pills, 6px, 4px, 3px, and single-side
pairs (`32px 32px 0 0`, `8px 8px 0 0`). Shadows:

- `rgb(255,255,255) 0 0 0 0 inset, rgba(0,0,0,.05) …` — the signature **inset rim-light + drop** pair (9 uses)
- same with `rgba(0,0,0,.1)` — stronger variant (4)
- `rgba(0,0,0,.12) 0 8px 16px` — card lift
- `rgba(0,0,0,.3) 0 20px 30px` — one deep modal shadow
- 13 elements carry a fully transparent placeholder shadow

Borders are unusually varied in weight: 1px `rgba(0,0,0,.04)`, 1px #f0f0f0,
**2px #b5b5b7**, **5px #2e2e2e** and a **16px #000000** — the heavy ones are
device-frame mockups rather than UI. Two backdrop blurs (16px, 8px).

## 7. Motion

| Property | Duration | Easing | Applies to |
|---|---|---|---|
| all | 0.3s | ease | general (dominant, 15x) |
| transform | 0.3s | cubic-bezier(0.4, 0, 0.2, 1) | card and panel movement |
| color, background, border, fill, stroke | 0.15s | cubic-bezier(0.4, 0, 0.2, 1) | chrome |
| opacity | 0.15s | cubic-bezier(0.4, 0, 0.2, 1) | fades |

**This is where the brand's playfulness actually lives.** The easing library is
strikingly spring-heavy — **four separate overshoot curves**:
`cubic-bezier(0, 1.45, 0.41, 1)` (a very strong spring),
`cubic-bezier(0.18, 0.89, 0.32, 1.27)`, `cubic-bezier(0.2, 0.7, 0.64, 1.1)`, plus
`cubic-bezier(0.87, 0, 0.13, 1)`. 16+ `@keyframes` including `scaleBounce`,
`bouncePulseWithPause` (**3s infinite**), `puffInCenter`, `shake`, `ring`,
`pulse`, `spinBoth`, `spinFull`, `backgroundAnimate`, `slideBackground`,
`scrollX` (**70s infinite**), and four-direction `enterFrom*`/`exitTo*` pairs.
No animation library detected — this is hand-written CSS.

**The cost is measurable:** the running animation saturated the main thread badly
enough that screenshot injection timed out at 5s, repeatedly. And there is **no
`prefers-reduced-motion` block** (`reducedMotionBlocks:0`), which for a page with
two infinite animations and a spring library is the most consequential gap in
this capture.

## 8. Backgrounds, Effects & WebGL

Minimal and cool-toned. Two gradients, both blue:
`linear-gradient(to right top, #cfeeff, #41baff)` and
`linear-gradient(to right top, #11a8ff, #41baff)`. Two backdrop blurs (16px,
8px). 2 raster layers. No canvas/WebGL, no video, no grain. The atmosphere is
carried by product screenshots and motion, not by background treatment.

## 9. Do's and Don'ts

### Do
- Keep the canvas near-white #fafafa and reserve #ffffff for panels on top of it.
- Use one family (Inter) at 700 for a 56/64 display and 14/14 for compact chrome.
- Highlight a single display word in amber #d48f00 rather than restyling it.
- Keep colour functional: green = recording, blue = act, mint/pale-blue = status.
- Use 12px radii with single-side pairs (`32px 32px 0 0`) for sheet-style panels.
- Use the inset-white rim-light + drop shadow pair rather than a plain drop.
- Put the personality in motion, using overshoot easings — that is the brand.

### Don't
- Don't read "joyful" as colourful — the surface is near-white and plain.
- Don't add a display face; Inter does everything.
- Don't use colour decoratively.
- Don't ship the spring library without a `prefers-reduced-motion` block — the site's omission measurably degrades the page.
- Don't copy the missing focus ring.

## 10. Responsive Behavior

A clean, entirely **min-width** Tailwind ladder with one bespoke wide step —
the sparsest in this batch:

| Breakpoint | What changes |
|---|---|
| 640px | phone → large-phone |
| 768px | tablet |
| 1024px | desktop |
| 1280px | wide |
| 1536px | 2xl |
| **2000px** | bespoke ultra-wide cap |

No dark-scheme blocks (`darkSchemeBlocks:0`), no container queries, **no
reduced-motion block**.

## 11. Agent Prompt Guide

- Canvas `#fafafa` · Panel `#ffffff` · Ink `#000000` · Body `#5c5c5c` · Border `rgba(0,0,0,.04)` / `#cdcdcd` · Accent `#11a8ff` · Recording `#01ca45` · Highlight word `#d48f00`
- Font: **Inter** (open, real face) · Display 56/64 **700** -0.7px · Body 16/28 · Chrome 14/14 500 · Radius: 12px / 9999px / `32px 32px 0 0` · Control height: 32px nav
- Focus: **none defined** — add `0 0 0 3px rgba(17,168,255,.4)` · Shadow: inset-white rim + `rgba(0,0,0,.05)` drop · Motion: 0.3s ease + **overshoot springs**

<amie_design_language>
Restrained, product-first SaaS — near-white and plain, not the colourful
emoji-forward calendar the name suggests (Amie has repositioned as an AI note
taker). Canvas is #fafafa with #ffffff panels on top and rgba(250,250,250,.8)
translucent sticky chrome; ink is #000000 with #5c5c5c body and a long grey ladder
(#737373, #838383, #a0a0a0, #b2b4b6). ONE family does everything — Inter (open, so
use the real face) — with a 56/64 display at weight 700 and -0.7px tracking, 16/28
body, and compact 14/14 nav at 500, all sharing an oddly explicit -0.003px
tracking. Colour is strictly FUNCTIONAL: green #01ca45 for recording, blue #11a8ff
for the primary action, mint #ccf4da and pale blue #cfeeff on status chips, and a
single amber #d48f00 word inside the headline. Radii cluster at 12px with 9999px
pills and single-side pairs (32px 32px 0 0) for sheet-style panels; the signature
shadow is an inset-white rim-light paired with a soft rgba(0,0,0,.05) drop rather
than a plain drop. Two blue gradients and two backdrop blurs are the only
background treatment. The brand's playfulness lives entirely in MOTION: a
spring-heavy easing library with four overshoot curves — cubic-bezier(0, 1.45,
0.41, 1) is the strongest — across 16+ keyframes including scaleBounce,
bouncePulseWithPause (3s infinite), puffInCenter, shake and a 70s scrollX marquee.
Feels: clean, quiet, product-led, springy. Avoid: reading joyful as colourful,
adding a display face, decorative colour, and shipping the spring library without
a prefers-reduced-motion block (the site omits one and the page visibly suffers).
</amie_design_language>