MillieAI

Overview

MillieAI is a conversational AI voice assistant platform designed for UK businesses seeking 24/7 customer service automation. The design system embodies a "Tech-Forward Clarity" aesthetic—combining vibrant, saturated blue gradients (#010dc1 primary, #1f39fe secondary, #581ffe tertiary) with clean white surfaces and precise typography. The visual language conveys intelligence, reliability, and approachability: the bold primary blue (#010dc1) appears on all CTAs and interactive elements, signaling action and trust, while the gradient-rich hero sections (featuring flowing wave animations in blue-to-purple transitions) evoke motion and sophistication. The brand personality is confident yet accessible: voice is direct, jargon-free, and outcome-focused. Example sentence: "Millie answers your calls instantly—no hold times, no scripts, just natural conversation that converts."

Colors

The color system is built on a vibrant blue foundation with supporting gradients and a clean white surface stack. Primary (#010dc1) is the signature accent used exclusively on CTAs, focus states, and brand-critical interactive elements—it commands attention without overwhelming. Secondary (#3b82f6) and Tertiary (#002fae) provide depth in gradients and supporting UI patterns. The surface stack ranges from pure white (#ffffff) at the brightest level through subtle grays (#f8f9fe, #f4f9fe, #e9ecef) for container hierarchy, ensuring readability and visual separation. On-surface text is pure black (#000000) for maximum contrast and accessibility (WCAG AAA compliant at 16px body text). The outline color (#6c757d) is used for borders and dividers, maintaining visual coherence without competing wi

Typography

The type system uses Assistant (Google Fonts, weights 200–800) as the single typeface family, establishing visual consistency across all scales. Display (56px, weight 700, -0.02em letter-spacing) anchors hero sections with commanding presence; Headline-lg (48px, weight 600) is reserved for major section titles; Headline-md (32px, weight 600) structures subsections; Title-lg (24px, weight 600) marks card headers and modal titles. Body-lg (18px, weight 400, 28px line-height) is used for hero copy and feature descriptions, while Body-md (16px, weight 400, 24px line-height) serves as the default paragraph text. Label-md (14px, weight 600, 0.01em letter-spacing) is applied to button text, form labels, and navigation items; Label-sm (12px, weight 500, 0.02em letter-spacing) is reserved for badge

Layout

The layout system uses a 12-column grid with a maximum container width of 1280px, ensuring responsive scaling from mobile (single column) to desktop (full grid). The spacing scale is semantic: unit (8px) is the base increment; xs (4px) and sm (12px) are used for tight component spacing; md (24px) is the default gutter and padding for cards/sections; lg (40px) separates major sections; xl (64px) is reserved for hero-to-content transitions. White-space is generous—sections are separated by lg (40px) minimum, and card padding is consistently md (24px) on all sides. The hero section uses full-width layout with centered content (max-width: 1280px, margin: 0 auto) and a decorative wave graphic that spans edge-to-edge, creating visual drama while maintaining content readability. Navigation and he

Elevation & Depth

Depth is conveyed through a subtle shadow hierarchy and layering strategy, avoiding heavy drop shadows in favor of refined, directional lighting. Level 1 (Base/Cards): box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), used on standard cards and contained elements—this creates minimal separation from the surface. Level 2 (Hover/Interactive): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), applied on button hover, card hover, and modal overlays—this signals interactivity and elevation. Level 3 (Modals/Dropdowns): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), reserved for floating panels, dropdowns, and full-s

Shapes

The shape philosophy is "Geometric Precision with Approachability"—combining sharp, technical corners on buttons and inputs with softer radii on cards and containers. Buttons use rounded.lg (1rem / 16px) for a modern, slightly rounded appearance that feels contemporary without being overly soft. Cards and containers use rounded.xl (1.5rem / 24px) to create a more inviting, approachable aesthetic—this radius is large enough to feel friendly but not so large as to appear cartoonish. Input fields use rounded.DEFAULT (0.5rem / 8px) for a compact, functional appearance that signals form-like utilit

Components

Action Elements Buttons are the primary call-to-action mechanism. Button-primary uses backgroundColor: {colors.primary} (#010dc1), textColor: {colors.on-primary} (white), padding: 12px 24px, height: 48px, and rounded.lg (16px). On hover, transition to button-primary-hover with backgroundColor: {colors.primary-container} (#1f39fe) over 200ms cubic-bezier(0.4, 0, 0.2, 1). On active/pressed, use button-primary-active with backgroundColor: {colors.tertiary} (#002fae). Button-secondary is transparent with a 2px solid border in primary color, textColor: {colors.primary}, and the same padding/height as primary. On hover, apply backgroundColor: {colors.surface-container-high} (#e9ecef). All buttons include boxShadow: {elevation.md} (0 3px 8px rgba(0, 0, 0, 0.15)) to lift them from the surface

Do's and Don'ts

**Do**

• Do use primary (#010dc1) exclusively on CTAs, focus states, and brand-critical interactive elements—never use it for backgrounds or neutral UI.
• Do maintain the 12-column grid and 1280px max-width container for consistent, responsive layouts across all screen sizes.
• Do apply the full shadow hierarchy (sm/md/lg) to create clear depth: cards at sm, hover states at md, modals at lg.
• Do use Assistant font family at weights 400 (body), 600 (labels/headings), and 700 (display) to maintain visual hierarchy without introducing new typefaces.
• Do space sections with lg (40px) minimum and card padding with md (24px) to create generous, scannable layouts.
• Do apply focus states with 3px inset shadow in primary color (0 0 0 3px rgba(1, 13, 193, 0.1)) for keyboard accessibility.

**Don't**

• Don't use secondary (#3b82f6) or tertiary (#002fae) on primary CTAs—reserve these for gradients, supporting UI, and secondary actions.
• Don't apply shadows heavier than lg (0 8px 24px rgba(0, 0, 0, 0.12))—excessive shadows create visual clutter and reduce perceived lightness.
• Don't use border-radius smaller than sm (4px) on interactive elements; minimum 8px (DEFAULT) for inputs, 16px (lg) for buttons maintains modern, approachable aesthetic.
• Don't mix typefaces—Assistant is the single family; use weight and size variation, never introduce serif or alternative sans-serif fonts.
• Don't reduce padding below sm (12px) on cards or containers; generous spacing is core to the brand's clean, premium aesthetic.
• Don't use pure black (#000000) text on primary (#010dc1) backgrounds—always use on-primary (white) for sufficient contrast and readability.