Amie

name Amie

colors background: "#ffffff" foreground: "#111111" brand: "#ff6363" # Amie Pink/Red muted: "#888888" border: "#f5f5f5" card: "#ffffff" accent: "#7c3aed" # Amie Purple dark: background: "#111111" foreground: "#ffffff" muted: "#666666" border: "#222222" card: "#1a1a1a" accent: "#7c3aed"

typography fontFamily: sans: "Inter, system-ui, -apple-system, sans-serif" body: fontSize: "15px" lineHeight: "1.5" fontWeight: "400" heading: fontWeight: "700" letterSpacing: "-0.01em"

rounded default: "12px" md: "16px" lg: "24px" full: "9999px"

Design System: Amie

Overview

Amie's design system is "The Joyful Productivity App." It is a playful, colorful, and highly approachable environment that blurs the line between a calendar, a to-do list, and a social network.

Design Philosophy

• Productivity as Joy: Rejects the "cold" productivity aesthetic for one that is warm, bouny, and delightful.

• Soft Tactility: Uses large border radii (12px+) and soft background colors to feel friendly and human.

• Vibrant Personality: Integrates emojis, avatars, and playful animations as core parts of the user experience.

• Seamless Integration: Designed to make "scheduling a coffee" feel as easy as sending a message.

Colors

• Amie Pink/Red (#FF6363): A warm, high-energy accent used for the brand logo and primary actions.

• Pastel Palette: Uses a wide range of soft pastels for different task categories and calendar events.

• Clean Grays: Uses very light, warm greys for backgrounds and borders to keep the UI feeling airy.

Typography

• Inter: Provides a stable, readable foundation for the playful UI elements.

• Bold Friendliness: Uses heavy weights for headers and "Success" states to create a confident, positive voice.

Components

• The "Magic" Task Bar: A bottom-anchored, highly-rounded bar that allows for fast task entry and drag-to-calendar.

• User Avatars: Large, colorful circular images with integrated status indicators.

• Event Tiles: Soft, rounded rectangles with integrated emojis and high-contrast text.

Visual Effects

• Bouncy Animations: Uses spring-based motion for dragging tasks and opening menus to reinforce the "joyful" feel.

• Soft Glows: Uses subtle background glows for active tasks or notifications.

• Confetti: Occasional use of celebratory animations for reaching "Inbox Zero" or completing goals.