---
version: alpha
name: Amie
description: "Joyful productivity design system built on a cloud-white canvas, a vivid sky-blue accent, Amie Pink warmth, and an Inter-first type scale — playful, rounded, and deeply considered."

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#f5f5f5"          # was rgba(0,0,0,0.05) — flattened over white
  surface-card: "#ebebeb"     # light card / chip surface

  # Ink / text
  ink: "#000000"
  ink-secondary: "#5c5c5c"    # secondary copy, labels
  ink-muted: "#a0a0a0"        # placeholder, disabled, captions
  ink-light: "#cdcdcd"        # faintest divider text / ornament

  # Brand accent — sky blue (primary interactive)
  primary: "#11a8ff"
  primary-hover: "#0e8fd9"
  primary-deep: "#218fcd"
  on-primary: "#ffffff"
  primary-container: "#cfeeff" # was rgb(207,238,255) — blue tint chip / badge bg

  # Brand warmth — Amie Pink (secondary personality color)
  pink: "#f6a6a6"             # --color-amie-pink; decorative, illustration accents
  on-pink: "#000000"

  # Semantic
  success: "#01ca45"

  # Borders & dividers
  border: "#ebebeb"           # hairline panel edges
  border-strong: "#cdcdcd"    # more visible dividers

  # Focus
  focus-ring: "#93c5fd"       # was rgb(147 197 253/0.5) — flattened to opaque pastel

  # Shadow tints
  shadow-soft: "#000000"      # used at very low opacity; opaque token for reference

typography:
  display-hero:
    fontFamily: "Inter, Inter Fallback, ui-sans-serif, system-ui, sans-serif"
    fontSize: 56px
    fontWeight: 700
    lineHeight: 1.14
    letterSpacing: -0.7px
  display:
    fontFamily: "Inter, Inter Fallback, ui-sans-serif, system-ui, sans-serif"
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: -0.5px
  heading-section:
    fontFamily: "Inter, Inter Fallback, ui-sans-serif, system-ui, sans-serif"
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1.25
    letterSpacing: -0.3px
  heading-sub:
    fontFamily: "Inter, Inter Fallback, ui-sans-serif, system-ui, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: -0.5px
  body-large:
    fontFamily: "Inter, Inter Fallback, ui-sans-serif, system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body:
    fontFamily: "Inter, Inter Fallback, ui-sans-serif, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.75
    letterSpacing: -0.003px
  body-medium:
    fontFamily: "Inter, Inter Fallback, ui-sans-serif, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.75
    letterSpacing: -0.003px
  nav-link:
    fontFamily: "Inter, Inter Fallback, ui-sans-serif, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.6
    letterSpacing: -0.2px
  button-ui:
    fontFamily: "Inter, Inter Fallback, ui-sans-serif, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: 0px
  caption:
    fontFamily: "Inter, Inter Fallback, ui-sans-serif, system-ui, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.32
    letterSpacing: -0.003px

spacing:
  2xs: 2px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  2xl: 24px
  3xl: 32px
  4xl: 48px
  5xl: 64px
  6xl: 96px

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 16px
  2xl: 32px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.lg}"
    padding: 12px 20px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
  button-primary-focus:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    outline: "2px solid {colors.focus-ring}"
    outlineOffset: "2px"

  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.lg}"
    padding: 12px 20px
    border: "1px solid {colors.border-strong}"
  button-secondary-hover:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.ink}"

  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.body-medium}"
    rounded: "{rounded.md}"
    padding: 8px 12px
  button-ghost-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

  card:
    backgroundColor: "{colors.background}"
    rounded: "{rounded.xl}"
    padding: 24px
    border: "1px solid {colors.border}"
    shadow: "0 1px 3px rgba(0,0,0,0.06)"
  card-hover:
    shadow: "0 3px 8px rgba(0,0,0,0.1)"

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    placeholderColor: "{colors.ink-muted}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 10px 12px
    border: "1px solid {colors.border-strong}"
    shadow: "inset 0 0 0 1px rgba(0,0,0,0.05)"
  input-focus:
    border: "1px solid {colors.primary}"
    shadow: "inset 0 0 0 1px {colors.primary}"

  badge:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.primary-deep}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 10px

  badge-pink:
    backgroundColor: "{colors.pink}"
    textColor: "{colors.on-pink}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 10px

  nav:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.nav-link}"
    padding: 12px 24px
    border: "1px solid {colors.border}"

  chip:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
    border: "1px solid {colors.border-strong}"
  chip-active:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    border: "none"
