Superpower

Overview

Superpower is a direct-to-consumer health membership platform that transforms biomarker testing and personalized care into an accessible, data-driven experience. The brand embodies a "Technical Clarity" aesthetic—combining the precision of medical science with the approachability of consumer design. The interface uses a high-contrast, minimalist foundation (pure white surfaces with deep charcoal text at #18181b) punctuated by a vibrant orange accent (#fc5f2b) that signals action, urgency, and the brand's commitment to empowering users to take control of their health. The emotional response is one of confidence: clean, trustworthy, and forward-thinking.

The brand voice is direct, conversational, and data-literate without being clinical. Superpower speaks to health-conscious consumers who value transparency, efficiency, and results. The vocabulary emphasizes agency ("take control," "your data," "evolves with you") and specificity (exact biomarker counts, pricing, timelines). Example sentence in brand voice: "Members get 150+ lab tests across 2 blood draws. $199 per year. No hidden fees."

Colors

The color system is built on a high-contrast, minimalist foundation with a single, commanding accent. Primary (#111111) is the deep charcoal used for body text, navigation, and structural elements—it provides the visual weight and trustworthiness essential to a health platform. On-primary (#ffffff) ensures legibility on dark backgrounds. The secondary color, Vermillion Orange (#fc5f2b), is the brand's signature accent and appears exclusively on call-to-action buttons, active states, and key interactive elements. This orange is never used for body text or large surfaces; it is reserved for moments that demand user attention. Secondary-container (#fdba74) provides a softer, lighter orange for hover states and supporting UI. The surface stack progresses from pure white (#ffffff) for primary c

Typography

The type system centers on Adelle Sans, a humanist sans-serif that balances precision with warmth. Display (60px, 400 weight, -0.02em letter-spacing) is reserved for hero headlines and brand moments; Headline-lg (44px, 400 weight) anchors major section titles; Headline-md (32px, 400 weight) structures subsections. Body-lg (18px, 400 weight, 28px line-height) is used for introductory copy and prominent descriptions, while Body-md (16px, 400 weight, 24px line-height) serves as the default for body text and card content. Label-md (14px, 400 weight, 0.01em letter-spacing) is applied to button text, form labels, and UI controls. All weights are 400 (regular) to maintain a clean, modern appearance; heavier weights are avoided to preserve the brand's contemporary feel. Apply text-shadow: 0 2px 4p

Layout

The layout system uses a 12-column grid with a maximum container width of 1280px, maintaining consistent horizontal rhythm across desktop (≥992px), tablet (768–991px), and mobile (<768px) viewports. The gutter is 24px on desktop, reducing to 16px on tablet and 12px on mobile. Section separation follows the lg spacing token (40px) on desktop, md spacing (24px) on tablet, and sm spacing (12px) on mobile. Hero sections extend full-width with 64px (xl spacing) vertical padding on desktop, creating breathing room around headline and CTA elements. Card-based content areas use md spacing (24px) for internal padding and sm spacing (12px) for gaps between cards. The white-space philosophy prioritizes clarity: generous margins around text blocks, ample padding within containers, and clear visual sep

Elevation & Depth

Depth in this system is achieved through subtle, layered shadows and strategic use of borders rather than dramatic drop-shadows. The base elevation (Level 1) is the white surface (#ffffff) with no shadow. Level 2 (standard cards and containers) uses box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) and a 1px solid border at {colors.outline-variant} (#d4d4d8), creating a soft, barely-perceptible separation from the background. Level 3 (elevated cards, modals, and hover states) applies box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) with the same border treatment, signaling interactive elevation. Level 4 (mod

Shapes

The shape philosophy is "Soft-Technical"—combining rounded corners with precision to convey both approachability and professionalism. Buttons use the full radius ({rounded.full} = 9999px) to create pill-shaped, friendly CTAs that feel inviting and modern. Input fields and form controls also use full radius (9999px) to maintain visual consistency with buttons and create a cohesive interaction layer. Cards and containers use lg radius (1rem = 16px) for a subtle roundness that softens the geometric grid without appearing playful or casual. Smaller UI elements like badges and chips use md radius (

Components

Action Elements Buttons are the primary interaction pattern. The primary button (button-primary) uses {colors.primary} (#111111) background with {colors.on-primary} (#ffffff) text, full radius (9999px), and padding of 12px 24px with a 44px height. On hover, the background transitions to {colors.primary-container} (#3f3f46) over 0.25s cubic-bezier(0.16, 1, 0.3, 1). On active/click, apply transform: scale(0.96) with a 150ms ease-out transition to provide tactile feedback. The secondary button (button-secondary) uses a transparent background with {colors.secondary} (#fc5f2b) text, a 1px border at {colors.outline-variant}, and identical padding/height. On hover, the background becomes {colors.surface-container-low} (#eeeeee). Ghost buttons (button-ghost) are transparent with {colors.second

Do's and Don'ts

**Do**

• Do use the orange secondary color (#fc5f2b) exclusively on CTAs, active states, and moments requiring user attention—never on body text or large surface areas.
• Do maintain the 0.25s cubic-bezier(0.16, 1, 0.3, 1) transition timing across all interactive state changes (hover, focus, active) for a cohesive, snappy feel.
• Do apply full radius (9999px) to all buttons and input fields to signal interactivity and reduce visual friction.
• Do use the lg spacing token (40px) for section separation on desktop and scale proportionally on smaller viewports to maintain visual rhythm.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) on white text overlaid on photographic backgrounds to ensure legibility.

**Don't**

• Don't use the primary color (#111111) for interactive elements—reserve it for structural text and navigation; use secondary (#fc5f2b) for all CTAs.
• Don't apply shadows heavier than {elevation.lg} (0 12px 28px rgba(0, 0, 0, 0.2)) on standard UI elements; excessive shadows undermine the minimalist aesthetic.
• Don't mix border-radius values within a single interaction pattern (e.g., don't use md radius on some buttons and lg on others).
• Don't use color transitions longer than 0.25s or timing functions other than cubic-bezier(0.16, 1, 0.3, 1) for interactive state changes—this breaks the snappy, responsive feel.