What is Amie's primary brand color?

Amie's brand voltage is sky blue, captured at hex value 11a8ff and wired into the CSS as the blue-500 token. It appears just twice above the fold of the marketing page — both occurrences as the background fill of the primary pill CTA labeled Get started. Every other chromatic moment on the page belongs to the product screenshots underneath: mint green event blocks, salmon pink event blocks, sky-blue event blocks, sun-yellow highlights, and lavender meeting cards. The brand chrome itself is held to grayscale Inter typography on a near-white surface — the sky-blue pill is the only chromatic marketing element above the fold.

What typeface does Amie use, and what should I use as a substitute?

Amie runs Inter across every typographic tier of the marketing site — display, heading, body, button, label. Display tops out at 56px in weight 700 with negative letter-spacing for the largest hero moments, 40px in weight 700 for section displays, and 20px in weight 600 for sub-section titles. Body sits at 16px in weight 400 with a 28px line-height for the long-form editorial paragraphs below the fold. Button labels are 14px in weight 500. Since Inter is already open-source and free, no substitution is necessary; the system uses the canonical CDN-hosted Inter family directly with a fallback to the Inter Fallback metric-matched stack.

Why does Amie's screenshot use so many pastel colors when the brand is monochrome?

The pastel hues — mint green, salmon pink, sky blue, sun yellow, lavender — are not brand accents. They are user-assignable event-block colors inside the Amie product, drawn from the broader pastel palette wired into the page CSS as gray, blue, green, pink, yellow, and purple custom-property families. Each calendar event a user creates can be tinted with one of these hues, and the marketing screenshots show the product with a representative sample of every option lit up at once. Outside the screenshots, none of these colors appear in the marketing chrome — the system is monochrome grayscale Inter wherever it is the brand speaking rather than the product.

What is the hand-drawn underline under the Amie headline?

The salmon-pink scribbled arrow looping under the words without a bot in the hero headline is a hand-drawn SVG illustration, not a CSS underline. It is the brand's single playfulness signal in the page chrome — the visual equivalent of a wink. The color is the same warm salmon pink wired into the page CSS as the amie-pink custom property, also used as the small dot under the wordmark in the upper-left corner. Hand-drawn marks like this are a recurring move across friendly productivity brands, but Amie uses exactly one of them on the page — a deliberate restraint.

Can I use this DESIGN.md to build my own calendar marketing site?

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Amie's specific moves: grayscale Inter chrome on near-white canvas, single sky-blue pill CTA, hand-drawn salmon-pink scribble decoration, and 8px default rounding with a full-pill option for the CTA. You can also reference the tokens directly: every hex, font name, radius, and spacing value is a quoted scalar you can paste into Tailwind config or CSS variables. One caveat: the product-as-palette move only works if your product has its own colorful canvas — for a marketing site without that visual support, you may want to bring more chrome color into the chrome itself.

Amie Design System

Amie's marketing system is gray Inter chrome with a single sky-blue pill CTA — the product's pastel calendar blocks carry every chromatic moment.

About Amie DESIGN.md

Curated by Dov AzencotUpdated May 18, 2026Source amie.so

Productivity & SaaS

Amie's marketing site does something most calendar brands wouldn't dare: it renders the entire above-fold chrome in grayscale. The hero headline reads "AI Note Taker without a bot" with the second half wrapped in a soft yellow highlight; below it sit two buttons, only one of which is colored — a sky-blue pill carrying "Get started," paired with a transparent "Request a demo" sibling. Where Notion paints its hero with friendly multi-color object photography and Calendly leans on a saturated marine-blue chrome, Amie keeps the marketing surface almost entirely neutral and lets the product screenshots underneath do every chromatic job. The hand-drawn salmon-pink scribble arrow looping under the wordmark is the brand's only decorative moment in the page header itself.

The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 14 color tokens — one sky-blue brand voltage, one salmon hand-drawn accent, four pastel event-block hues borrowed from the product, plus the grayscale chrome ladder; 11 typography tokens running Inter from a 56px / 700 display down to a 12px / 400 caption; 6 corner-radius tokens centered on 8px with a full-pill option for CTAs; 8 spacing values on a 4px base; and 14 component definitions covering the sky-blue pill primary button, the transparent secondary, the hairline-bordered cards, the calendar event blocks, and the inbox-style task rows.

Feed this file to an AI coding tool and it reproduces Amie's specific moves: grayscale Inter chrome on near-white, sky-blue voltage held to a single CTA above the fold, hand-drawn scribble decorations in salmon pink, and the pastel event-block palette reserved for the product canvas. The one move worth borrowing only if your product has a colorful canvas of its own: refuse to put any of those product colors into the marketing chrome. Amie gets away with the restraint because the screenshots beneath the fold are bright enough to carry it — most landing pages need to paint the chrome itself.

What makes it distinct

Product-as-palettethe marketing chrome is monochrome Inter on near-white, while pastel event blocks (mint, pink, lavender, sky, sun) saturate the calendar screenshots
Single sky-blue voltagethe brand hex appears just twice in the captured page, both as the pill CTA fill, the only saturated marketing element above the fold
Hand-drawn salmon underlinethe loop-scribbled arrow under the headline is the brand's playfulness signal, rendered in the same salmon pink as the wordmark dot
Inter across every tierdisplay at 40-56px in weight 700, body at 16px in weight 400, button labels at 14px in weight 500, no second family
8px default rounding plus full pillcards at 12px, buttons at full pill, the calendar event blocks at 8px; no sharp 0-2px corners anywhere

Live at amie.so

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

amie.so

Explore Amie

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.

Amie design system FAQ

Common questions about Amie's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Amie — official site

Amie's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.