---

# Amie Design System

## Overview

Amie opens on pure white — not the soft-grey warmth of a productivity app hedging its bets, but a confident, clean `{colors.background}` that says joy begins with clarity. Against that canvas, a single vivid `{colors.primary}` sky blue commands every CTA, every interactive affordance, every moment that matters. The blue is generous and saturated enough to feel genuinely alive without tipping into aggression. Resting beneath it like a blush is `{colors.pink}` — the `--color-amie-pink` custom property the team named directly — a peachy-rose warmth reserved for illustration moments, decorative touches, and the emotional punctuation that turns a to-do app into something you actually want to open.

The type system is entirely Inter, self-hosted in variable-font form, which lets Amie dial weight with precision: 700 at the hero, 600 at nav and button labels, 400 in the body copy that needs to disappear while you read. Tight negative tracking at display sizes (-0.7px at 56px) gives headings a composed, editorial authority — you feel the care. Letterspacing loosens at body scale, respecting readability over aesthetics.

Shapes are the second major personality signal. Amie commits to rounded corners throughout — 12px on most interactive elements, 9999px pills on badges and chips, a generous 16-32px arc on feature cards. Nothing is sharply rectangular. The rounded vocabulary creates the same visual warmth as a well-designed iOS app, which makes sense: Amie began as a native Mac and iOS calendar, and the rounded-rect language carried directly into the web presence. Motion is quick and purposeful: 150ms micro-interactions on buttons and cards, 300ms for larger surface transitions, all following `cubic-bezier(0.4, 0, 0.2, 1)` — the same curve Google Material uses, chosen for its snappy-without-jarring feel. A slow `scrollX` marquee (70s linear) keeps the social-proof ticker effortlessly alive.

**Key Characteristics:**
- Pure `{colors.background}` white canvas — no tinted base, no grey warmth, maximum contrast headroom
- Single dominant accent: `{colors.primary}` sky blue for all primary CTAs, links, and focus states
- Named brand color `{colors.pink}` (`--color-amie-pink`) for illustration and emotional warmth
- `{typography.display-hero}` at 56px/700 with -0.7px tracking — composed, not heavy
- Inter variable font self-hosted; full weight range 400–700 in active use
- Rounded-rect shape vocabulary: `{rounded.lg}` (12px) as the default interactive radius
- Pill radius `{rounded.pill}` on badges, chips, and select button variants
- 8px-based spacing grid; 12px as the practical density default for dense UI
- Shadows are ultra-subtle — 1px inset strokes do the structural work, not drop shadows
- Two-gradient system: `{colors.primary}` to light-blue diagonal for hero moments
- Motion at 150ms/300ms with `cubic-bezier(0.4, 0, 0.2, 1)`; 70s marquee for social proof
- Radix UI + shadcn/ui component foundation; Tailwind CSS with arbitrary values for layout

## Colors

### Primary Surface
- **White** (`{colors.background}`): The core canvas — used for page backgrounds, card interiors, and input fields. Its cleanliness is non-negotiable; Amie never muddies the base.
- **Light Grey** (`{colors.surface}`): The subtle one-step-up surface for hover backgrounds, secondary panels, and chip containers.
- **Mid Grey** (`{colors.surface-card}`): Card chip and selected state backgrounds; provides just enough lift without shadow.

### Brand Accent
- **Sky Blue** (`{colors.primary}`): Amie's signature — every primary button, interactive link, focus indicator, and branded moment. Applied with confidence; never diluted.
- **Blue Hover** (`{colors.primary-hover}`): A slightly deeper blue for hover and pressed states on primary elements.
- **Blue Container** (`{colors.primary-container}`): The pastel tint for badges, tag chips, and informational callouts that need the blue family without full saturation.
- **Amie Pink** (`{colors.pink}`): The warmth counterpoint — decorative, never dominant. Used in illustrations, mascot moments, and soft accent details.

### Text States
- **Ink** (`{colors.ink}`): Pure black for all primary headings, body copy, and high-emphasis labels.
- **Ink Secondary** (`{colors.ink-secondary}`): Mid-grey for supporting copy, nav links in their default state, and secondary labels.
- **Ink Muted** (`{colors.ink-muted}`): Placeholder text, disabled states, and the lightest captions.
- **Ink Light** (`{colors.ink-light}`): The barely-there ornamental grey for divider text and fine details.

