Sword Health

Overview

Sword Health is a clinical-grade AI care platform designed for employers, health plans, and individuals seeking whole-person health optimization. The design system embodies 'Clinical Minimalism'—a philosophy that marries medical credibility with human-centered warmth. The aesthetic is deliberately restrained: a clean white canvas (#ffffff) with soft, warm neutrals (#f7f4f2, #edeae8) creates breathing room, while a confident blue accent (#3192d0) signals trust and actionability. The UI evokes the feeling of a modern medical consultation room—organized, calm, and focused on outcomes rather than decoration.

The brand voice is precise, empathetic, and evidence-driven. Sword speaks to healthcare professionals and benefit managers with clinical authority, yet to patients with accessible clarity. Vocabulary favors concrete outcomes over jargon: 'reduce pain by 40%' rather than 'optimize musculoskeletal health metrics.' The tone is never breathless or hyperbolic; instead, it grounds claims in data and partnership. Example sentence in brand voice: 'Our AI identifies your pain pattern in the first session, then adapts your care plan weekly based on your progress.'

Colors

The color system is anchored in clinical trust and human warmth. Primary (#3192d0) is a professional medical blue used exclusively for CTAs, active states, and key interactive elements—it appears on 'Contact Sales' buttons, focus rings, and progress indicators. This blue is derived from healthcare industry standards and conveys competence without coldness. Secondary (#6966ac), a muted purple, supports the primary in secondary actions, badges, and accent highlights; it adds sophistication without competing for attention. Tertiary (#ec5f74), a warm coral-red, is reserved for status indicators, alerts, and emphasis—it communicates urgency or importance with humanity rather than alarm.

The surface stack is deliberately warm and inviting. Surface (#ffffff) is pure white, providing maximum clar

Typography

The type system uses Figtree, a humanist sans-serif that balances clinical precision with approachability. Display (60px, 700 weight, -0.04em letter-spacing) anchors hero sections with commanding presence; headline-lg (40px, 600 weight) frames major sections; headline-md (28px, 600 weight) breaks up content hierarchically. Body-lg (18px, 400 weight, 28px line-height) is used for hero copy and callouts, providing generous line-height (1.56x) for readability. Body-md (16px, 400 weight, 24px line-height) is the workhorse for paragraph text, form labels, and card content. Label-md (14px, 500 weight, 0.01em letter-spacing) is applied to buttons, badges, and UI labels—the 500 weight provides subtle emphasis without heaviness. Label-sm (12px, 500 weight) is reserved for metadata, timestamps, and

Layout

The layout system uses a 12-column grid with a max-width of 1336px and 36px horizontal padding (24px on mobile), creating a fluid, responsive container. The grid breakpoint at 992px shifts from full-width mobile to a 75% column layout, ensuring content remains scannable on tablets. Vertical rhythm is governed by the spacing scale: section separation uses lg (40px) on desktop, md (24px) on tablet, and sm (12px) on mobile. The gutter between grid columns is 0px (columns are positioned absolutely or use flexbox gap), allowing flexible content arrangement. Container padding follows the pattern: md (24px) for cards and contained sections, sm (12px) for input fields and compact components. The design favors generous white space—sections are separated by at least 40px vertically, and card padding

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than dramatic drop-shadows. The elevation system uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for hover states on interactive elements, md (0 4px 12px rgba(0, 0, 0, 0.08)) for cards and modals, and lg (0 16px 40px rgba(0, 0, 0, 0.12)) for floating elements like tooltips or expanded menus. Shadows are always soft and diffuse, never sharp or dramatic. The progress bar uses a glowing effect (box-shadow: 0 0 10px var(--ui-colors-primary-default), 0 0 5px var(--ui-colors-primary-default)) to signal active state without distractio

Shapes

The shape philosophy is 'Soft-Technical'—rounded corners are used consistently but conservatively, signaling approachability without sacrificing precision. Buttons use lg (1rem / 16px) border-radius, creating a friendly, modern appearance while remaining professional. Cards and containers use xl (1.5rem / 24px) border-radius for a softer, more inviting feel. Input fields use DEFAULT (0.5rem / 8px) border-radius, maintaining a compact, functional appearance. Icon buttons and badges use full (9999px) border-radius for perfect circles, emphasizing their role as discrete, actionable elements. The

Components

Action Elements Buttons are the primary interaction pattern. Button-primary uses {colors.primary} (#3192d0) background with {colors.on-primary} (#ffffff) text, {typography.label-md} (14px, 500 weight), {rounded.lg} (16px), and 12px 24px padding for a 48px total height. On hover, the background shifts to #2680b8 (a 10% darker blue) with a 0.3s ease transition—no shadow is added, preserving the minimalist aesthetic. Button-secondary uses a transparent background with a 1px solid border in {colors.primary}, creating a ghost effect; on hover, it fills with {colors.primary-container} (#d4e4f7) and shifts text to {colors.on-primary-container} (#0d47a1). Button-ghost is used for tertiary actions like 'Learn more' links; it has no background or border, only text in {colors.on-surface} (#1f222c

Do's and Don'ts

**Do**

• Do use {colors.primary} (#3192d0) exclusively for CTAs and primary interactive elements—it is the brand's signature accent and must remain visually distinct.
• Do maintain at least 40px vertical spacing between major sections on desktop to preserve the Clinical Minimalism aesthetic and reduce cognitive load.
• Do apply 0.3s ease transitions to all interactive state changes (hover, focus, active) to create a cohesive, responsive feel.
• Do use {typography.body-md} (16px, 400 weight, 24px line-height) as the default body text—it is optimized for readability and clinical content.
• Do reserve {colors.tertiary} (#ec5f74) for alerts, status indicators, and emphasis only—overuse dilutes its impact.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) for text or backgrounds—use {colors.on-surface} (#1f222c) and {colors.surface} (#ffffff) respectively to maintain warmth and reduce eye strain.
• Don't apply shadows larger than lg (0 16px 40px rgba(0, 0, 0, 0.12))—the system prioritizes minimalism, and heavy shadows contradict the aesthetic.
• Don't mix border-radius values arbitrarily; stick to the defined scale (sm, DEFAULT, md, lg, xl, full) to maintain visual consistency.
• Don't use {colors.secondary} (#6966ac) or {colors.tertiary} (#ec5f74) for primary CTAs—these are supporting accents and will confuse the visual hierarchy.
• Don't reduce line-height below 1.5x for body text; clinical content requires generous vertical spacing for accessibility and readability.