Immunosciences

Overview

Immunosciences is India's doctor-formulated supplements brand that transforms clinical wellness into a warm, approachable visual experience. The design system embodies 'Earthy Minimalism'—a philosophy that marries natural, warm color palettes (warm beiges #fcfbf9, rich forest greens #0d1f16, and golden accents #ab8c52) with clean, uncluttered layouts that prioritize clarity and trust. The brand serves health-conscious consumers who value transparency, scientific rigor, and honest communication; the UI evokes a sense of calm authority—like consulting a trusted physician who explains complex wellness in simple terms.

The voice is precise, reassuring, and never hyperbolic. Immunosciences speaks in declarative statements backed by research: 'Doctor-formulated. Lab-verified.' The tone avoids wellness clichés; instead, it grounds itself in specificity and honesty. Example sentence in brand voice: 'We make supplements the way medicine should be made: quietly, honestly, and only when the body actually needs them.'

Colors

The color system is anchored in a warm, neutral foundation (#fcfbf9 surface, #f5f2ec surface-dim) that evokes natural materials—unbleached linen, warm paper—creating an environment of trust and authenticity. The primary accent is a deep forest green (#0d1f16), used exclusively on call-to-action buttons, active states, and key interactive elements; this color signals clinical authority and natural wellness without the cliché of bright greens. The secondary accent is a warm golden-brown (#ab8c52), deployed for highlights, badges, and supporting UI elements, reinforcing the brand's connection to natural ingredients and earthy wellness. The tertiary color (#282c2e) is a near-black used for body text and secondary buttons, ensuring legibility while maintaining warmth. Borders and dividers use a

Typography

The type system pairs Fraunces (a high-contrast serif from Google Fonts) for display and headline scales with Neue Plak (a humanist sans-serif) for body and label text, creating a sophisticated yet approachable hierarchy. Fraunces at 80px, 300 weight (display) conveys premium wellness expertise; its elegant letterforms signal clinical credibility. Headlines use Fraunces at 48px (headline-lg) and 32px (headline-md) with 400 weight, maintaining elegance while improving readability. Body text uses Neue Plak at 18px (body-lg) and 16px (body-md) with 400 weight and 24px line-height, ensuring comfortable reading on both desktop and mobile. Labels and buttons use Montserrat at 14px (label-md) and 12px (label-sm) with 700 weight and 0.05–0.08em letter-spacing, creating crisp, scannable UI text. On

Layout

The layout system uses a 12-column grid with a 1280px max-width container, supporting fluid scaling from mobile (320px) to desktop (1920px). Page rhythm is governed by the spacing scale: section separation uses lg spacing (40px), card-to-card gutters use md spacing (24px), and internal padding within components uses sm (12px) or md (24px) depending on component size. The design favors generous white space—surfaces are never crowded—reflecting the brand's 'quiet, honest' philosophy. Container max-width is set to 1280px to prevent text lines from exceeding 75 characters, optimizing readability. Margins between major sections (hero to product grid, product grid to testimonials) use xl spacing (64px) on desktop, scaling to lg (40px) on tablet and md (24px) on mobile. The gutter between grid co

Elevation & Depth

Visual hierarchy is conveyed through subtle shadow and surface layering rather than dramatic depth. Level 1 (Base): the page background is a warm, neutral surface (#fcfbf9) with no shadow. Level 2 (Standard Card): cards use box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) with a 1px border in outline-variant (#d1cdc4), creating a soft lift from the background. Level 3 (Elevated/Hover): on hover, cards transition to box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) and background-color shifts to surface-container-high (#f4f0e8), signaling interactivity. Modals and overlays use box-shadow: 0 16px 40px rgba(0,

Shapes

The shape philosophy is 'Soft-Technical'—rounded corners are used strategically to soften the clinical precision of the brand while maintaining modern sophistication. Buttons and chips use full rounding (border-radius: 9999px), creating pill-shaped forms that feel approachable and friendly. Cards and input fields use lg rounding (1rem / 16px), balancing softness with structure. Smaller UI elements like badges use md rounding (0.75rem / 12px). The rationale: full rounding on interactive elements (buttons, chips) invites touch and engagement; moderate rounding on containers (cards) maintains vis

Components

Action Elements Buttons are the primary interaction mechanism. The primary button uses background-color: {colors.primary} (#0d1f16), text-color: white, padding: 16px 32px, border-radius: 9999px, and typography: label-md (Montserrat 14px 700 weight). On hover, the background transitions to #1f3d2e (primary-container) over 200ms. The secondary button uses background-color: {colors.secondary} (#ab8c52), same padding and rounding, and on hover shifts to #806430 (secondary-hover). Tertiary buttons are transparent with a 1px border in outline (#d1cdc4) and text in tertiary (#282c2e); on hover, they gain a background-color: surface-container-high (#f4f0e8). All button transitions use cubic-bezier(0.2, 0, 0, 1) easing for a snappy, purposeful feel.

Containers & Surfaces Cards are the prim

Do's and Don'ts

**Do**

• Do use the warm beige background (#fcfbf9) as the default surface to create a sense of natural, trustworthy wellness.
• Do apply the forest green primary (#0d1f16) exclusively to CTAs and active states—never use it for passive text or backgrounds.
• Do pair Fraunces serif headlines with Neue Plak body text to balance elegance with approachability; never mix serif and sans-serif at the same scale.
• Do use full rounding (border-radius: 9999px) on all interactive buttons and chips to signal friendliness and engagement.
• Do maintain 24px gutters between grid columns and 40px section spacing to honor the brand's 'quiet, honest' philosophy of generous white space.
• Do apply the subtle shadow stack (0 1px 2px for standard, 0 4px 12px for hover) to create depth without drama; never use harsh, dark shadows.
• Do use the golden accent (#ab8c52) for secondary highlights, badges, and supporting UI; it reinforces the natural ingredient story without competing with the primary green.

**Don't**

• Don't use bright, saturated greens or blues—the forest green (#0d1f16) is the only green in the system; alternatives dilute clinical authority.
• Don't apply the primary color to body text, backgrounds, or non-interactive elements; reserve it exclusively for CTAs and active states.
• Don't mix typefaces within a single scale (e.g., don't use Fraunces for body text or Neue Plak for display headlines).
• Don't use sharp corners (0px border-radius) on any interactive element; all buttons, chips, and inputs must use at least lg rounding (1rem).
• Don't compress white space to fit more content—the brand's voice is 'quiet and honest,' which demands breathing room; maintain md (24px) minimum padding inside cards.
• Don't use harsh, dark shadows (e.g., 0 20px 60px rgba(0, 0, 0, 0.3)); the elevation system relies on subtle, soft shadows (0 1px 2px to 0 16px 40px) to maintain warmth.
• Don't introduce new accent colors outside the defined palette (primary green, secondary gold, tertiary charcoal, error red); consistency across all touchpoints builds trust.