Optivate

Overview

Optivate is a clinical-first EHR platform purpose-built for ophthalmology practices. The design system embodies 'Clinical Clarity'—a philosophy that prioritizes information hierarchy, task-focused workflows, and confidence-building visual language over decorative elements. The brand serves practices of all sizes and subspecialties, transforming complex clinical, operational, and financial data into intuitive, scannable interfaces. The aesthetic is 'Professional Minimalism with Precision Accents': a clean white canvas (rgb(255, 255, 255)) anchored by a deep navy primary (rgb(21, 30, 73)) for authority and trust, with vibrant secondary and tertiary accents (rgb(24, 99, 220) and rgb(50, 230, 215)) that signal actionable moments and clinical insights. The emotional response is calm competence—users feel in control, never overwhelmed.

Optivate's voice is direct, precise, and outcome-focused. The brand avoids jargon when possible, but embraces clinical terminology when it serves clarity. Tone is confident without being prescriptive; the platform enables practices to work their way, not Optivate's way. Example sentence in brand voice: 'Every workflow, feature, and service is designed around the clinical, operational, and financial realities of ophthalmology.'

Colors

The color system is built on a foundation of trust and clarity. Primary (rgb(21, 30, 73), #151e49) is the deep navy used for headings, primary CTAs ('Get Started'), and key interactive states—it conveys authority and clinical precision. Secondary (rgb(24, 99, 220), #1863dc) is a vibrant medical blue deployed on secondary buttons, links, and form focus states; it signals interactivity without competing with primary. Tertiary (rgb(50, 230, 215), #32e6d7) is a cyan accent reserved for highlights, status indicators, and data visualization accents—it draws attention to clinical insights. The surface stack is pure white (rgb(255, 255, 255)) for the base, with subtle grays (rgb(244, 244, 244) for -dim, rgb(235, 235, 240) for -container) for layering and depth without darkness. On-surface text is

Typography

The type system pairs Albert Sans (a geometric, modern sans-serif) for headings and labels with Inter (a humanist sans-serif) for body copy. This pairing creates visual hierarchy while maintaining readability at all sizes. Display (64px, 600 weight, -0.02em tracking) is reserved for page titles like 'Who We Serve'; Headline-lg (40px, 600 weight) for section headers; Headline-md (28px, 600 weight) for subsections. Body-lg (18px, 400 weight, 28px line-height) is used for hero copy and introductory paragraphs; Body-md (16px, 400 weight, 24px line-height) for standard body text and descriptions. Label-md (14px, 500 weight, Albert Sans) is applied to buttons, form labels, and navigation; Label-sm (12px, 500 weight, Inter) for metadata, timestamps, and helper text. All headings use -0.01em to -0

Layout

The layout system uses a 12-column grid with a max-width of 1280px, centered on the viewport. The page rhythm is built on a 24px gutter (md spacing) for section separation and 40px (lg spacing) for major section breaks. Hero sections use full-width backgrounds with centered content containers; card grids typically span 3–4 columns per card on desktop, 2 columns on tablet, 1 on mobile. White-space is generous: sections breathe with 40–64px vertical padding (lg to xl spacing), and internal card padding is 24px (md spacing) to prevent cognitive overload. The container-max-width of 1280px ensures content never stretches beyond comfortable reading width. Margins between elements follow the spacing scale: xs (4px) for inline spacing, sm (12px) for tight grouping, md (24px) for related content bl

Elevation & Depth

Depth is achieved through subtle layering and precise shadows, never through darkness. The elevation system uses three levels: Level 1 (Base) has no shadow—surfaces sit flush on the white background. Level 2 (Cards, Inputs) uses box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06)—a soft, 1px lift that defines the surface without visual drama. Level 3 (Modals, Dropdowns, Hover States) uses box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08)—a 4px blur spread that creates clear separation. All surfaces include a 1px solid border at rgba(0, 0, 0, 0.08) to define edges crisply. On hover, cards transition from Level

Shapes

The shape philosophy is 'Precision with Approachability'—sharp enough to feel professional, rounded enough to feel human. Buttons use 6.406px (md rounded, 0.75rem) for a subtle, modern curve that avoids both hard corners and excessive roundness. Cards and containers use 16px (lg rounded, 1rem) for a more generous radius that softens the interface without sacrificing clarity. Inputs and form fields use 2px (DEFAULT rounded, 0.5rem) for a minimal, technical appearance that signals data entry. Badges and pills use 50% (full rounded) for a classic, contained look. The rationale: smaller radii (2–6

Components

Action Elements Buttons are the primary interaction pattern. Button-primary (background: rgb(21, 30, 73), padding: 11px 14px, height: 44px, border-radius: 6.406px) is used for primary CTAs like 'Get Started' and critical actions. On hover, the background darkens to rgb(0, 26, 179) with a 200ms transition. Button-secondary (background: rgb(24, 99, 220), padding: 8px 12px, height: 40px, border-radius: 2px) is used for secondary actions and form submissions; it uses the same hover transition. Button-tertiary (background: transparent, border: 1px solid {colors.outline}, padding: 11px 14px) is used for low-priority actions like 'Cancel' or 'Learn More'; on hover, it gains a light background (rgb(235, 235, 240)) and the border darkens to primary. All buttons use Albert Sans at 14px, 500 weig

Do's and Don'ts

**Do**

• Do use primary (rgb(21, 30, 73)) for headings, primary CTAs, and key interactive states—it establishes authority and guides the eye.
• Do apply generous white-space (40–64px vertical padding) between sections to prevent cognitive overload and support clinical clarity.
• Do use Albert Sans for all headings and labels to create visual hierarchy; reserve Inter for body copy and metadata.
• Do apply subtle shadows (0 1px 2px rgba(0, 0, 0, 0.06) for cards, 0 4px 12px rgba(0, 0, 0, 0.08) on hover) to define depth without visual drama.
• Do use secondary (rgb(24, 99, 220)) for form focus states and secondary buttons to signal interactivity without competing with primary.
• Do include a 1px border at rgba(0, 0, 0, 0.08) on all surfaces to define edges crisply and maintain visual clarity.

**Don't**

• Don't use primary for body text or backgrounds—it's reserved for headings and CTAs. Use on-surface (rgb(33, 37, 41)) for body copy.
• Don't apply rounded corners larger than 16px to buttons or inputs; use 6.406px for buttons and 2px for inputs to maintain precision.
• Don't use tertiary (rgb(50, 230, 215)) as a primary accent; it's reserved for highlights and status indicators only.
• Don't apply shadows larger than 0 4px 12px rgba(0, 0, 0, 0.08)—deeper shadows create visual clutter and undermine clinical clarity.
• Don't mix font families within a single heading or label; Albert Sans is for headings/labels, Inter is for body/metadata.
• Don't reduce padding below 12px (sm spacing) on cards or containers; white-space is essential to the clinical clarity aesthetic.