doxy.me

Overview

doxy.me is a HIPAA-compliant telehealth platform that eliminates friction from virtual care delivery. Designed for healthcare providers and their patients, the system embodies "Clinical Minimalism"—a design philosophy that prioritizes clarity, accessibility, and trust through restrained use of color, generous whitespace, and purposeful typography. The interface evokes the calm professionalism of a modern medical office: clean, organized, and focused entirely on the patient-provider interaction. Every visual element serves a functional purpose, with no decorative flourishes that might distract from the clinical task at hand.

The brand voice is direct, reassuring, and jargon-free. doxy.me speaks to healthcare providers with respect for their time and expertise, and to patients with empathy and clarity. The tone avoids both clinical coldness and false friendliness—instead, it's matter-of-fact and solution-oriented. Example: "Your patients can join from any device. No downloads. No accounts. Just a link." This sentence captures the brand's commitment to simplicity without sacrificing security or compliance.

Colors

The color palette is anchored by a clinical white surface (#ffffff) paired with a sophisticated near-black text color (#232323) for maximum readability and accessibility (WCAG AAA compliant at 16.5:1 contrast). The primary accent is a soft teal (#5fd0c2), used exclusively for call-to-action buttons, active states, and key interactive elements—this color conveys trust, healthcare authority, and calm without the coldness of pure cyan. The secondary accent is a vibrant blue (#0099ff), reserved for links, secondary actions, and status indicators to create visual hierarchy without competing with the primary. Neutral grays (#5e5e5e for secondary text, #e9ecef for subtle containers) provide a refined supporting palette that maintains legibility across all contexts. The surface stack uses near-whi

Typography

The type system uses two complementary font families to balance professionalism with approachability. Suisse Int'l (weights 400–500) serves as the primary typeface for headlines and body text, conveying a refined, European sensibility that signals healthcare expertise. Inter (weights 500–600) is reserved for labels, buttons, and UI microcopy, providing a neutral, highly legible counterpoint that ensures clarity in dense information hierarchies. Display text (58px, weight 450, line-height 68px) is used sparingly for hero headlines like "Secure telehealth. Made simple," where the generous letter-spacing (-0.02em) creates breathing room and emphasizes each word. Body text (16px, weight 400, line-height 24px) is set with 0em letter-spacing to maintain natural readability; on small labels over

Layout

The page layout uses a 12-column grid with a maximum container width of 1220px, centered on the viewport with symmetric margins. The grid is fluid below 1220px and fixed above, ensuring responsive behavior on mobile while maintaining visual stability on desktop. Vertical rhythm is established through a consistent 8px unit system: section spacing uses lg (40px) for major breaks between hero, feature blocks, and footer; card padding uses md (24px) for internal breathing room; and button padding uses sm (12px) for compact, clickable targets. The gutter between grid columns is 24px, providing ample whitespace that prevents the interface from feeling cramped. Horizontal padding on the body is 24px on tablet and 40px on desktop, ensuring content never touches the viewport edge. This spacing phil

Elevation & Depth

Depth is conveyed through a restrained shadow system that mimics the subtle layering of a physical medical chart or clipboard. Level 1 (Base): no shadow; the surface is the ground truth. Level 2 (Standard Cards & Inputs): box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.15) inset—this creates a soft, barely-perceptible lift with an internal highlight that suggests a slightly recessed surface, ideal for input fields and standard cards. Level 3 (Elevated Cards, Modals, Popovers): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15)—a more pronounced shadow that clearly separates th

Shapes

The shape philosophy is "Geometric Precision with Warmth"—rounded corners are used strategically to soften the interface without introducing organic or playful aesthetics. Buttons and primary interactive elements use 8px border-radius (rounded.md), a size that feels intentional and modern without being overly rounded. Cards and containers use 16px border-radius (rounded.lg), creating a subtle frame effect that groups related information. Input fields use 4px border-radius (rounded.DEFAULT), a minimal radius that maintains a technical, form-like appearance appropriate to data entry. Badges and

Components

Action Elements Buttons are the primary call-to-action mechanism. The primary button (button-primary) uses the teal accent (#5fd0c2) background with white text, 8px padding on x-axis and 16px on y-axis, and 8px border-radius. On hover, the background transitions to the primary-container shade (#4cd0b5) over 200ms, providing clear feedback without animation. The secondary button (button-secondary) uses a transparent background with a 1px outline in outline-variant (#d0d0d0) and secondary text color (#0099ff), allowing it to sit quietly next to primary actions. Ghost buttons (button-ghost) have no background or border, using only text color (#232323), and reveal a subtle background on hover (surface-container-high, #e9ecef) to indicate interactivity. All buttons maintain a minimum height

Do's and Don'ts

**Do**

• Do use the primary teal (#5fd0c2) exclusively for call-to-action buttons and active/focus states—this color carries the brand's promise of trust and simplicity.
• Do maintain at least 24px of whitespace (gutter) between major content sections to create visual breathing room and reduce cognitive load.
• Do apply the 200ms ease-out transition timing consistently across all interactive elements (buttons, cards, inputs) to create a cohesive, responsive feel.
• Do use Suisse Int'l for headlines and body text to convey clinical authority; reserve Inter for labels and UI microcopy where maximum legibility is required.
• Do test all color combinations against WCAG AAA contrast standards (7:1 for normal text, 4.5:1 for large text) to ensure accessibility for users with low vision.

**Don't**

• Don't use the secondary blue (#0099ff) for primary CTAs—it's reserved for links and secondary actions to maintain clear visual hierarchy.
• Don't apply shadows with blur radii exceeding 8px or use tinted shadows (e.g., blue or purple shadows)—this breaks the clinical aesthetic and introduces unnecessary visual complexity.
• Don't use border-radius values between 12px and 16px; stick to the defined scale (4px, 8px, 16px, 9999px) to maintain geometric consistency.
• Don't introduce new colors outside the defined palette—the system is intentionally restrained to support clarity and trust in a healthcare context.
• Don't animate transitions with durations shorter than 200ms or longer than 400ms; this range provides responsive feedback without feeling sluggish or over-animated.