Moderna

Overview

Moderna is a biotechnology pioneer transforming medicine through mRNA innovation. The design system embodies 'Corporate Clarity'—a philosophy that merges scientific precision with human accessibility. The interface prioritizes information hierarchy, trust-building through clean typography, and purposeful use of the brand's signature red accent (#d1343e) on critical actions. The emotional response is one of confidence tempered by approachability: users should feel they're engaging with cutting-edge science delivered through thoughtful, uncluttered design.

The brand voice is authoritative yet conversational, avoiding jargon while maintaining scientific rigor. Moderna speaks to investors, healthcare professionals, patients, and the general public—each audience receives the same visual language but tailored messaging. Example sentence in brand voice: 'Our mRNA platform unlocks the potential to address diseases that have challenged medicine for decades.'

Colors

Moderna's color system balances corporate authority with biotech innovation. Primary (#d1343e) is the signature brand red—a warm, energetic accent reserved exclusively for call-to-action buttons, critical links, and interactive focus states. It commands attention without aggression, signaling 'act now' on career applications, blog reads, and investor relations. Secondary (#053f68) is a deep navy that anchors the header navigation and establishes institutional trust; it appears in backgrounds and secondary text to create visual weight and hierarchy. Tertiary (#376586) is a softer blue-gray used for supporting UI elements, badges, and tertiary buttons—it bridges the gap between the bold primary and neutral surfaces.

The surface stack is deliberately minimal: white (#ffffff) is the dominant

Typography

Moderna's type system uses Aeonik (a geometric sans-serif from the brand's custom font stack) across all scales, creating visual consistency and a modern, tech-forward personality. Display (60px, 700 weight, -0.04em tracking) anchors hero sections and major announcements; Headline-lg (40px, 700 weight) is reserved for page titles and key messaging. Body text (16px, 400 weight) is set at 24px line-height to ensure comfortable reading at typical viewing distances. The system enforces a strict weight hierarchy: 700 for headlines, 600 for labels and section titles, 400 for body and descriptive text. When displaying small labels over busy backgrounds (e.g., badge text on image overlays), apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to maintain contrast. Letter-spacing is tightened on displa

Layout

Moderna's layout follows a 12-column fluid grid with a 1280px container max-width, ensuring responsive scaling from mobile (single column) to desktop (full 12 columns). The page rhythm is governed by the spacing scale: lg (40px) separates major sections (hero, content blocks, footer), md (24px) defines internal padding within cards and containers, and sm (12px) is used for inline element spacing. The gutter width is 24px, maintaining consistent breathing room between grid columns. White-space is treated as a design element—generous margins around headlines (64px top padding on h1 elements) create visual hierarchy and reduce cognitive load. The container max-width of 1280px prevents line lengths from exceeding 80 characters on body text, optimizing readability. All spacing values are multip

Elevation & Depth

Depth in Moderna's design is achieved through subtle shadow layering and strategic use of borders, reflecting a 'Refined Minimalism' aesthetic. Level 1 (Base): flat white surfaces with no shadow; these are primary content areas and input fields. Level 2 (Elevated Cards): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) with a 1px solid border at #d0d0d0; used for cards, modals, and floating UI elements. Level 3 (Hover/Active): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) with the same border; applied on card hover and modal focus states. Shadows are soft and diffuse (8px blur, 0px offset) to avoid hars

Shapes

Moderna employs 'Geometric Precision'—a shape philosophy that balances approachability with technical sophistication. Border-radius follows a tiered scale: buttons and small interactive elements use lg (1rem / 16px) for a friendly, rounded appearance; cards and larger containers use xl (1.5rem / 24px) to soften edges without appearing playful; form inputs use DEFAULT (0.5rem / 8px) for a more structured, technical feel. The hero image in the homepage uses xl (1.5rem) to echo card styling and create visual cohesion. Full-radius (9999px) is reserved exclusively for badges and pill-shaped element

Components

Action Elements Buttons are the primary interaction pattern. The primary button (button-primary) uses the brand red (#d1343e) background with white text, 2px solid border, 48px height, and 12px 24px padding. On hover, the background shifts to the brighter primary-fixed (#ff4343) with a 200ms ease-in-out transition. The secondary button (button-secondary) inverts this: transparent background with red text and red border, shifting to a light gray background (#e9ecef) on hover. Both button variants use label-md typography (14px, 600 weight) and lg border-radius (16px). The tertiary button (button-tertiary) is a text-only variant with no border, using secondary navy text (#053f68), and applies a subtle background on hover. All buttons include a transition property (all 200ms ease-in-out) t

Do's and Don'ts

**Do**

• Do use primary red (#d1343e) exclusively on CTAs, links, and interactive focus states—never on passive backgrounds or body text.
• Do maintain 24px line-height on all body text (16px) to ensure comfortable reading and accessibility compliance.
• Do apply md elevation shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to cards and floating elements; never use drop-shadows on text.
• Do use Aeonik font family across all scales; fallback to Arial, sans-serif only if Aeonik fails to load.
• Do respect the 1280px container max-width on desktop to prevent line-length bloat and maintain readability.
• Do use the spacing scale (xs: 4px, sm: 12px, md: 24px, lg: 40px, xl: 64px) consistently; never invent arbitrary spacing values.

**Don't**

• Don't use secondary navy (#053f68) as a primary CTA color—it's reserved for header navigation and institutional framing.
• Don't apply text-shadow to body text; use it only on small labels (12px or smaller) over busy backgrounds at 0 2px 4px rgba(0, 0, 0, 0.15).
• Don't mix border-radius values arbitrarily; stick to the defined scale (sm: 4px, DEFAULT: 8px, md: 12px, lg: 16px, xl: 24px, full: 9999px).
• Don't use more than 2 font weights in a single section; maintain visual hierarchy through size and color, not weight proliferation.
• Don't apply shadows to elements smaller than 48px (button height); elevation is reserved for containers and cards.
• Don't use the inverse-primary cyan (#00b4f1) as a primary color; it's a complementary accent for hover states and subtle highlights only.