superpower.com — Design System

1. Visual Theme & Atmosphere

Superpower positions itself at the intersection of health technology and consumer aspiration — and the design reflects exactly that tension. The base is clinical white with a near-black zinc text system, but the accent is Vermillion: a warm, living orange (#fc5f2b) that reads as biological rather than digital. This is not a startup orange; it’s the color of effort, blood, and metabolic heat. Combined with Nb International Pro — a typeface used extensively in editorial and luxury branding — the result feels premium, body-forward, and quietly urgent.

The layout is Webflow-built with GSAP animations; motion is core to the experience but the design tokens themselves are carefully systematized with a full semantic token layer.

2. Color Palette & Roles

Brand / Accent — Vermillion

Zinc — Neutral System

Semantic aliases: --text-color--text-primary, --background-color--background-primary, etc. This is a production-grade design token system. The golden color (rgba(255, 212, 57, 0.8)) appears as an animated shine effect — not a base palette color.

3. Typography Rules

Typeface: Nb International Pro Webfont — a precise, optical-weight grotesque used in Swiss editorial and luxury contexts. Its proportions are slightly condensed at display sizes, giving it authority without aggression.

The fractional pixel sizes indicate fluid/viewport-relative scaling (vw-based sizing via Webflow’s responsive typescale). Negative tracking escalates with size — the larger the heading, the tighter the tracking — a hallmark of premium typographic systems. Font weight is uniformly 400 throughout; all hierarchy comes from size and spacing.

4. Component Stylings

• Primary CTA: rgb(252, 95, 43) background with white text — the Vermillion accent as the single most important interactive element.
• Buttons (dark): rgb(24, 24, 27) fill — zinc-900 as secondary CTA.
• Slider bullets: Zinc-900 fill for inactive, rgba(0,0,0,0.25) for stepped/indicator states.
• Border radii: Extensive system — 2px (hairline), 5px (small input), 14.66px (body-scale), 16px (cards), 21.98px (badges), 73.28px (large pill), 100px / 9999px / 1280px (full pill/circle). The navbar height is 6rem.
• Trustpilot section: rgb(244, 244, 245) (zinc-100) tinted band.
• Shadows: rgba(0,0,0,0.15) 0 3px 14px (prominent lift) + rgba(0,0,0,0.05) 0 2px 2px (hairline bottom shadow).

5. Layout Principles

• Full responsive range: 479, 767, 768, 968, 991, 992, 1215, 1439, 1920px — comprehensive Webflow breakpoint set covering every major viewport class.
• Navbar: --navbar-height: 6rem — generous, premium top bar.
• Stack: Webflow + GSAP — layout via Webflow grid, interaction via GSAP timelines.
• The semantic token architecture (--background-color--background-*, --text-color--text-*) suggests this was designed with a Figma variables system before being exported.
• Sections have no padding declared at the global level — all spacing is handled per-component.

6. Depth & Elevation

Two-tier shadow system:

• Subtle (hairline): rgba(0,0,0,0.05) 0 2px 2px — barely visible lift, used on inline elements.
• Card lift: rgba(0,0,0,0.15) 0 3px 14px — visible float for modals, video wrappers, hovering cards.

The animated shine element (rgba(255, 212, 57, 0.8)) creates a light sweep effect — depth through motion rather than static shadow.

7. Do’s and Don’ts

Do:

• Use the full semantic token system — reference --text-color--text-primary not raw zinc hex values.
• Apply Vermillion (#fc5f2b) exclusively to the single primary CTA per screen.
• Use negative letter-spacing that scales with font size (−1.28px at 51px, less at smaller sizes).
• Maintain weight 400 throughout — no bold anywhere in the base system.
• Use the full radius range purposefully: 5px for form inputs, 16px for cards, 9999px for pill buttons.

Don’t:

• Introduce non-zinc neutrals — the grey system is tightly controlled.
• Use the golden shine color as a static palette element — it’s animation-only.
• Place Vermillion on secondary or tertiary actions.
• Add new border-radius values outside the defined token set.
• Use shadows heavier than rgba(0,0,0,0.15).

8. Responsive Behavior

Nine breakpoints cover every meaningful viewport from mobile portrait (479px) to 4K (1920px). The fluid typography (fractional vw-based px values) ensures headings scale smoothly between breakpoints without jarring jumps. The 6rem navbar is likely sticky and may reduce height on mobile. GSAP animations are presumably disabled or simplified on reduced-motion preference.

9. Agent Prompt Guide

Build a Superpower.com-style health-tech UI: white canvas, zinc neutral system (#18181b text, #71717a secondary, #e4e4e7 borders), single Vermillion accent (#fc5f2b) for primary CTAs only. Nb International Pro webfont at weight 400 with negative tracking that scales with size. Full radius range: 5px inputs, 16px cards, 9999px pills. Two shadows: rgba(0,0,0,0.05) hairline + rgba(0,0,0,0.15) card float. Nine responsive breakpoints. Semantic token architecture throughout. Premium, body-forward, motion-enhanced.

Generated by Sparkbites — extracted from live CSS analysis