Restrained, product-first SaaS — near-white and plain rather than the colourful emoji-forward calendar the name still suggests, since Amie has repositioned as an AI note taker. The canvas is #fafafa with #ffffff panels on top and rgba(250,250,250,.8) translucent sticky chrome, and one family does everything: Inter, with a 56/64 display at weight 700 and -0.7px tracking, 16/28 body and compact 14/14 nav, all sharing an oddly explicit -0.003px tracking. Colour is strictly FUNCTIONAL rather than decorative — green #01ca45 means recording, blue #11a8ff means act, mint and pale blue carry status, and a single amber #d48f00 word sits inside the headline under a gold highlighter wash. Radii cluster at 12px with 9999px pills and single-side pairs like 32px 32px 0 0 for sheet-style panels, and the signature shadow is an inset white rim-light paired with a soft drop rather than a plain drop. Its most distinctive quality is that the playfulness has migrated entirely into MOTION: the easing library carries four separate overshoot springs, the strongest being cubic-bezier(0, 1.45, .41, 1), across sixteen-plus keyframes including scaleBounce, bouncePulseWithPause, puffInCenter, shake and a 70s marquee. That comes at a measurable cost — the running animation saturates the main thread — and the site ships no prefers-reduced-motion block.
Browse Amie in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
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:computerscreenshot 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.
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.
| 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.
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 |
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.