amie.so — Design Language

1. Visual Theme & Atmosphere

Amie is a calendar and productivity app whose marketing site mirrors its product: clean, white, app-like — but with surprising warmth and personality. The canvas is pure white with a near-black foreground (#262626), but what distinguishes amie visually is the breadth of its colour system. Behind the monochromatic surface sits a complete palette of named semantic colours — rose, orange, purple, red, blue, green, teal — each expressed in a full 9-step scale. The pink accent (#f6a6a6) is the brand’s heartbeat, appearing in product UI as a pastel emotional touch. The design philosophy is “joyful utility”: professional enough for a serious productivity tool, warm enough to make people want to spend time in it.

2. Color Palette & Roles

Primary text & foreground

• #262626 (--foreground) — Near-black body text; slightly warm, prevents harshness.
• rgb(0, 0, 0) — Pure black for max-contrast labels and headlines.

Background surfaces

• rgb(255, 255, 255) — Primary page and card backgrounds.
• rgba(250, 250, 250, 0.8) — Frosted header/nav surface; near-white with subtle transparency for sticky layers.
• rgba(235, 235, 235, 0.5) — Secondary surface; muted background zone for content grouping.

Brand accent

• #f6a6a6 (--color-amie-pink) — The brand signature; a soft rose-pink. Used sparingly in product UI to humanise the experience.

Semantic colour system (full scale, RGB-based, used in product UI)

• --color-primary → --color-gray-900 (rgb(23,23,23)) — Primary UI text.
• --color-secondary → --color-gray-600 (rgb(92,92,92)) — Secondary labels.
• --color-tertiary → --color-gray-350 (rgb(160,160,160)) — Tertiary/placeholder text.
• --color-accent → --color-red-500 (rgb(253,43,56)) — Destructive actions, notifications, unread dots.
• --color-background → --color-gray-50 (rgb(250,250,250)) — App background.

Status & data colours (surfaces)

• rgb(204, 244, 218) — Mint green; success/confirmed event backgrounds.
• rgb(88, 144, 231) — Blue widget surface.
• rgb(17, 168, 255) — Bright blue for feature highlights.
• rgb(231, 88, 97) — Notification/unread dot red.
• rgb(115, 115, 115) — Mid-grey UI zone.

Border

• rgb(205, 205, 205) — Universal interactive element border colour.

3. Typography Rules

Inter var — The primary marketing typeface, loaded as a variable font. Two fallback chains reveal dual rendering contexts:

Headings at 20px with weights 600–700 signal an app-first design — headings are section markers, not visual centrepieces. The 12px button/input size reflects the product’s dense, information-rich UI bleeding through to the marketing layer. No negative tracking at marketing sizes (unlike many contemporaries) — Inter reads naturally at these weights.

What is absent: no display serif, no custom brand typeface beyond Inter, no uppercase transforms.

4. Component Stylings

Shadow system — Amie uses a layered box-shadow vocabulary as its elevation language:

• Level 1 (card border): rgba(0,0,0,0.06) 0px 0px 0px 1px, rgba(0,0,0,0.06) 0px 1px 1px -0.5px, rgba(0,0,0,0.06) 0px 3px 3px -1.5px — Subtle border + micro-lift.
• Level 2 (elevated card): Extends Level 1 with rgba(0,0,0,0.06) 0px 6px 6px -3px, rgba(0,0,0,0.04) 0px 12px 12px -6px, rgba(0,0,0,0.04) 0px 24px 24px -12px, rgba(0,0,0,0.1) 0px 24px 24px 2px — Deep layered ambient shadow for modals/dropdowns.
• Minimal: rgba(0,0,0,0.1) 0px 1px 3px, rgba(0,0,0,0.1) 0px 1px 2px -1px — Standard Tailwind shadow-sm equivalent.

Border radii — Multiple scales in active use:

• 3px — Micro elements, badges, tight UI.
• 6px — Small interactive elements.
• 8px — Standard component radius (inputs, cards).
• 12px — Larger cards, panels.
• 0px 0px 12px 12px — Bottom-only rounding (bottom sheet / drawer pattern).
• 9999px — Pill buttons and tags.

Buttons — 12px font, weight 700 (bold for small size), transparent default with rgba(0,0,0,0.05) fill on hover. No border-colour change on hover; subtle background tint only.

WYSIWYG shadows: --shadow-wysiwyg-inner: rgba(0,0,0,0.04) / --shadow-wysiwyg-outer: rgba(0,0,0,0.12) — defined for rich-text editor components.

5. Layout Principles

Built on Next.js + Tailwind CSS with a rich set of layout custom properties:

• --nav-width: 74px — Narrow icon sidebar (product UI convention).
• --inbox-width: 200px — Secondary panel width.
• --sidebar-top-height: 36px / --sidebar-bottom-height: 64px — Fixed chrome heights.
• --grid-row-height: 60px — Calendar grid row height.

These tokens expose the product layout system leaking into the marketing layer — unusual and intentional.

Breakpoints: 640px, 768px, 1024px, 1280px, 1536px, 2000px — Tailwind defaults plus a 2000px ultrawide breakpoint for large display optimisation.

6. Depth & Elevation

The shadow system is sophisticated and tiered. Unlike flat designs, amie uses multi-stop shadows to create genuine optical depth:

• Zero elevation: flat surface, no shadow.
• Low elevation: 1px border shadow only.
• Medium elevation: border + 3px ambient.
• High elevation: full 9-layer stack up to 24px spread.

The frosted header rgba(250,250,250,0.8) combined with a light shadow creates a glassmorphic sticky nav without blur (no backdrop-filter in extracted CSS).

7. Do’s and Don’ts

Do:

• Use the full tiered shadow vocabulary — don’t collapse to a single shadow value.
• Keep the amie-pink #f6a6a6 as a pastel emotional accent, used once per view.
• Use Inter var as a variable font; weight 700 at small sizes (12px buttons) for legibility.
• Use the 9999px pill radius for primary CTAs; 8px for cards and inputs.
• Express status with surface colour (mint green for success, red for alerts) rather than text colour alone.

Don’t:

• Don’t substitute a different accent colour for #f6a6a6 — the brand’s warmth depends on it.
• Don’t use the full semantic colour scale decoratively; it exists for data, status, and events.
• Don’t collapse the typography scale — h2 and body are close in size by design; weight carries the distinction.
• Don’t use hard borders in place of the layered shadow-as-border pattern.
• Don’t add decorative display typefaces; Inter’s variable weight range is the only typographic tool.

8. Responsive Behavior

Six breakpoints including a 2000px ultrawide:

• ≤640px: Mobile, stacked single-column.
• 640px–768px: Small tablet / Tailwind sm.
• 768px–1024px: Tablet / Tailwind md.
• 1024px–1280px: Desktop / Tailwind lg.
• 1280px–1536px: Large desktop / Tailwind xl.
• ≥1536px: Ultra-wide; 2000px variant for very large displays showing more product UI.

The layout custom properties (--nav-width, --inbox-width, etc.) remain constant across breakpoints — they are product app chrome dimensions, not responsive variables.

9. Agent Prompt Guide

“Design in the style of amie.so: pure white background, #262626 foreground text, Inter var typeface at 400/600/700 weights. Use layered multi-stop box-shadows for elevation — never flat borders. Brand accent is soft rose #f6a6a6, used sparingly. Multiple border-radius values: 3px for micro, 8px standard, 12px panels, 9999px pills. Full semantic colour scale (gray/rose/blue/green/red) for data and status. Button hover uses rgba(0,0,0,0.05) tint only. Tailwind breakpoints plus 2000px ultrawide.”

Generated by Sparkbites — extracted from live CSS analysis