AEYE Health

Overview

AEYE Health is a clinical-grade digital health platform delivering FDA-cleared, AI-powered autonomous diagnostic screening for diabetic retinopathy. The design system embodies 'Clinical Minimalism'—a fusion of medical precision and accessible technology that prioritizes clarity, trust, and rapid decision-making. The aesthetic is deliberately restrained: a clean white canvas (surface: #ffffff) anchored by a confident medical-blue primary (#1a7ec0) that signals reliability and clinical authority. The brand personality is expert yet approachable: confident without arrogance, precise without coldness. Every interaction reinforces the core promise: diagnostic screening that is practical, accurate, and accessible to point-of-care providers.

The voice is direct and outcome-focused. Sentences are active, data-driven, and free of marketing hyperbole. Example: 'FDA-cleared AI screening detects diabetic retinopathy in 60 seconds—enabling earlier intervention and better patient outcomes.' Typography uses Comfortaa for headlines (warm, approachable) paired with Arial for body text (clinical, neutral), creating a visual hierarchy that guides users from emotional engagement to functional clarity. The color palette—deep navy (#0a0831) for text, sky blue (#4ea4fb) for secondary actions, and teal accents (#38c5f6) for interactive elements—evokes both medical authority and modern healthcare innovation.

Colors

The color system is built on clinical trust and accessibility. Primary (#1a7ec0) is the signature medical blue used exclusively for primary CTAs ('Book a Demo', 'Contact us'), active states, and key interactive elements. It appears sparingly but decisively—commanding attention without overwhelming. Secondary (#116dff) and its lighter variant (#4ea4fb) support secondary actions and highlight key data points, creating a visual hierarchy that guides users through diagnostic workflows. Tertiary (#140b64) anchors the deep navy text color and is reserved for body copy and structural elements, ensuring legibility at 16px body-md and 18px body-lg sizes. The surface stack is deliberately minimal: white (#ffffff) as the primary canvas, with subtle grays (surface-container-low: #f0f0f0, surface-conta

Typography

The type system balances warmth with clinical precision. Comfortaa (fontFamily: Comfortaa, sans-serif) is used exclusively for display (60px, 700 weight, -0.04em letter-spacing) and headlines (40px–28px, 600 weight), creating an approachable, human-centered entry point that softens the clinical nature of the content. Body text uses Arial (fontFamily: Arial, Helvetica, sans-serif) at 16px (body-md) and 18px (body-lg) with 400 weight and 24–28px line-height, ensuring legibility for users scanning diagnostic information under time pressure. Labels and UI text use DIN Next (fontFamily: DIN Next, sans-serif) at 14px (label-md) and 12px (label-sm) with 600 weight and 0.01–0.05em letter-spacing, reinforcing hierarchy and guiding attention to actionable elements. All body text over busy background

Layout

The page layout uses a 12-column grid with a max-width of 1280px, centered on desktop and fluid on mobile. The gutter is 24px (spacing.md), creating consistent breathing room between sections. Hero sections use full-width imagery with a semi-transparent overlay (rgba(0, 0, 0, 0.3)) to ensure text legibility; the primary CTA ('Book a Demo') is positioned 40px (spacing.lg) from the left edge and 24px from the bottom, anchoring the call-to-action in the lower-left quadrant where users expect to find next steps. Section separation uses 64px (spacing.xl) vertical spacing to create distinct visual chapters; subsections within a section use 40px (spacing.lg). Cards and content containers use 24px (spacing.md) internal padding with 12px (spacing.sm) gaps between nested elements. The container-max-

Elevation & Depth

Depth is conveyed through subtle shadows and layering, never through color darkening or borders alone. The elevation system uses three levels: sm (0 1px 4px rgba(0, 0, 0, 0.06)) for cards and containers at rest, md (0 4px 12px rgba(0, 0, 0, 0.08)) for hover states and elevated containers, and lg (0 16px 40px rgba(0, 0, 0, 0.12)) for modals and overlays. Primary buttons use elevation.sm by default; on hover, they transition to elevation.md with a 200ms ease-out timing, signaling interactivity without jarring the user. Cards use elevation.sm with a 1px solid border at outline-variant (#c4c2d4) t

Shapes

The shape philosophy is 'Clinical Softness'—rounded corners that feel approachable without sacrificing precision. Buttons use rounded.md (8px) to create a friendly, modern appearance while maintaining clear clickability; the 8px radius is large enough to feel contemporary but small enough to avoid appearing childish or unprofessional. Cards and containers use rounded.lg (12px) to create visual distinction from buttons and to suggest containment and focus. Input fields use rounded.DEFAULT (5px) for a subtle, understated appearance that doesn't compete with content. The full-radius (rounded.full

Components

Action Elements Buttons are the primary mechanism for user intent. Primary buttons (button-primary) use backgroundColor: {colors.primary} (#1a7ec0), textColor: {colors.on-primary} (white), rounded: {rounded.md} (8px), padding: 12px 24px, and height: 48px to ensure touch-target compliance (minimum 44px). On hover, the background transitions to primary-fixed-dim (#0d5480) with a 200ms cubic-bezier(0.4, 0, 0.2, 1) ease, creating responsive feedback. On active/pressed, the button receives an inset box-shadow (inset 0 2px 4px rgba(0, 0, 0, 0.2)) to indicate depression. Secondary buttons (button-secondary) use a transparent background with a 2px solid border in primary color, allowing them to sit alongside primary buttons without competing for attention. Links (link) use textColor: {colors.p

Do's and Don'ts

**Do**

• Do use primary (#1a7ec0) exclusively for primary CTAs and active states—never for decorative elements or backgrounds.
• Do maintain minimum 44px touch targets for all interactive elements (buttons, links, inputs) to ensure accessibility on mobile devices.
• Do apply 200ms cubic-bezier(0.4, 0, 0.2, 1) transitions to all interactive state changes (hover, focus, active) for consistent, responsive feedback.
• Do use Comfortaa for headlines and DIN Next for labels to create clear visual hierarchy and guide user attention through diagnostic workflows.
• Do preserve 24px minimum padding around primary CTAs and key interactive elements to reduce cognitive load and signal importance.
• Do use the full spacing scale (xs: 4px, sm: 12px, md: 24px, lg: 40px, xl: 64px) consistently across all components to create predictable, rhythm-based layouts.

**Don't**

• Don't use secondary (#116dff) or tertiary (#140b64) for primary CTAs—these colors are reserved for secondary actions and text hierarchy.
• Don't apply rounded corners larger than 12px to buttons or cards; this dilutes clinical credibility and appears unprofessional in a healthcare context.
• Don't use color alone to convey state changes (e.g., disabled buttons)—always pair color changes with shadow, opacity, or border modifications for accessibility.
• Don't exceed 1280px container width on desktop; wider layouts reduce scanability and increase cognitive load for users reviewing diagnostic information.
• Don't use shadows larger than elevation.lg (0 16px 40px rgba(0, 0, 0, 0.12)) for standard components; excessive shadow depth creates visual clutter.
• Don't apply text-shadow to body text unless it appears over busy backgrounds (e.g., hero imagery); unnecessary shadows reduce legibility and appear dated.