Superpower

Overview

Superpower is a direct-to-consumer preventive health platform that transforms clinical complexity into actionable insights. The brand serves health-conscious individuals seeking proactive biomarker monitoring and personalized care coordination—a demographic that values clarity, efficiency, and control. The aesthetic movement is **Action-Oriented Minimalism**: a high-contrast, purposeful interface that strips away decorative elements in favor of bold typography, decisive color accents (vivid vermillion #fc5f2b), and generous whitespace. The UI evokes confidence and urgency—every element earns its place, and every interaction feels intentional. The emotional response is empowerment: users feel they are taking concrete steps toward better health, not passively receiving advice.

The brand voice is direct, evidence-based, and conversational—never clinical or patronizing. Vocabulary patterns favor active verbs ("take control," "get personalized," "discover") and concrete metrics ("100+ biomarkers," "24/7 care team"). The tone is optimistic but grounded: Superpower acknowledges that health is complex, but frames the platform as the clarity-bringing tool that makes it manageable. Example sentence in brand voice: "Your labs arrive in 48 hours—no waiting, no guessing, just data that moves you forward."

Colors

The color system is built on a **high-contrast, energetic foundation** that prioritizes clarity and action. The primary accent, Vermillion (#fc5f2b), is the signature brand color deployed on all call-to-action buttons, active states, and key interactive elements. This warm orange-red commands attention without aggression—it signals "this is where you act next." The surface stack is anchored in near-white (#fafafa for surface, #ffffff for surface-bright) to maximize readability of health data and lab results; the on-surface text color is near-black (#18181b) at 100% opacity for maximum contrast (WCAG AAA compliant). Secondary surfaces use a carefully calibrated gray scale: surface-container (#e4e4e7) for subtle separation, surface-container-high (#d4d4d8) for hover states, and outline (#a1a

Typography

The type system uses **NB International Pro**, a geometric sans-serif that conveys modernity and precision—critical for a health-tech brand where data accuracy is paramount. The hierarchy spans eight levels, from display (60px, 700 weight, -0.04em tracking) for hero headlines down to label-sm (12px, 500 weight, 0.05em tracking) for metadata and timestamps. Display and headline-lg use negative letter-spacing (-0.04em to -0.02em) to tighten the visual mass and create impact; body text (16–18px, 400 weight, 0px tracking) is set loose for legibility. The pairing strategy emphasizes contrast: bold, tight headlines (600–700 weight) anchor sections, while generous body copy (400 weight, 24px line-height) ensures lab results and care instructions are never cramped. For small labels over busy backg

Layout

The layout system uses a **fluid 12-column grid** with a max-width of 1280px (20rem padding on desktop, 1rem on mobile). The spacing scale is semantic: unit (8px) is the atomic increment; sm (12px) is used for tight component padding; md (24px) is the standard gutter between sections; lg (40px) separates major content blocks; xl (64px) is reserved for hero-to-content transitions. Whitespace is generous—sections are separated by lg spacing (40px) minimum, creating visual breathing room that reinforces the minimalist aesthetic. Container max-widths vary by content type: full-width hero (1439px), standard content (1280px), and narrow modals (850px). The grid is responsive: on tablet (768–991px), gutters compress to md (24px); on mobile (<768px), gutters become sm (12px) and columns stack to s

Elevation & Depth

Depth is conveyed through **subtle, layered shadows** that create a sense of floating elements without visual clutter. The elevation system has three tiers: Level 1 (Base/Surface) has no shadow; Level 2 (Cards, Inputs) uses sm elevation (0 0.25rem 0.75rem rgba(0, 0, 0, 0.1)), creating a gentle lift; Level 3 (Modals, Popovers) uses md elevation (0 1rem 1.5rem rgba(0, 0, 0, 0.1)), signaling modal priority. Hover states on interactive elements (buttons, cards) transition to md elevation over 0.25s cubic-bezier(0.4, 0, 0.2, 1), giving tactile feedback. Buttons use a ripple effect (currentColor at

Shapes

The shape philosophy is **Geometric Precision with Warmth**: rounded corners are used consistently to soften the technical nature of health data, but never so much that they feel playful or casual. The radius scale progresses from sm (0.5rem / 8px) for small UI elements (icon backgrounds, badge corners) to full (9999px) for pill-shaped buttons and badges. Standard cards and inputs use DEFAULT (0.75rem / 12px) for a balanced, approachable feel; larger containers (modals, hero sections) use md (1rem / 16px) or lg (1.5rem / 24px) for visual prominence. Buttons are consistently rounded to md (1rem

Components

Action Elements Buttons are the primary interaction pattern and use a ripple effect (0.6s ease-out animation, currentColor at 0.35 opacity) to provide tactile feedback. Primary buttons (button-primary) use background {colors.primary} (#fc5f2b) with white text, rounded to {rounded.md} (1rem), and 48px height with 12px vertical / 24px horizontal padding. On hover, the background transitions to {colors.primary-fixed-dim} (#f7861e) over 0.25s cubic-bezier(0.4, 0, 0.2, 1), and transform scales to 0.98. On active (click), scale becomes 0.96. Secondary buttons (button-secondary) use transparent background with {colors.primary} text and a 1px border at {colors.outline}; on hover, background becomes {colors.surface-container-high} (#d4d4d8). Ghost buttons (button-ghost) are text-only with no bo

Do's and Don'ts

**Do**

• Do use {colors.primary} (#fc5f2b) exclusively for primary CTAs and active states—it is the brand's signature accent and must never be diluted or overused on secondary elements.
• Do maintain minimum 44px height for all touch targets (buttons, inputs, list items) to meet WCAG AAA accessibility standards and ensure mobile usability.
• Do apply generous whitespace (lg spacing, 40px) between major content sections to create visual breathing room and reinforce the minimalist aesthetic.
• Do use {typography.label-md} (14px, 600 weight) for all button text and {typography.body-md} (16px, 400 weight) for body copy to maintain consistent hierarchy and legibility.
• Do pair tight, bold headlines (600–700 weight, -0.02em to -0.04em tracking) with loose, generous body copy (400 weight, 24px line-height) to create visual contrast and readability.

**Don't**

• Don't use secondary colors (Burnt Orange #f7861e, grays) as primary CTAs—they dilute the brand identity and confuse users about where to take action next.
• Don't apply shadows heavier than md elevation (0 1rem 1.5rem rgba(0, 0, 0, 0.1)) on standard components; excessive depth creates visual clutter and contradicts the minimalist aesthetic.
• Don't use rounded corners tighter than sm (0.5rem / 8px) on large containers or looser than full (9999px) on buttons—the scale is calibrated for visual consistency.
• Don't set body text smaller than 16px or with line-height less than 24px; health data must be legible and accessible, especially for users with vision impairments.
• Don't mix typefaces—NB International Pro is the sole brand typeface; system fonts or serif fonts break the geometric precision and modern identity.