---
title: "Amie design system"
variant: extended
source: https://amie.so/
captured_at: 2026-10-12
theme: light
industry: ai
generator: Design DNA (https://four.wiralomi.com/style/amie-so)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Amie · Design System

> Quiet workspace, vivid AI actions

**Theme:** light · **Industry:** ai · **Source:** https://amie.so/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Amie’s homepage pairs a restrained near-white canvas and bold black typography with compact blue calls to action. A long, spacious product narrative uses interface captures and workflow examples to make the AI assistant feel practical and approachable.

## North star

Keep the page calm and near-white, using bold black typography and vivid blue only to direct attention to actions and product moments.

## Overview

The visual system is led by a near-white canvas (#fafafa), black headings, and subdued gray body copy, creating a quiet workspace-like backdrop for a product story that spans many sections. Inter is used throughout: large, heavy display headings carry the message, while regular-weight body text stays compact and readable. Bright blue (#11a8ff) marks the primary “Get started” actions and selected interface details; related pale and mid blues appear mainly in gradients and product visuals rather than as broad page bands. The layout centers content in a measured maximum width, with generous vertical breathing room between sections and tighter spacing within explanatory text and feature groups. Product screenshots do much of the visual storytelling, showing real interface structures inside lightly elevated, rounded panels. Fine gray borders and soft shadows separate those panels without making the page feel boxed in. Small green, pink, and multicolor details are largely confined to badges, partner marks, and product imagery.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#fafafa` | `--color-gallery-white` | surface | Dominant page canvas and the light backdrop around the long-form product sections. |
| Soft Graphite | `#5c5c5c` | `--color-soft-graphite` | neutral | Main muted copy, secondary navigation, and text on the white Download button. |
| True Ink | `#000000` | `--color-true-ink` | brand | Primary headings, body text, navigation, and dark interface details. |
| Action Blue | `#11a8ff` | `--color-action-blue` | accent | Primary Get started buttons and small actionable highlights. |
| Ice Wash | `#cfeeff` | `--color-ice-wash` | accent | Pale endpoint of a blue gradient, visible mainly in product and card artwork. |
| Sky Current | `#41baff` | `--color-sky-current` | accent | Lighter blue gradient endpoint and secondary blue detail in product visuals. |
| Charcoal Line | `#2e2e2e` | `--color-charcoal-line` | neutral | Dark border and interface-outline color; use sparingly rather than as a page-wide divider. |
| Quiet Gray | `#a0a0a0` | `--color-quiet-gray` | neutral | Low-emphasis labels and secondary details such as language or metadata text. |
| Mist Divider | `#ededed` | `--color-mist-divider` | semantic | Subtle card and interface borders or pale supporting surfaces. |
| Cloud Gray | `#c8c8c8` | `--color-cloud-gray` | surface | Minor neutral surface detail; not a defining page background. |
| Silver Trace | `#b5b5b7` | `--color-silver-trace` | neutral | Low-contrast detail in interface or illustration elements, not a core brand field. |

### Semantic aliases

`--color-canvas` → `#fafafa` (Gallery White) · `--color-surface` → `#c8c8c8` (Cloud Gray) · `--color-text` → `#000000` (True Ink) · `--color-text-muted` → `#5c5c5c` (Soft Graphite) · `--color-text-subtle` → `#a0a0a0` (Quiet Gray) · `--color-border` → `#2e2e2e` (Charcoal Line) · `--color-accent` → `#11a8ff` (Action Blue) · `--color-accent-2` → `#41baff` (Sky Current) · `--color-on-accent` → `#ffffff`

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#fafafa` | 20.12:1 | AAA |
| `#000000` | `#c8c8c8` | 12.55:1 | AAA |
| `#5c5c5c` | `#fafafa` | 6.41:1 | AA |
| `#5c5c5c` | `#c8c8c8` | 4:1 | AA-large |
| `#a0a0a0` | `#fafafa` | 2.51:1 | fail |
| `#a0a0a0` | `#c8c8c8` | 1.56:1 | fail |
| `#11a8ff` | `#fafafa` | 2.49:1 | fail |
| `#11a8ff` | `#c8c8c8` | 1.56:1 | fail |

### Gradients

- `linear-gradient(to right top, rgb(207, 238, 255), rgb(65, 186, 255))`
- `linear-gradient(to right top, rgb(17, 168, 255), rgb(65, 186, 255))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 500, 600, 700 | All page typography, from navigation and body copy to display headings and buttons. | Inter |

- **Inter:** Use bold, tightly tracked display headings; body copy is regular and comfortably led. Keep case natural, with no forced uppercase.

### Type scale — Perfect Fifth (ratio ≈ 1.518, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 56px | 700 | 1.14 | -0.012em | — | Inter | Oversized hero and prominent section headline moments. |
| h1 | 40px | 700 | 1.36 | -0.012em | — | Inter | Main page headline and major feature section titles. |
| h2 | 20px | 600 | 1.4 | -0.025em | — | Inter | Subsection headings and compact feature-group titles. |
| body | 16px | 400 | 1.75 | 0 | — | Inter | Explanatory paragraphs, product details, and supporting descriptions. |
| caption | 14px | 400 | 1.5 | 0 | — | Inter | Metadata, testimonial details, and small supporting labels. |
| button | 16px | 600 | 1.6 | -0.012em | — | Inter | Primary and secondary action labels. |

OpenType features in use: `"calt", "case", "ss01", "tnum"`.

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 2, 4, 6, 8, 10, 12, 16, 20, 24, 28, 32, 40, 48, 192 px.
- Section rhythm 48px · element gap 8px · card padding — · max content width 976px.

The page uses a centered content column with a measured maximum width of 976px, with the hero and product examples aligned to that shared frame. Headings and content are mostly left-aligned, while selected milestone or timeline messaging is centered. A comfortable density and generous section gaps create a long, editorial scroll; related copy and controls stay grouped closely. Product screenshots can span much of the content width, while text blocks and feature columns remain more compact.

## Shape & elevation

- Radius: button `12px` · card `12px` · media `8px` · nav `8px` · link `9999px` · xs `4px` · sm `6px` · md `8px` · lg `12px` · xl `32px` · pill `9999px`
- Shadow `inset` (other): `rgb(255, 255, 255) 0px 0px 0px 0px inset, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Shadow `sm` (card, button): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, 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`
- Shadow `inset-2` (other): `rgb(255, 255, 255) 0px 0px 0px 0px inset, rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Shadow `sm-2` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px`
- Shadow `hairline` (link): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Shadow `lg` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, 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, rgba(0, 0, 0, 0`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

Most of the page stays visually flat against the near-white canvas. Product cards and screenshots gain separation from soft, low-opacity shadows and fine light borders, with rounded corners. Keep elevation restrained; do not add heavy outlines or deep dramatic shadows.

## Imagery

Product interface captures are the primary imagery: meeting summaries, email workflows, calendars, and integrations are framed as clean desktop app views. They sit in rounded panels with subtle borders or shadows, often with blue or multicolor gradient accents inside the artwork. Small partner logos and illustrative interface details support the narrative; imagery is product-led rather than photographic.

## Components

### Primary CTA

Bright #11a8ff fill with white semibold Inter text and rounded corners; the main Get started action is visually prominent.

### Secondary download button

White button with muted gray label, rounded corners, and a delicate shadow that distinguishes it from the canvas.

### Top navigation

Compact logo and simple text links sit on the shared centered frame; Login is muted and Get started is a small blue button.

### Product showcase

Wide app screenshots sit within rounded, lightly elevated frames, allowing realistic product UI to carry feature explanations.

### Feature narrative

Short section labels and bold headings introduce concise explanatory paragraphs, followed by interface examples or supporting details.

### Social proof

Partner marks, review snippets, and testimonials appear as understated supporting evidence rather than high-contrast standalone cards.

### Measured component styles

- **Primary button** (“Get started”): background #11a8ff · text #ffffff · radius 12px · padding 12px 28px · 600 16px Inter
- **Secondary button** (“Download”): background #ffffff · text #5c5c5c · radius 12px · padding 12px 28px · 600 16px Inter · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Link** (“17 languages”): transparent background · text #a0a0a0 · radius 0px · padding 0px · 400 12px Inter
- **Card** (“Start recording Record your first meetin”): background #ffffff · text #000000 · radius 12px · padding 0px · 400 16px Inter · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Navigation item** (“Features Pricing”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Inter

## Do

- Use #fafafa as the dominant page canvas.
- Set headlines in bold black Inter with compact tracking.
- Reserve #11a8ff for primary actions and focused highlights.
- Let product screenshots demonstrate the workflow.
- Use muted gray for supporting copy and metadata.
- Separate sections with generous whitespace.
- Keep card shadows and borders soft and restrained.

## Don't

- Do not introduce large saturated color bands.
- Do not use gradients as the main page background.
- Do not turn every feature into a boxed card.
- Do not make secondary copy compete with headlines.
- Do not add heavy borders or dramatic shadows.
- Do not treat colors inside screenshots as page-wide brand colors.

## Agent prompt

Build a new Amie-style AI productivity page with a quiet, product-led visual system. Use Gallery White (#fafafa) for the canvas, True Ink (#000000) for strong Inter headings, and Soft Graphite (#5c5c5c) for supporting copy. Make Action Blue (#11a8ff) the clear primary-action color, with Ice Wash (#cfeeff) and Sky Current (#41baff) reserved for product artwork or restrained gradients. Keep content centered within the measured 976px maximum width and use generous section spacing. Pair bold, tightly tracked headlines with readable regular-weight paragraphs. Show the product through rounded app screenshots with subtle borders and soft shadows, not decorative photography. Maintain simple navigation, crisp controls, and a calm overall hierarchy.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered-width page frame with compact top navigation, left-aligned hero copy, paired actions, and a wide product screenshot. | Primary start action, Secondary download action, Product proof below the fold | Near-white canvas, Bold black headline, Blue CTA, Rounded app capture |

## Source CSS custom properties (selected)

```css
--foreground: #262626;
--color-amie-pink: #f6a6a6;
--shadow-wysiwyg-inner: rgba(0,0,0,0.04);
--shadow-wysiwyg-outer: rgba(0,0,0,0.12);
--color-recording-stripe: 0,0,0;
--color-gray-950: 15,15,15;
--color-gray-900: 23,23,23;
--color-gray-885: 25,25,25;
--color-gray-870: 27,27,27;
--color-gray-850: 34,34,34;
--color-gray-800: 46,46,46;
--color-gray-750: 58,58,58;
--color-gray-740: 49,49,49;
--color-gray-700: 69,69,69;
--color-gray-650: 81,81,81;
--color-gray-600: 92,92,92;
--color-gray-550: 104,104,104;
--color-gray-500: 115,115,115;
--color-gray-450: 130,130,130;
--color-gray-400: 145,145,145;
--color-gray-350: 160,160,160;
--color-gray-300: 175,175,175;
--color-gray-250: 190,190,190;
--color-gray-200: 205,205,205;
--color-gray-150: 220,220,220;
--color-gray-100: 235,235,235;
--color-gray-75: 242,242,242;
--color-gray-50: 250,250,250;
--color-rose-900: 90,59,66;
--color-rose-800: 125,62,77;
--color-rose-700: 163,60,85;
--color-rose-600: 207,54,91;
--color-rose-500: 255,43,95;
--color-rose-400: 255,85,127;
--color-rose-300: 255,128,159;
--color-rose-200: 255,170,191;
--color-rose-100: 255,213,223;
--color-orange-900: 83,60,45;
--color-orange-800: 117,72,42;
--color-orange-700: 157,84,33;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/amie-so