### Borders & Semantic
- **Border** (`{colors.border}`): Hairline edges on cards and inputs; present enough to define containment, invisible enough not to clutter.
- **Border Strong** (`{colors.border-strong}`): More visible dividers and input rings in their default state.
- **Success** (`{colors.success}`): Vivid green for task-completion moments, confirmations, and positive status indicators.
- **Focus Ring** (`{colors.focus-ring}`): A sky-blue pastel ring — opaque approximation of the `--tw-ring-color` at 50% opacity, flattened for token compatibility.

## Typography

### Font Family
- **Primary**: `Inter`, variable-font version (`Inter var`), self-hosted. Fallbacks: `Inter Fallback, ui-sans-serif, system-ui, sans-serif`.
- Inter is the sole typeface; no display or serif counterpart. The full weight axis (400–700) does all the hierarchy work.
- **OpenType features**: Variable font axes give Amie optical-size precision without loading multiple font files.

### Hierarchy

The complete type scale is declared in the `typography:` token block above. Use those tokens directly via reference (`{typography.display-hero}`, `{typography.body}`) rather than restating values.

| Token | Use |
|---|---|
| `display-hero` | Primary page hero headline; 56px/700/-0.7px tracking |
| `display` | Section-level major statements; 40px/700 |
| `heading-section` | Feature section titles; 28px/700 |
| `heading-sub` | Card and panel headings; 20px/600 |
| `body-large` | Intro paragraphs and feature descriptions; 18px/400 |
| `body` | Standard body copy; 16px/400 |
| `body-medium` | Emphasis body and ghost button labels; 16px/500 |
| `nav-link` | Navigation items and text CTAs; 16px/600 |
| `button-ui` | All button labels; 16px/600, tight leading |
| `caption` | Badges, chips, metadata, timestamps; 12px/500 |

### Principles
- Weight does the hierarchy work — no font swapping, no italic flourishes, no display faces
- Negative tracking at large sizes (-0.7px at 56px) reads as intentional craft, not a template default
- Body copy tracks nearly flat (−0.003px) to stay neutral and fast to read
- 700 weight is reserved for headlines; 600 for interactive labels; 400-500 for reading copy
- Line height opens generously at body scale (1.75) to give the app a breathing, spacious feel

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 4px, with 12px as the practical density anchor.

Amie's spacing is tighter than a typical marketing site — the 12px base `{spacing.md}` reflects a product that must fit calendar events, task rows, and UI chrome into comfortable density. Generous whitespace appears selectively at the macro level (section padding uses 48–96px), while micro-UI stays compact.

### Grid & Container
- Max content width: 1280px
- Responsive grid collapses from 5-column (1536px+) through 2-column (768px) to single-column (640px and below)
- Sections alternate full-bleed background moments with centered, max-width content columns
- Feature sections use 192px padding-top on some hero blocks for generous vertical breathing

### Whitespace Philosophy
- Micro-UI is compact: 12–20px between related elements keeps the calendar/task UI dense without crowding
- Section rhythm is generous: 64–96px vertical gaps between major content blocks create clear chapter breaks
- Cards and panels use consistent 24px internal padding for comfortable content containment

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Default page surface, background sections |
| Hairline (Level 1) | `inset 0 0 0 1px rgba(0,0,0,0.05)` | Input fields, ghost cards, default button strokes |
| Card (Level 2) | `0 0 0 1px rgba(0,0,0,0.06), 0 1px 1px rgba(0,0,0,0.06)` | Elevated panels, feature cards |
| Raised (Level 3) | `0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.1)` | Dropdowns, popovers, floating toolbars |
| Dialog (Level 4+) | Larger layered shadow | Modal sheets, overlay panels |
| Focus Ring | `0 0 0 2px {colors.focus-ring}` | All interactive focus states; sky-blue pastel ring |

**Shadow Philosophy**: Amie treats shadow as a structural whisper rather than a depth statement. The dominant technique is the 1px inset ring — a single-pixel stroke drawn inside the element — which creates crisp containment without any blur-radius softness. When genuine elevation is needed (dropdowns, modals), a three-layer subtle shadow stacks very low-opacity blurs. The net effect is a UI that feels light, crisp, and native-software-quality rather than web-heavy.

## Shapes

The complete radius scale is in the `rounded:` token block above. The system uses:

| Token | Value | Use |
|---|---|---|
| `sm` | 4px | Micro-elements: inline tags, small indicators, corner trims |
| `md` | 8px | Inputs, secondary buttons, small image frames |
| `lg` | 12px | Primary buttons, navigation items, key interactive elements |
| `xl` | 16px | Feature cards, panel containers, modal dialogs |
| `2xl` | 32px | Hero image frames, large decorative containers |
| `pill` | 9999px | Badges, chips, tag filters, pill-style buttons |

