Rise Plasma

Overview

Rise Plasma is a healthcare fintech platform that reimagines plasma donation as a frictionless, rewarding experience. The brand serves donors seeking immediate financial compensation for their time and contribution to life-saving medicine. The aesthetic movement is 'Optimistic Minimalism'—a bright, cloud-like visual language that combines medical credibility with consumer-friendly accessibility. The UI evokes clarity, trust, and forward momentum through a vivid sky-blue gradient (rgb(125, 193, 255) to lighter tones) paired with clean white typography and subtle 3D elements (illustrated clouds, a stylized donation center, a cash card). The emotional response is one of ease and purpose: donating feels effortless and meaningful, not clinical or transactional.

The brand voice is conversational, direct, and empowering. Vocabulary emphasizes speed ('instant rewards'), agency ('your time', 'get paid'), and social good ('do good', 'saves lives'). Tone is never patronizing—it respects the donor's intelligence and time. Example sentence in brand voice: 'Turn your plasma into medicine that saves lives and money that pays bills.'

Colors

The color system is anchored by a primary brand blue (#004dd0) used on CTAs, links, and interactive states—this is the signature accent that signals action and trust. The secondary bright blue (#015fff) and tertiary nav blue (#35a7f9) provide supporting accents for hover states and secondary UI elements. The surface stack is built on a light, airy palette: the dominant background is a soft periwinkle (#ecf2fb, used 43 times on the page), which sits between pure white (#ffffff) and a deeper container blue (#dfe9f3). This creates visual depth without darkness—the design feels open and optimistic. Text on light surfaces uses a deep navy (#07276c) for maximum legibility and brand consistency. Accent colors include a warm yellow (#fce74f) for highlights and badges, powder blue (#a9e1fc) for sec

Typography

The type system pairs Geist (a modern, geometric sans-serif) for headlines and UI labels with Source Serif 4 (a warm, readable serif) for body copy and descriptive text. This pairing communicates both modernity and trustworthiness—Geist's clean geometry signals fintech sophistication, while Source Serif 4's serifs add warmth and approachability appropriate for a healthcare brand. Display text (81px, 400 weight, -0.02em letter-spacing) anchors hero sections with maximum impact; headline-lg (48px, 600 weight) breaks content into digestible sections; body-lg (20px, 400 weight, Source Serif 4) carries the narrative voice with generous 28px line-height for readability on light backgrounds. Labels use Geist at 16px (500 weight) with 0.02em letter-spacing for crisp, scannable UI text. On small la

Layout

The layout follows a fluid 12-column grid with a max-width of 1280px, allowing content to breathe on desktop while remaining responsive on mobile. The hero section spans full-width with a dynamic gradient background (sky blue to lighter blue), establishing the brand's optimistic tone immediately. Container padding uses the 24px gutter (md spacing) on desktop, reducing to 12px (sm spacing) on tablet and mobile. Section separation employs 40px (lg spacing) for major content blocks and 24px (md spacing) for subsections, creating a clear visual rhythm. The navbar uses 67.5px horizontal padding (derived from the 18px base font size × 3.75 ratio), maintaining proportional breathing room. White-space philosophy prioritizes clarity over density: cards and content blocks are never crowded, with min

Elevation & Depth

Depth is conveyed through a combination of subtle shadows, glassmorphism, and layered backgrounds rather than dark overlays. The navbar exemplifies this: it uses a calculated backdrop-filter blur (20px baseline, scaling to 40px on scroll via the --nav-p CSS variable) paired with inset highlights (rgba(255, 255, 255, 0.40) at -2px -2px 4px inset) to create a frosted-glass effect that feels elevated without being heavy. Standard cards use box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) (sm elevation) for subtle separation from the background. Elevated modals and prominent containers use 0 4px 12px rgb

Shapes

The shape philosophy is 'Soft-Technical'—combining rounded corners with precision to balance approachability with fintech credibility. Buttons use full border-radius (9999px) to create pill-shaped CTAs that feel friendly and clickable; the 'Join Waitlist' button exemplifies this with 18px vertical padding and 32px horizontal padding inside a full-radius container. Cards and containers use 1rem (16px) border-radius for a modern, slightly softened appearance that avoids harsh corners without appearing childish. Input fields use 0.5rem (8px) border-radius for a subtle, professional look. The navb

Components

Action Elements Primary buttons use {colors.primary} (#004dd0) background with {colors.on-primary} (#ffffff) text, full border-radius (9999px), and 18px vertical × 32px horizontal padding for a 48px total height. On hover, transition to {colors.primary-fixed-dim} (#1e88e5) over 200ms with cubic-bezier(0.4, 0, 0.2, 1) easing. Secondary buttons use rgba(255, 255, 255, 0.08) background with white text and a 1px border at rgba(255, 255, 255, 0.32), maintaining the same dimensions and easing. The navbar button uses a semi-transparent white background that scales with the --nav-p variable: on scroll, the border becomes transparent and the background increases to rgba(255, 255, 255, 0.16). All buttons disable pointer-events and reduce opacity to 0.5 when in a disabled state.

Containers &

Do's and Don'ts

**Do**

• Do use the primary blue (#004dd0) exclusively for CTAs and interactive states—it's the signature accent that drives conversion.
• Do maintain the light periwinkle background (#ecf2fb) as the dominant surface to preserve the optimistic, open feeling.
• Do apply the navbar glassmorphism effect (20px blur, inset highlights) on scroll to create a sophisticated, layered experience.
• Do pair Geist headlines with Source Serif 4 body copy to balance modernity with warmth and trustworthiness.
• Do use full border-radius (9999px) on all primary buttons to maximize affordance and signal 'tap me' clearly.
• Do transition all interactive states over 200ms with cubic-bezier(0.4, 0, 0.2, 1) easing for smooth, purposeful motion.

**Don't**

• Don't use dark overlays or heavy shadows—the brand relies on light, airy depth through glassmorphism and subtle inset highlights.
• Don't apply the primary blue (#004dd0) to non-interactive elements like body text or backgrounds; reserve it for CTAs and focus states.
• Don't mix serif and sans-serif within the same headline or label—Geist is for UI, Source Serif 4 is for narrative body copy.
• Don't reduce the navbar blur below 20px or the inset highlight opacity below 0.28 on scroll; the glassmorphism effect loses credibility if too subtle.
• Don't use border-radius smaller than 8px (0.5rem) on interactive elements; it reduces affordance and feels cramped.
• Don't apply text-shadow to body copy on light backgrounds; reserve it only for small labels over busy gradients where contrast is critical.