Momentum

Overview

Momentum is South Africa's preeminent financial services provider, serving individuals and businesses with medical aid, insurance, investments, and estate planning solutions. The brand embodies **Confident Clarity**—a design philosophy that transforms complex financial concepts into intuitive, empowering experiences. The aesthetic is contemporary and direct: bold primary red (#ff3a30) commands attention on call-to-action elements, while a clean white canvas (surface: #ffffff) and deep navy secondary (#003366) create a trustworthy, professional foundation. The UI voice is assertive yet accessible, avoiding jargon while maintaining precision. Example: "Your success has a number. Defined by her. Backed by advice." This reflects Momentum's commitment to personalization and expert guidance—every interaction should feel like a conversation with a trusted advisor, not a transaction with a faceless institution.

Colors

The color system operates on a **Trust + Energy** duality. Primary red (#ff3a30) is reserved exclusively for high-intent actions: primary CTAs ("Register now", "Book a consultation"), active states, and brand moments that demand user attention. This vivid, warm red appears at 111 instances across the site, signaling urgency and confidence without aggression. Secondary navy (#003366) anchors the interface as the authority color—used in headers, navigation, and secondary buttons to convey stability and expertise. The surface stack progresses from pure white (#ffffff, surface) through subtle grays (#f9f9f9 surface-dim, #e8e8e8 surface-container-high) to create depth without visual noise. On-surface text (#1a1a1a, 87% opacity for body text) ensures 7:1 contrast for accessibility. Error states

Typography

The type system centers on **The Curve Variable** font family, a modern, geometric typeface that conveys forward momentum and clarity. Display text (62px, 800 weight, -0.02em tracking) commands hero sections with authority; headline-lg (40px, 700 weight) structures major content zones; body-md (16px, 400 weight, 24px line-height) ensures comfortable reading at standard viewing distances. The label-md tier (14.5px, 550 weight) is calibrated for button text and form labels, providing visual distinction without sacrificing legibility. Letter-spacing ranges from -0.02em (display, tightening large text) to 0.02em (labels, adding breathing room to small caps). Line-height is consistently generous—28px for body-lg, 24px for body-md—reflecting a premium, spacious aesthetic. On hero sections with w

Layout

The layout operates on a **12-column fluid grid** with a max-width of 1280px, ensuring content remains readable on desktop while adapting gracefully to tablet and mobile viewports. Container padding uses the gutter token (24px) on all sides, creating consistent breathing room. Section separation employs lg spacing (40px) between major content blocks, while internal card padding uses md spacing (24px). The hero banner spans full-width with a semi-transparent dark overlay (rgba(0, 0, 0, 0.25)) to ensure text legibility over photographic backgrounds. Cards and containers use border-radius: 24px (lg token) for rounded corners, creating a soft-technical aesthetic that feels modern without appearing playful. The grid accommodates both single-column (mobile) and multi-column (desktop) layouts, wi

Elevation & Depth

Depth is conveyed through a **restrained shadow system** that avoids visual heaviness. Level 1 (base surface) uses no shadow, establishing a clean foundation. Level 2 (cards, inputs) applies box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), a subtle lift that separates interactive elements from the background without drawing excessive attention. Level 3 (modals, dropdowns, elevated cards on hover) uses box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), providing clear visual separation while maintaining the professional aesthetic. The shadow system avoids blur radii larger than 8px, preventing the "floating"

Shapes

The shape philosophy is **Soft-Technical**: rounded corners signal approachability and modernity, while consistent radius values maintain systematic coherence. Buttons and chips use border-radius: 24px (lg token, 1rem), creating a pill-like appearance that feels friendly yet professional. Cards and containers use border-radius: 12px (md token, 0.75rem), a moderate radius that balances softness with structure. Input fields use border-radius: 4px (DEFAULT token, 0.5rem), a subtle radius that preserves the form's functional appearance. Circular elements (avatars, badge indicators) use border-radi

Components

Action Elements Buttons follow a three-tier hierarchy. **Primary buttons** (button-primary) use background-color: #ff3a30, color: #ffffff, border-radius: 24px, padding: 12px 24px, height: 48px, with no shadow. On hover, background shifts to #ff6b63 (primary-fixed-dim) with transition: background-color 0.2s ease-out, providing immediate visual feedback. Active state darkens to #e63028, signaling commitment. **Secondary buttons** (button-secondary) use background-color: #003366, maintaining the same dimensions and radius. Ghost buttons (button-ghost) use transparent background with border: 1px solid #ff3a30 and textColor: #ff3a30, allowing secondary actions to coexist without visual competition. On hover, ghost buttons fill with background-color: #ffb3ad (primary-container) at 100% opaci

Do's and Don'ts

**Do**

• Do use primary red (#ff3a30) exclusively for high-intent CTAs and active states—never for decorative or secondary elements.
• Do maintain 24px (lg spacing) between major content sections and 12px (sm spacing) between related elements within a card.
• Do apply text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) to white text on photographic backgrounds to ensure 7:1 contrast.
• Do use border-radius: 24px on buttons and border-radius: 12px on cards to maintain the Soft-Technical aesthetic.
• Do transition all interactive state changes (hover, focus, active) over 0.2s ease-out to provide clear feedback without jarring motion.
• Do pair The Curve Variable at 62px, 800 weight for display text with body-md (16px, 400 weight) for comfortable reading.
• Do use the full Material 3 color token stack—never hardcode hex values inside component definitions.

**Don't**

• Don't use primary red (#ff3a30) for error states or destructive actions—reserve #a30000 (error) for those roles.
• Don't apply shadows larger than 0 3px 8px rgba(0, 0, 0, 0.15) on standard cards; excessive depth creates visual clutter.
• Don't use border-radius: 0px on interactive elements; the Soft-Technical aesthetic requires at least 4px rounding.
• Don't exceed 40px (lg spacing) for section separation; excessive white-space fragments content and reduces perceived coherence.
• Don't mix The Curve Variable with system fonts (Segoe UI, Roboto) in the same visual hierarchy; maintain typographic consistency.
• Don't apply transitions longer than 0.2s on hover states; users perceive delays over 200ms as sluggish.
• Don't use opacity-based overlays on photographic backgrounds without testing contrast; aim for WCAG AA (7:1) minimum on all text.