X-RayVision

Overview

X-RayVision is a secure teleradiology platform designed for medical professionals who require precision, reliability, and speed in remote imaging interpretation. The design system embodies 'Clinical Minimalism'—a philosophy that strips away unnecessary visual noise while maintaining the visual hierarchy and trust signals essential to healthcare technology. The interface prioritizes clarity through a neutral, professional color palette anchored by deep navy (#0f1729) and accented with clinical blue (#3b82f6), creating an environment where radiologists can focus entirely on diagnostic tasks. The brand voice is authoritative yet approachable: direct, jargon-aware, and outcome-focused. Example: 'Your radiologists, matched to the right patient—faster diagnosis, faster patient care.'

Colors

The color system is built on a clinical-neutral foundation with strategic accent colors that signal interactivity and status. Primary (#0f1729) is the deep navy used for primary CTAs, navigation, and text hierarchy—it conveys trust and professionalism essential to medical contexts. Secondary (#3b82f6) is a clinical blue reserved for interactive elements, links, and focus states, providing clear affordance without overwhelming the interface. Tertiary (#10b981) is a medical green used sparingly for success states and confirmations. The surface stack ranges from #f3f4f7 (base background) through #ffffff (elevated cards), with intermediate containers (#e9ecef, #dfe3e8) creating subtle depth without relying on shadows. Error states use #dc2626 with a light container (#fee2e2) for accessibility.

Typography

The type system uses Inter as the primary typeface, chosen for its exceptional legibility at small sizes and neutral, professional appearance. Display (60px, 700 weight) anchors hero sections and major headings with -0.04em letter-spacing to tighten the visual mass. Headline-lg (40px, 700 weight) is used for page titles and section headers, while headline-md (28px, 600 weight) breaks up content into digestible chunks. Body-md (16px, 400 weight) is the default reading size, set to 24px line-height for comfortable scanning of clinical data and form labels. Label-md (14px, 500 weight) is applied to buttons, form labels, and UI controls, with 0.01em letter-spacing for subtle emphasis. All text over busy backgrounds (e.g., hero overlays) receives a text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to

Layout

The layout system uses a 12-column grid with a maximum container width of 1280px, ensuring content remains scannable on all viewport sizes. The gutter spacing is fixed at 24px, providing consistent breathing room between columns. Section separation uses the lg spacing token (40px) for major content blocks, md spacing (24px) for subsections, and sm spacing (12px) for related elements within a component. The login form card is centered with max-width: 480px, creating a focused entry point. Input fields and buttons use consistent padding (8px 12px for inputs, 8px 16px for buttons) to establish a visual rhythm. Whitespace is treated as a design element: the hero section on the left occupies 50% of the viewport, while the login card on the right uses negative space to emphasize the form's impor

Elevation & Depth

Depth in X-RayVision is achieved through a restrained shadow system that avoids the visual heaviness inappropriate for clinical interfaces. Level 1 (Base): no shadow; surfaces sit flush on the background. Level 2 (Cards & Inputs): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), a soft, diffuse shadow that lifts elements 4px from the surface. Level 3 (Modals & Dropdowns): box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), a larger spread shadow that creates clear separation for overlays. Focus states add a 3px ring at rgba(59, 130, 246, 0.1) around interactive elements, providing visual feedback without

Shapes

The shape philosophy is 'Precise Softness'—rounded corners are applied judiciously to soften the interface while maintaining the geometric clarity expected in medical software. Buttons use rounded-md (0.75rem / 12px), balancing approachability with professional restraint. Input fields and small components use rounded-DEFAULT (0.5rem / 8px), the most common radius, creating visual consistency. Cards and modals use rounded-lg (1rem / 16px) and rounded-xl (1.5rem / 24px) respectively, with larger radius indicating higher elevation. Checkboxes and badges use rounded-sm (0.25rem / 4px) for compact,

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons use backgroundColor: {colors.primary} (#0f1729) with textColor: {colors.on-primary} (#ffffff), padding: 8px 16px, height: 40px, and rounded-md (12px). On hover, the background transitions to {colors.primary-container} (#334155) over 200ms. The active state uses {colors.primary-fixed-dim} (#1e293b). Secondary buttons are transparent with a 1px border at {colors.secondary} (#3b82f6) and text in the same color; on hover, the background fills with {colors.secondary-container} (#dbeafe). Ghost buttons have no border or background, only text color, and reveal a {colors.surface-container-high} background on hover. All buttons use label-md typography (14px, 500 weight) and transition: background-color 200ms ease.

#

Do's and Don'ts

**Do**

• Do use primary (#0f1729) for main CTAs and navigation; it establishes trust and hierarchy.
• Do apply the 8px spacing unit consistently; it ensures alignment and predictability across all breakpoints.
• Do use rounded-md (12px) for buttons and rounded-lg (16px) for cards to maintain the 'Precise Softness' aesthetic.
• Do include focus rings (3px, rgba(59, 130, 246, 0.1)) on all interactive elements for accessibility and clarity.
• Do transition interactive states over 200ms (background-color, box-shadow, border-color) to provide smooth, professional feedback.
• Do use body-md (16px, 400 weight) as the default reading size with 24px line-height for comfortable scanning of clinical data.

**Don't**

• Don't use more than 3 accent colors in a single view; secondary (#3b82f6) and tertiary (#10b981) should be reserved for specific interaction states.
• Don't apply shadows heavier than 0 16px 40px rgba(0, 0, 0, 0.12); clinical interfaces require restraint to avoid visual clutter.
• Don't use rounded corners tighter than 4px or looser than 24px; this range maintains the 'Precise Softness' philosophy.
• Don't mix font weights beyond 400, 500, 600, and 700; additional weights fragment the visual system.
• Don't use color alone to convey status; always pair with icons, text, or borders for accessibility (WCAG AA compliance).
• Don't exceed 1280px container width; wider layouts reduce readability and increase cognitive load in clinical contexts.