Amie

Amie feels like a well-lit productivity workspace — bright white surfaces, almost clinical in their restraint, punctuated by a single electric sky-blue (#11a8ff) that fires only when action is required. The page is overwhelmingly neutral — 98% achromatic — making every chromatic moment (the amber highlight on 'without a bot', the green calendar icon, the violet tag) feel intentional rather than decorative. Inter at tight negative letter-spacing (-0.025em at display sizes) condenses headlines into confident blocks without weight extremes — weight 700 at 56px reads assertive but not aggressive. Cards use hairline 1px borders via layered near-invisible shadows rather than visible strokes, giving product UI previews the appearance of floating slightly off the page. The ghost 'Request a demo' button beside the filled CTA creates a paired choice architecture that recurs throughout the page. Use #11a8ff exclusively for filled CTA buttons — no other UI element gets a chromatic fill color Apply letter-spacing -1.40px at 56px and -0.48px at 40px for all display and section headings using Inter Render card borders via 3-layer shadow stack (rgba(0,0,0,0.06) 0px 0px 0px 1px ...) rather than explicit border-color properties Use 9999px radius for all tag/pill/chip components and category labels; use 12px for cards and primary buttons Highlight key statistics or phrases inline with #fbefaf background at the span level — apply only once per hero to preserve impact Maintain grayscale(1) filter on partner/social proof logos and product screenshots in secondary contexts Keep category accent colors (#01ca45, #a050ff) to border-only usage on tags — never fill a UI surface with them Never add a second chromatic action color — #11a8ff is the only CTA fill; competing colors collapse the hierarchy Do not use weight below 400 for body text or above 700 for any text — the weight range 400–700 is the entire system Avoid explicit border declarations for cards — the shadow-as-border technique (0.06 opacity ring) is what keeps surfaces integrated, not separated Never use #a0a0a0 or #5c5c5c for headings — these are strictly secondary body and label colors Do not center-align body paragraphs — left-aligned text with 16px subheading baseline is the consistent content pattern Avoid gradients in UI components — the sky gradient (#cfeeff → #41baff) is decorative-only behind highlighted phrases, not a button or card treatment Do not apply backdrop-filter blur outside the navigation bar — it appears only on the sticky nav at scroll