Skip to content
DesignMunkDesignMunk Submit a site

Amie

amie.so
Summarize meetings and create action items—without bot interruptions.
AI Productivity Next.js Tailwind Homepage Inter
Share Visit site
amie.so DESKTOP · 1440
Amie

AI Breakdown

Design export

# Design brief: the Amie design language

Below is a complete design specification measured from a real, published web page. Use it as a design language for the user's product. It is not a page to reproduce.

## Reference images

- Full page: https://cdn.designmunk.com/2026/09/14085719/amie-so-featured.webp
- Above the fold: https://cdn.designmunk.com/2026/09/14085719/amie-so-featured-1440x900.webp
- On DesignMunk: https://designmunk.com/amie/

Study these for hierarchy, rhythm, spacing and density. Where an image and the written spec disagree, the spec wins: the tokens were read from the page's own CSS, the images are one rendering of it.

## Before you start

Ask the user what they are building, who it is for, and what brand assets they already have — name, colours, typefaces. Wait for their answers before writing anything. Everything below is then applied to their product, not to the reference.

## Design specification

# Amie: Monochrome Canvas With One Electric-Blue CTA

## Overview

Amie's site speaks to productivity-minded teams evaluating an AI meeting assistant. The tone is straightforward and confident, prioritizing clarity over spectacle. The UI should feel calm, spacious, and unopinionated, with color reserved for primary actions and proof points. When tokens don't cover a case, default to neutral backgrounds, mid-grey text, and generous white space.

## Page Structure

- Top navigation: compact bar with logo at left, two text links, and a right-aligned primary CTA; minimal chrome and ample breathing room.
- Hero: oversized left-aligned headline and short supporting copy; a row of small badges above the headline; CTA row with a filled primary pill and a light secondary; wide empty right side for air.
- Product screenshot card: a large centered application mock framed by a soft shadow; a slim changelog line sits just above.
- Social proof strip: "Trusted by" label followed by a row of logos; tight spacing, low contrast.
- Speed claim band: one-line promise with quick outcomes and a repeated primary CTA; compact height.
- Feature stack — Meeting Notes: heading, subhead, and replacement list; content-first with ample paragraphs.
- No-bot recording + Works wherever + Customize summary: successive feature sections, each pairing explanatory copy with supporting UI imagery or bullets.
- Outcomes timeline: three steps (Today, Day 3, Day 7) presented as a row of cards with short task lists and mini headings.
- AI Chat + Chat Actions: two adjacent sections; explanatory copy with examples, then action tiles (send email, combine actions, create tickets).
- Integrations grid: vendor logos with short captions; export destinations listed compactly.
- Shareable Pages: heading with three ways to organize (recurring event, domain, manual) as small cards.
- Calendar & Todos: benefits copy with short endorsements; follows the same typographic rhythm as features.
- How it works: three-step checklist (Download, Start recording, Save hours) with a closing primary CTA.
- FAQ accordion: stacked questions with light dividers; concludes with a dense, multi-column footer of links and legal.

## Colors