Amie's radius vocabulary communicates "designed with care." No element is sharply rectangular — even at 4px, there's a subtle softening. The jump from `{rounded.lg}` (buttons) to `{rounded.xl}` (cards) to `{rounded.pill}` (badges) creates a clear visual hierarchy where the most interactive and smallest elements feel most approachable.

## Components

The complete component spec lives in the `components:` token block above. Reference component tokens directly (`{components.button-primary}`, `{components.card}`) rather than reconstructing them.

### Button Variants

- **`button-primary`** — `{colors.primary}` sky blue fill, white label, `{rounded.lg}` corners, 12px/20px padding. Amie's single most important visual. Apply only to the primary action per context.
- **`button-secondary`** — `{colors.surface}` background, `{colors.border-strong}` 1px stroke, dark label. Used for secondary actions and destructive confirmations.
- **`button-ghost`** — Transparent, `{colors.ink-secondary}` label, `{rounded.md}` corners. Navigation-adjacent actions, tertiary CTAs, dismiss triggers.

### Cards
Cards use `{rounded.xl}` (16px) with a `{colors.border}` hairline and a Level 2 shadow. Internal padding is consistently 24px. Feature showcase cards on the homepage use larger `{rounded.2xl}` frames for hero imagery and app screenshots.

### Inputs
Standard inputs use `{rounded.md}` (8px) with a `{colors.border-strong}` default ring and an inset `rgba(0,0,0,0.05)` shadow for definition. On focus, the ring transitions to `{colors.primary}` — the sky blue takes over cleanly, no secondary glow needed.

### Badges / Tags
Badges use `{rounded.pill}` and come in two flavors: the `{colors.primary-container}` blue-tint version for feature labels and plan tiers, and the `{colors.pink}` version for brand-warm decorative moments. Both use `{typography.caption}` at 12px/500 with 4px/10px padding.

### Navigation
Top navigation has a `{colors.background}` surface with a `{colors.border}` bottom hairline. Nav links use `{typography.nav-link}` at 16px/600; on hover they shift toward `{colors.primary}`. The nav transitions to 150ms `cubic-bezier(0.4, 0, 0.2, 1)` on color and background.

## Do's and Don'ts

### Do
- Use `{colors.primary}` exclusively for the single most important action per screen — its sky-blue stamp quality depends on scarcity
- Use `{rounded.lg}` (12px) as your default button radius; switch to `{rounded.pill}` only for badges and chip-filters
- Apply `{typography.display-hero}` with negative tracking (-0.7px) at full 56px; at smaller sizes, relax tracking to -0.3px or less
- Reach for `{colors.pink}` only in decorative and illustration contexts — it is a warmth signal, not a functional accent
- Keep shadows ultra-subtle — prefer the 1px inset ring over blur-radius shadows for card definition
- Maintain the 8-step spacing scale; mix from `{spacing.md}` (12px) for dense product UI and `{spacing.4xl}` (48px) for section rhythm
- Use Inter 700 for all display and section headings; reserve 600 for interactive labels and 400–500 for body reading
- Honor the two-tone gradient `{colors.primary}` → `{colors.primary-container}` for hero decorative moments; keep it diagonal

### Don't
- Don't use `{colors.primary}` for decorative fills, icons, or non-interactive emphasis — it loses its CTA signal
- Don't introduce mid-range radii between `{rounded.xl}` (16px) and `{rounded.2xl}` (32px) — the step is intentional
- Don't add drop shadows with opacity above 0.1 — Amie's elevation lives in hairline strokes, not blur-heavy depth
- Don't use `{colors.pink}` on interactive elements (buttons, links, focus states) — it reads as decorative, not clickable
- Don't mix type weights arbitrarily; the 400/500/600/700 ladder is the entire hierarchy — resist adding 300 or 800
- Don't use `{colors.ink-light}` (`{colors.ink-light}`) for any copy intended to be read — it exists only for ornament
- Don't apply full-bleed colour backgrounds without returning to `{colors.background}` white as the default canvas
- Don't deviate from the 150ms/300ms motion cadence — faster feels rushed; slower feels broken in a productivity tool

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <640px | Single column; nav collapses to hamburger; hero type reduces to ~36px |
| Mobile | 640–768px | Single column; feature grids collapse to 1-up; padding tightens |
| Tablet | 768–1024px | 2-column feature grids; navigation expands; hero type at ~44px |
| Desktop | 1024–1280px | Full feature grids; 3–4 columns; hero at full 56px scale |
| Large Desktop | >1280px | Content max-width locks at 1280px; 5-column option up to 1536px+ |

