Human Longevity

Overview

Human Longevity represents a new category of precision health: clinical rigor meets human-centered design. The brand serves affluent executives and health-conscious individuals seeking comprehensive early disease detection through genomic sequencing, full-body MRI, and AI-powered biomarker analysis. The aesthetic movement is 'Architectural Minimalism'—clean, sophisticated, and grounded in scientific authority. The UI evokes calm confidence: users feel they are in the hands of world-class clinicians, not a consumer app. Every interaction reinforces the brand's core promise: detect disease years before symptoms appear.

The voice is precise, measured, and never sensational. Vocabulary favors clinical terms ('biomarkers,' 'genomic sequencing,' 'early detection') over marketing hyperbole. The brand speaks to the user's rational self-interest in longevity and prevention. Example sentence in brand voice: 'Your results include 120+ biomarkers analyzed against population baselines—actionable insights, not noise.'

Colors

The color system is anchored in a sophisticated teal primary (#4a8a96) paired with a warm cream background (#faf9f8). Teal is used exclusively for interactive elements—buttons, links, focus states, and key data highlights—signaling clinical precision and trustworthiness. The secondary teal (#8abbc4) appears in supporting UI and container backgrounds, creating visual hierarchy without competing for attention. A warm tertiary accent (#c8913a) is reserved for badges, highlights, and secondary calls-to-action, evoking the human element of the brand (warmth, care, longevity). The surface stack progresses from #faf9f8 (base) through #f4f7f6 (container-low) to #e0ddd9 (container-high), providing subtle depth without visual noise. Text is rendered in near-black (#1e2a2a) for maximum legibility on

Typography

The type system balances scientific authority with human warmth. Bai Jamjuree (Google Fonts, weights 200–700) is the primary typeface—its geometric, open letterforms convey clarity and modernity without coldness. Display text (70px, weight 300, line-height 78px, letter-spacing -0.02em) is reserved for hero headlines and sets the emotional tone; the light weight suggests confidence without aggression. Headline-lg (48px, weight 400) is used for section titles and major content blocks. Body text (16px, weight 400, line-height 24px) is set in Bai Jamjuree for consistency and readability. For data-heavy contexts (biomarker tables, lab results), IBM Plex Mono (14px, weight 400) provides visual distinction and technical credibility. Instrument Serif (20px, weight 400) is deployed sparingly for te

Layout

The layout system uses a 12-column grid with a max-width of 1280px, maintaining breathing room on ultra-wide displays. The gutter is 24px (md spacing), applied consistently across all breakpoints. Hero sections occupy full-width with a 40px (lg spacing) vertical rhythm between major sections. Content containers are typically 8–10 columns wide, centered, leaving 1–2 columns of margin on each side for visual balance. The spacing scale is semantic: xs (4px) for micro-interactions and icon spacing; sm (12px) for component padding; md (24px) for section separation and card padding; lg (40px) for major section breaks; xl (64px) for hero-to-content transitions. White space is treated as a design element—never fill empty space with decoration. The page rhythm follows a 1.5x multiplier: if a sectio

Elevation & Depth

Depth is conveyed through subtle shadows and layering, never through bright highlights or gradients. The elevation system uses three levels: Level 1 (Base, no shadow) for surface containers and cards at rest; Level 2 (md shadow: 0 4px 12px rgba(0, 0, 0, 0.08)) for elevated cards, modals, and hover states; Level 3 (lg shadow: 0 16px 40px rgba(0, 0, 0, 0.12)) for floating panels, dropdowns, and top-level overlays. Hover states on cards transition from Level 1 to Level 2 over 200ms (ease-out), creating a subtle lift effect. Focus states on interactive elements use a 3px ring at rgba(74, 138, 150,

Shapes

The shape philosophy is 'Soft-Technical': rounded corners are used strategically to soften the clinical aesthetic without sacrificing clarity. Buttons and primary CTAs use full-radius (9999px), creating a pill shape that feels approachable and modern. Cards and containers use lg (1rem / 16px) for a gentle, professional appearance. Input fields and smaller components use DEFAULT (0.5rem / 8px) for a more structured feel. The rationale: full-radius buttons signal confidence and forward motion (users are encouraged to take action); lg-radius cards feel like premium, curated content; smaller radii

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons (bg: #4a8a96, text: white, padding: 12px 28px, radius: 9999px, height: 44px) use full-radius to signal forward motion and confidence. On hover, the background shifts to #3d7a86 (darker teal) with a subtle shadow (0 4px 12px rgba(74, 138, 150, 0.2)) over 200ms ease-out. Secondary buttons (bg: white, border: 1px solid #c4c7c8, text: #1e2a2a) provide alternative actions without competing for attention. Ghost buttons (bg: transparent, text: #4a8a96) are used for tertiary actions; on hover, they gain a light teal background (rgba(74, 138, 150, 0.08)). All button transitions use 200ms ease-out timing, creating a responsive but not jarring feel.

Containers & Surfaces Cards are the primary content container. St

Do's and Don'ts

**Do**

• Do use the primary teal (#4a8a96) exclusively for interactive elements—buttons, links, focus states—to create a clear affordance hierarchy.
• Do apply the full-radius (9999px) pill shape to all primary CTAs to signal confidence and forward motion.
• Do use Bai Jamjuree weight 300 for display headlines (70px) to convey authority without aggression.
• Do maintain 24px gutters and 40px section spacing to create a calm, unhurried visual rhythm.
• Do use subtle shadows (0 4px 12px rgba(0, 0, 0, 0.08)) on hover states to create a lift effect, not a drop shadow.
• Do apply 200ms ease-out transitions to all interactive state changes for a responsive but measured feel.

**Don't**

• Don't use bright accent colors or gradients—they undermine the clinical authority of the brand.
• Don't apply sharp corners (0px border-radius) to any component; the brand requires softness without playfulness.
• Don't use system fonts or generic sans-serifs; Bai Jamjuree is the signature typeface and must be loaded from Google Fonts.
• Don't exceed 1280px container max-width; wider layouts dilute the sense of curated, premium content.
• Don't use more than two levels of shadow depth; excessive layering creates visual noise inappropriate for a health platform.
• Don't mix Bai Jamjuree with other sans-serifs in the same context; consistency reinforces brand identity.