# Amie

크리미한 화이트(#fafafa) 위에 스카이블루 CTA(#11a8ff)와 골드 포인트(#ffd700)가 놓인 클레이모피즘 감성의 노트 앱 — 부드럽고 둥글고 입체적이다.

- taxonomy: claymorphism · soft-round, sky-blue, gold-accent, clay-3d, friendly-saas, note-app, light-airy · complexity=medium
- page types: landing, app, marketing
- best for: 프로덕티비티 앱 랜딩, AI 도구 마케팅, 친근한 B2C SaaS, 소프트 UI 대시보드
- avoid for: 어두운 개발자 도구, 럭셔리 패션 브랜드, 브루탈리스트 아트 사이트, 데이터 중심 금융 대시보드
- provenance: website (Amie - AI Note Taker) — confidence: colors=computed-css, typography=computed-css, radius=computed-css, color_roles=vision-inferred, taxonomy=vision-inferred, dark=vision-inferred, light=computed-css

## Design rules

# Amie — Design Specification
## Overview
Amie's landing embodies claymorphism: soft, rounded, 3D-feeling surfaces on a near-white canvas. Sky blue (#11a8ff) CTAs, gold (#ffd700) pops, and multi-layer soft shadows create a friendly, approachable productivity tool aesthetic.
## Color Architecture
- Sky blue #11a8ff = primary CTA and brand
- Gold #ffd700 = accent highlights (sparingly)
- Light blue #cfeeff = secondary backgrounds
- Near-white #fafafa = canvas
## Signature Elements
- Soft multi-layer shadows with blue tint (clay-like)
- Large radius (10-16px)
- Product screenshot showcases
- Clean, bouncy transitions
## Agent Prompt Guide
> Near-white canvas, sky blue CTAs, gold accent pops. Soft clay shadows, large radius. Product screenshots. Clean and friendly.
## Known Gaps
- Dark mode is synthesized
- Product demo animations simplified to static


## Tokens (theme.css — use these values verbatim, do not re-derive)

```css
/* Amie — theme.css (generated, do not edit) */
:root {
  --radius: 16px;
  --radius-selector: 10px;
  --radius-field: 10px;
  --font-sans: Inter, -apple-system, sans-serif;
  --font-mono: SF Mono, monospace;
  --spacing: 8px;
  --shadow: 0px 8px 32px 0px color-mix(in oklab, oklch(0.7 0.05 240) 15%, transparent);
  --ks-display-weight: 700;
  --background: oklch(0.985 0.000 0);
  --foreground: oklch(0.000 0.000 0);
  --card: oklch(1.000 0.000 0);
  --card-foreground: oklch(0.000 0.000 0);
  --popover: oklch(1.000 0.000 0);
  --popover-foreground: oklch(0.000 0.000 0);
  --primary: oklch(0.704 0.168 243.4);
  --primary-foreground: oklch(1.000 0.000 0);
  --secondary: oklch(0.932 0.040 231.8);
  --secondary-foreground: oklch(0.300 0.010 240);
  --muted: oklch(0.950 0.005 0);
  --muted-foreground: oklch(0.475 0.000 0);
  --accent: oklch(0.887 0.182 95.3);
  --accent-foreground: oklch(0.000 0.000 0);
  --destructive: oklch(0.577 0.215 27.3);
  --border: oklch(0.900 0.005 0);
  --input: oklch(0.950 0.005 0);
  --ring: oklch(0.704 0.168 243.4);
}

.dark {
  --background: oklch(0.150 0.005 240);
  --foreground: oklch(0.985 0.000 0);
  --card: oklch(0.200 0.008 240);
  --card-foreground: oklch(0.985 0.000 0);
  --popover: oklch(0.200 0.008 240);
  --popover-foreground: oklch(0.985 0.000 0);
  --primary: oklch(0.704 0.168 243.4);
  --primary-foreground: oklch(1.000 0.000 0);
  --secondary: oklch(0.250 0.020 230);
  --secondary-foreground: oklch(0.800 0.020 230);
  --muted: oklch(0.250 0.005 240);
  --muted-foreground: oklch(0.600 0.005 240);
  --accent: oklch(0.887 0.182 95.3);
  --accent-foreground: oklch(0.000 0.000 0);
  --destructive: oklch(0.577 0.215 27.3);
  --border: oklch(0.300 0.008 240);
  --input: oklch(0.250 0.008 240);
  --ring: oklch(0.704 0.168 243.4);
}
```

## Golden example (exemplar.html — match this structure and token usage)

```html
<section style="background: var(--background); color: var(--foreground); padding: 6rem 2rem; text-align: center;">
  <h1 style="font-size: 4rem; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 0.5rem;">AI Note Taker <span style="background: var(--accent); color: var(--accent-foreground); padding: 0.1em 0.3em; border-radius: 8px;">without a bot</span></h1>
  <p style="color: var(--muted-foreground); font-size: 1.125rem; margin-bottom: 2rem;">Your meetings, notes, and calendar — powered by AI.</p>
  <div style="display: flex; gap: 1rem; justify-content: center;">
    <a href="#" style="display: inline-block; background: var(--primary); color: var(--primary-foreground); padding: 0.875rem 1.75rem; border-radius: 10px; font-weight: 600; text-decoration: none;">Get started</a>
    <a href="#" style="display: inline-block; background: var(--card); color: var(--foreground); padding: 0.875rem 1.75rem; border-radius: 10px; font-weight: 600; text-decoration: none; border: 1px solid var(--border);">Request a demo</a>
  </div>
</section>
<section style="background: var(--secondary); padding: 4rem 2rem;">
  <div style="max-width: 900px; margin: 0 auto; background: var(--card); border-radius: 16px; padding: 2rem; box-shadow: 0 8px 32px oklch(0.7 0.05 240 / 0.15);">
    <div style="display: grid; grid-template-columns: 200px 1fr; gap: 1rem; min-height: 300px;">
      <div style="border-right: 1px solid var(--border); padding-right: 1rem;">
        <p style="font-weight: 600; font-size: 0.875rem; color: var(--primary); margin: 0 0 0.75rem;">Week Kickoff</p>
        <p style="font-size: 0.8125rem; color: var(--muted-foreground); margin: 0;">amie.so</p>
      </div>
      <div>
        <h3 style="font-size: 1.25rem; font-weight: 600; margin: 0 0 1rem;">Week Kickoff</h3>
        <p style="color: var(--muted-foreground); font-size: 1rem; line-height: 1.6;">Strong MRR growth of 13-18% month-over-month with successful free tier discontinuation.</p>
      </div>
    </div>
  </div>
</section>
```

## Apply

- shadcn project: `npx shadcn@latest add https://web.ggum.uk/styles/r/amie.json` — installs the tokens above into globals.css, then use semantic classes (bg-background, text-primary, …) only.
- other stack: paste the theme.css block above into your global stylesheet and style everything via `var(--…)` references.
- single HTML/artifact: embed the theme.css block in a `<style>` tag and follow the exemplar's markup pattern.
- dark mode: toggle the `.dark` class (both variants are in the tokens above).
- before finishing: re-check every Don't in the Design rules section above against your output.