Superpower

Superpower's health intelligence brand is built on a high-contrast palette of an almost-black charcoal and stark white, punctuated by a vivid, energetic vermillion. Monochromatic typography by NB International Pro, paired with generous letter-spacing, projects a precise, almost clinical authority, while pill-shaped buttons introduce a surprising soft, approachable counterpoint. This creates a refined yet dynamic aesthetic, balancing technical exactitude with user-friendly optimism. Use Charcoal Black (#18181b) for all primary typographic elements and major UI components to maintain high contrast and sophistication. Apply Vermillion Accent (#fc5f2b) exclusively to primary calls-to-action and active navigation states to ensure focus and energy. Employ the Nb international pro webfont with significant negative letter-spacing for all headlines (e.g., -0.37px at 37px) to achieve a precise, condensed appearance. Maintain a clear visual hierarchy by differentiating primary (pill-shaped Vermillion Accent), secondary (white outlined), and tertiary (ghost, transparent) button styles. Ensure all interactive elements, particularly buttons, feature a 9999px border-radius for the distinctive pill shape, softening the otherwise crisp UI. Use Pure White (#ffffff) as the dominant page background to create an expansive, clean canvas for content presentation. Utilize a subtle shadow (rgba(0, 0, 0, 0.05) 0px 2px 2px 0px) for elevated cards on main content areas to provide soft depth. Do not use multiple accent colors simultaneously; the visual system relies on Vermillion Accent (#fc5f2b) for primary emphasis. Avoid using flat, square buttons; all primary and secondary buttons must adhere to the 9999px pill-shaped radius. Do not introduce strong, chromatic backgrounds other than the defined brand colors; the system heavily relies on a neutral gray progression. Refrain from using thin, decorative borders that are not part of the established Light Gray (#e4e4e7) or Charcoal Black (#18181b) border palette. Do not vary line-height significantly from the established scale; maintaining the precise vertical rhythm is key for legibility and visual consistency. Avoid generic drop shadows; use the specific, subtle card shadow (rgba(0, 0, 0, 0.05) 0px 2px 2px 0px) to maintain a light, clean aesthetic.