- primary (#5c5c5c): Core text on light surfaces; use for body copy, secondary buttons, and iconography.
- secondary (#8c8c8c): Muted supporting text, timestamps, and de-emphasized labels.
- tertiary (#11a8ff): Accent and primary action color; reserve for filled CTAs, key links, and highlights.
- neutral (#fafafa): Page background and card surfaces; produces a soft, paper-like canvas.
- border (#cdcdcd): Hairline rules, card outlines on light backgrounds, and input borders.
- brand-eerie-black (#1a1a1a): Strongest ink for high-impact headings or rare emphasis.
- surface (#fafafa): General surface color; matches neutral for section backgrounds and cards.
- on-surface (#5c5c5c): Default text color when placed on surface/neutral backgrounds.

## Typography

- Inter var / Inter is the single family across headings and body. It is freely available via Google Fonts (listed in font_sources). Use variable weights where supported.
- Headings: headline-lg 40px/1.2 at 700 for the hero; headline-md 34px/1.21 at 700 for section leads; headline-sm 28px/1 at 600 and headline-xs 24px/1.17 at 600 (-0.021em tracking) for subheads and card titles.
- Body: body-md 20px/1.4 at 500 for descriptive copy, lists, and FAQs.
- Substitutes: If Inter isn't available, use Roboto or Noto Sans (both in font_sources) for similar x-height and rhythm. Keep weights aligned to the specified levels.
- Emoji: Noto Color Emoji may be loaded for consistent glyph rendering in badges or UI callouts.

## Layout

- Spacing scale: xs 6px for micro-gaps (icon/label), sm 16px for inline padding and small gutters, md 28px for component spacing, lg 40px for card padding and section internals, xl 80px for vertical section spacing.
- Grid: content is center-aligned within a wide single column; feature sections may split into two columns at large viewports but revert to a vertical stack on mobile.
- Rhythm: headline → body (20px) → CTA stack, with xl gaps between major sections and md to lg within components.
- Containers: cards use generous internal padding (40px sides) and 12px radii to keep the page soft and approachable.

## Elevation & Depth

- Use soft shadows to separate interactive or media containers from the neutral background: sm for small chips, md for screenshots and cards, lg for overlays or hero media.
- Borders (#cdcdcd) provide most delineation; prefer 1px hairlines to heavy outlines.
- Depth hierarchy is primarily achieved through contrast shifts (on-surface text over neutral) and whitespace, reserving strong shadows for focal media.

## Shapes

- Global radius is rounded.sm at 12px across buttons, inputs, cards, and screenshots.
- The consistent 12px corners signal touch-friendly components without skewing playful; avoid mixed radii within the same section.

## Components

- Buttons
  - Primary: background #11a8ff, text #ffffff, 12px radius, 12px × 28px padding, 50px height. Use for the primary action only.
  - Secondary: background #ffffff, text #5c5c5c, 12px radius, 12px × 28px padding, 50px height. Use next to the primary for alternative paths like Download.
  - Link: text #5c5c5c, radius 0. Use inline; no heavy hover treatments beyond underline or slight color shift.
- Card: background #fafafa, text #000000, 12px radius, padding 40px 40px 0. Add a 1px #cdcdcd border or sm/md shadow when placed on neutral backgrounds to retain edge clarity.

### Top Navigation
- Thin height with left-justified logo and two inline links; right side holds a primary button. Text color #5c5c5c; active link can use #11a8ff.

### Hero CTA Row
- Two-button grouping: primary (Get started) and secondary (Download) with md gap. Keep to one line at desktop.

### Product Screenshot Card
- Oversized image inside a card with md shadow and 12px corners; optional caption line above. Place centered with xl top margin.

### Badge Row
- Small rounded pills preceding the hero headline to show awards/mentions. Use secondary text and a light border; minimal height.

### Logo Wall
- A single row of monochrome logos under a "Trusted by" label. Use low-contrast greys; equal spacing.

### Outcomes Timeline
- Three horizontally aligned cards (Today, Day 3, Day 7). Each has a 24–28px subhead and a short checklist. Use lg internal padding and md gaps between cards.

### Testimonial Quote Card
- Compact card with avatar/attribution and a text block. On light backgrounds, prefer sm shadow and border to maintain separation.

### FAQ Accordion
- Stacked items with 1px #cdcdcd dividers; question in 24–28px weight 600, answer in 20px body. Chevron rotates on expand.

## Do's and Don'ts

- Do reserve #11a8ff exclusively for primary actions and key links; the palette relies on a single accent.
- Do keep text at #5c5c5c on #fafafa surfaces for legibility; use #1a1a1a sparingly for major headings.
- Do space sections with xl (80px) and components with md–lg (28–40px) to maintain the airy feel.
- Don't mix corner radii; stick to 12px across buttons, cards, and media.
- Don't introduce heavy borders or dark panels; prefer light hairlines (#cdcdcd) and soft shadows.
- Don't stack multiple primary buttons in one viewport; one clear action per section.

## Agent Prompt Guide

Quick color reference — text: #5c5c5c, background: #fafafa, border: #cdcdcd, accent: #11a8ff.

1) Build the top nav
- Container: background #fafafa, 24px vertical padding. Left: logo; center: links (Inter 20px/500, color #5c5c5c, 16px gap); right: Primary Button (50px tall, 12px radius, #11a8ff, white text).

2) Compose the hero
- Headline: Inter 40px/1.2, 700, color #1a1a1a, max-width 12–14ch.
- Body: Inter 20px/1.4, 500, color #5c5c5c, 16px top margin.
- CTA row: Primary (#11a8ff) and Secondary (#ffffff with #5c5c5c text), both 50px tall, 12px radius, 16px gap, 28px horizontal padding.
- Spacing: 80px top/bottom from surrounding sections.

3) Product screenshot section
- Card: background #fafafa, border 1px #cdcdcd or md shadow, radius 12px, padding 40px sides, 0 bottom.
- Place centered with 80px top margin from hero and 28px caption line above.

4) Feature block (two-column at desktop)
- Left: Inter headline 34px/700; body 20px/500.
- Right: image or UI card with md shadow, radius 12px.
- Gaps: 40px between columns, 28px between text elements; section padding 80px vertical.

5) FAQ accordion
- Each item: question Inter 24–28px/600 (#5c5c5c), answer Inter 20px/1.4 (#5c5c5c).
- Divider: 1px #cdcdcd; icon chevron in #8c8c8c; item padding 28px vertical.

## Similar Brands

- Notion — neutral surfaces, disciplined greys, and a single accent for calls to action; Notion skews denser with more tool chrome.
- Linear — quiet palette and crisp Inter typography; Linear uses deeper shadows and darker backgrounds in app contexts.
- Superhuman — minimal marketing pages with one vivid accent; Superhuman leans more into gradients than this flat approach.
- Reclaim.ai — productivity tooling with sparse color and blue CTAs; Reclaim runs a tighter grid and more iconography.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #5c5c5c;
  --color-secondary: #8c8c8c;
  --color-tertiary: #11a8ff;
  --color-neutral: #fafafa;
  --color-border: #cdcdcd;
  --color-brand-eerie-black: #1a1a1a;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 40px;
  --text-headline-lg-weight: 700;
  --text-headline-lg-leading: 1.2;
  --text-headline-md-size: 34px;
  --text-headline-md-weight: 700;
  --text-headline-md-leading: 1.21;
  --text-headline-sm-size: 28px;
  --text-headline-sm-weight: 600;
  --text-headline-sm-leading: 1;
  --text-headline-xs-size: 24px;
  --text-headline-xs-weight: 600;
  --text-headline-xs-leading: 1.17;
  --text-headline-xs-tracking: -0.021em;
  --text-body-md-size: 20px;
  --text-body-md-weight: 500;
  --text-body-md-leading: 1.4;
  --font-inter-var: "Inter var";
  --font-inter: "Inter";

  /* Rounded */
  --radius-sm: 12px;

  /* Spacing */
  --spacing-xs: 6px;
  --spacing-sm: 16px;
  --spacing-md: 28px;
  --spacing-lg: 40px;
  --spacing-xl: 80px;

  /* Components */
  --button-primary-background-color: var(--color-tertiary);
  --button-primary-text-color: #ffffff;
  --button-primary-rounded: var(--radius-sm);
  --button-primary-padding: 12px 28px;
  --button-primary-height: 50px;
  --button-secondary-background-color: #ffffff;
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: var(--radius-sm);
  --button-secondary-padding: 12px 28px;
  --button-secondary-height: 50px;
  --button-link-text-color: var(--color-primary);
  --button-link-rounded: 0px;
  --card-background-color: var(--color-neutral);
  --card-text-color: #000000;
  --card-rounded: var(--radius-sm);
  --card-padding: 40px 40px 0px;
}
```

### Tailwind theme

```css
@theme {
  --color-primary: #5c5c5c;
  --color-secondary: #8c8c8c;
  --color-tertiary: #11a8ff;
  --color-neutral: #fafafa;
  --color-border: #cdcdcd;
  --color-brand-eerie-black: #1a1a1a;
  --color-surface: #fafafa;
  --color-on-surface: #5c5c5c;
  --font-headline-lg: "Inter var";
  --font-headline-md: "Inter var";
  --font-headline-sm: "Inter";
  --font-headline-xs: "Inter";
  --font-body-md: "Inter";
  --text-headline-lg: 40px;
  --text-headline-md: 34px;
  --text-headline-sm: 28px;
  --text-headline-xs: 24px;
  --text-body-md: 20px;
  --tracking-headline-xs: -0.021em;
  --font-weight-headline-lg: 700;
  --font-weight-headline-md: 700;
  --font-weight-headline-sm: 600;
  --font-weight-headline-xs: 600;
  --font-weight-body-md: 500;
  --radius-sm: 12px;
  --spacing-xs: 6px;
  --spacing-sm: 16px;
  --spacing-md: 28px;
  --spacing-lg: 40px;
  --spacing-xl: 80px;
}
```

### Design tokens (DTCG)

```json
{
    "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
    "color": {
        "$type": "color",
        "primary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.361,
                    0.361,
                    0.361
                ],
                "hex": "#5c5c5c"
            }
        },
        "secondary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.549,
                    0.549,
                    0.549
                ],
                "hex": "#8c8c8c"
            }
        },
        "tertiary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.067,
                    0.659,
                    1
                ],
                "hex": "#11a8ff"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.98,
                    0.98,
                    0.98
                ],
                "hex": "#fafafa"
            }
        },
        "border": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.804,
                    0.804,
                    0.804
                ],
                "hex": "#cdcdcd"
            }
        },
        "brand-eerie-black": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.102,
                    0.102,
                    0.102
                ],
                "hex": "#1a1a1a"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.98,
                    0.98,
                    0.98
                ],
                "hex": "#fafafa"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.361,
                    0.361,
                    0.361
                ],
                "hex": "#5c5c5c"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 6,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 16,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 28,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 40,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 80,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 12,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Inter var",
                "fontSize": {
                    "value": 40,
                    "unit": "px"
                },
                "fontWeight": 700
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Inter var",
                "fontSize": {
                    "value": 34,
                    "unit": "px"
                },
                "fontWeight": 700
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Inter",
                "fontSize": {
                    "value": 28,
                    "unit": "px"
                },
                "fontWeight": 600
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Inter",
                "fontSize": {
                    "value": 24,
                    "unit": "px"
                },
                "fontWeight": 600,
                "letterSpacing": {
                    "value": -0.021,
                    "unit": "em"
                }
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Inter",
                "fontSize": {
                    "value": 20,
                    "unit": "px"
                },
                "fontWeight": 500
            }
        }
    }
}
```

## Rules

- **Fonts.** If the specification names a custom or self-hosted family, use one of the substitutes it names. Never reference a typeface you cannot actually load — it will fall back to a system font and undo the typography.
- **Colour.** Derive the palette from the user's brand. Use the token values as a guide to *relationships* — contrast, tint, how many accents carry the page — not as hex codes to paste.
- **Never reproduce** the wordmark, mascot, logo, brand name, illustrations, icon set, screenshots or any copy from the reference.
- **Never present the result as Amie**, or imply any connection to it.
- If something is unspecified, choose clarity and legibility over decoration.

More like this

Browse AI →
zaro.ai
Zaro AI
Zaro
fellow.ai
Fellow AI
Fellow
thedrive.ai
The Drive AI AI
The Drive AI
workleap.com
Workleap AI
Workleap