### Touch Targets
- All interactive elements maintain minimum 44px touch target height on mobile
- Pill badges and chips get expanded tap areas via padding even when visually compact
- Navigation links expand to full-width touch targets on mobile

### Collapsing Strategy
- Primary hero collapses from large centered layout to stacked single-column
- Feature showcase sections drop from 2–3 column grids to 1-column stacks
- The social-proof marquee (`scrollX` 70s) runs at all breakpoints — it is a brand moment, not collapsible content
- Navigation transitions from inline links to a compact mobile menu below 768px

### Image Behavior
- App screenshots and illustrations are `object-fit: cover` with fixed aspect ratios maintained
- Next.js image optimization serves appropriately sized assets per breakpoint
- Hero images scale fluidly; feature card images maintain consistent 16:9 or 4:3 crops

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}`
- Text: `{colors.ink}`
- Brand accent: `{colors.primary}`
- Secondary text: `{colors.ink-secondary}`
- Border: `{colors.border}`
- CTA: `{colors.primary}`
- Warmth accent: `{colors.pink}`

### Example Component Prompts

- "Build an Amie-style primary CTA button: background `{colors.primary}`, white text using `{typography.button-ui}` (Inter 16px/600), `{rounded.lg}` corners (12px), 12px top/bottom and 20px left/right padding. On hover: background shifts to `{colors.primary-hover}`. On focus: 2px `{colors.focus-ring}` outline with 2px offset."

- "Create an Amie feature card: white `{colors.background}` background, `{rounded.xl}` corners (16px), 24px internal padding, a `{colors.border}` 1px hairline border, and a `0 1px 3px rgba(0,0,0,0.06)` shadow. Heading in `{typography.heading-sub}` (Inter 20px/600), body in `{typography.body}` (Inter 16px/400, `{colors.ink-secondary}`)."

- "Design an Amie badge/tag chip: `{colors.primary-container}` background, `{colors.primary-deep}` text, `{typography.caption}` (Inter 12px/500), `{rounded.pill}` corners, 4px/10px padding. For warm brand moments, swap to `{colors.pink}` background with `{colors.on-pink}` text."

- "Build an Amie navigation bar: `{colors.background}` surface, a `{colors.border}` 1px bottom hairline. Nav links use `{typography.nav-link}` (Inter 16px/600) in `{colors.ink-secondary}`; on hover transition to `{colors.primary}` in 150ms with `cubic-bezier(0.4, 0, 0.2, 1)`. Primary CTA uses `{components.button-primary}` pinned to the right."

- "Render an Amie hero section: `{colors.background}` canvas, headline in `{typography.display-hero}` (Inter 56px/700, -0.7px tracking, `{colors.ink}`), subheadline in `{typography.body-large}` (Inter 18px/400, `{colors.ink-secondary}`). Add a diagonal gradient decoration from `{colors.primary}` to `{colors.primary-container}` as a background bleed. Primary CTA as `{components.button-primary}`, secondary as `{components.button-secondary}`."

- "Create an Amie form input: `{colors.background}` fill, `{colors.border-strong}` 1px ring, `inset 0 0 0 1px rgba(0,0,0,0.05)` inner shadow for depth, `{rounded.md}` corners (8px), 10px/12px padding, placeholder in `{colors.ink-muted}`. On focus: ring transitions to `{colors.primary}` at 150ms."

### Iteration Guide

1. Start with `{colors.background}` white — never add a tinted base; all softness comes from surface elevations (`{colors.surface}`, `{colors.surface-card}`)
2. Place `{colors.primary}` on exactly one primary CTA per screen; it is the signal color — scarcity preserves its power
3. Apply `{typography.display-hero}` with -0.7px tracking at 56px; loosen tracking as size decreases; use 700 for all headlines
4. Build elevation through 1px hairline rings before reaching for drop shadows; keep any shadow opacity at or below 0.1
5. Round everything: `{rounded.lg}` for interactive elements, `{rounded.xl}` for containers, `{rounded.pill}` for chips and badges
6. Use `{spacing.md}` (12px) as your dense-UI baseline; step up to `{spacing.4xl}` (48px) for section breathing room
7. Accent with `{colors.pink}` only in illustration and decorative contexts — it signals delight, not action

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Amie. Brand names and trademarks belong to their respective owners.