Everlab

Overview

Everlab embodies a 'Clinical Minimalism' aesthetic—a design philosophy that merges medical precision with warm, approachable sophistication. The brand serves health-conscious Australians seeking proactive disease prevention and longevity optimization, transforming complex biomarker data into serene, actionable insights. The UI prioritizes clarity through restrained color palettes (cream, warm beige, and deep charcoal), generous whitespace, and serif typography that evokes trust and expertise. The emotional response is one of calm confidence: users feel informed, supported, and empowered to take control of their health trajectory.

Everlab's voice is precise, compassionate, and never alarmist. The tone avoids medical jargon in favor of clear, conversational language; vocabulary emphasizes agency ('take control', 'proactive', 'discover') over fear. Example sentence in brand voice: 'Your biomarkers tell a story—let's write the next chapter together.'

Colors

The color system reflects a 'warm-neutral luxury' palette rooted in natural materials—cream, linen, and warm stone—paired with intentional accent colors for critical actions and status indicators. Primary (#181818, deep charcoal) anchors all interactive elements and text, providing high contrast against the cream surface (#f4f4f3) for accessibility and clarity. The surface stack progresses from the brightest cream (#fcfbf9) for elevated containers to warm beige (#e0bfa2) for secondary surfaces, creating visual hierarchy through subtle warmth rather than darkness. Secondary accent (#d04926, burnt orange) is reserved for calls-to-action and alerts, drawing attention without aggression; its lighter variant (#f17551, coral) appears on hover states and secondary CTAs. Tertiary green (#1db16b) s

Typography

The type system pairs Tobias (a refined serif) for headlines and display text with Saans (a humanist sans-serif) for body and UI copy, creating a visual hierarchy that feels both authoritative and approachable. Display (80px, 400 weight, -0.02em tracking) commands attention on hero sections; Headline-lg (56px) anchors major sections; Headline-md (40px) breaks up content rhythm. Body-lg (19.2px) and Body-md (16px) maintain readability at all screen sizes, with 1.5x line-height (28px and 24px respectively) to support scanning and comprehension of health information. Labels (14–16px, 500 weight, 0.01–0.02em tracking) provide clear affordances on buttons and form fields. All serif headlines receive a subtle text-shadow (0 2px 4px rgba(0, 0, 0, 0.08)) when rendered over images or busy backgroun

Layout

The layout system uses a 12-column grid with a max-width of 1440px, maintaining a fluid, responsive structure that scales gracefully from mobile (320px) to desktop. Container padding follows the spacing scale: 24px (md) on tablet and desktop, 12px (sm) on mobile, ensuring consistent breathing room. Section separation uses lg spacing (40px) vertically and md spacing (24px) horizontally, creating a rhythm that guides users through the health journey without overwhelming. Hero sections occupy 100vh on desktop, anchoring the brand's premium positioning; content sections use 60–80% of viewport width to maintain focus. Whitespace is treated as a design element, not a void—generous margins around cards (24px) and between sections (40px) reduce cognitive load and emphasize the brand's 'calm clarit

Elevation & Depth

Depth is achieved through subtle layering and soft shadows rather than dramatic contrast. Level 1 (Base): the cream surface (#f4f4f3) with no shadow, establishing the foundation. Level 2 (Standard Cards): 0 3px 8px rgba(0, 0, 0, 0.15), a soft shadow that lifts cards 4px above the surface, used for content containers and form fields. Level 3 (Elevated/Modals): 0 8px 24px rgba(0, 0, 0, 0.12), a larger blur radius (24px) and spread that creates perceived depth of 12px, reserved for modals, popovers, and primary CTAs. Hover states transition shadows smoothly (0.3s ease-out) to reinforce interactiv

Shapes

The shape philosophy is 'Refined Softness'—rounded corners that feel intentional and medical-grade, never playful or overly organic. Buttons use 14px (1rem) border-radius, balancing approachability with professional restraint; secondary buttons use 50% (full pill shape) to signal secondary or tertiary actions. Cards and containers use 24px (1.5rem) for a warm, inviting feel that avoids the coldness of sharp corners. Input fields use 14px to match button radius, creating visual cohesion in form layouts. The full (9999px) radius is reserved for badges and status indicators, where the pill shape

Components

Action Elements Buttons are the primary interaction pattern. The primary button (56px height, 18px vertical padding, 35px horizontal padding, 14px radius) uses deep charcoal (#181818) on cream, with a 0.2s ease-out transition to the primary-container color (#545454) on hover. The secondary button (48px height, 14px vertical padding, 24px horizontal padding, 50% radius) uses a white background with a 1px outline, creating a 'ghost' effect that signals lower priority. Tertiary buttons are transparent with a 1px border, used for 'Learn More' or exploratory actions. All buttons use the label-md typography (16px, 500 weight) and receive a focus ring (3px solid #181818 with 2px offset) for keyboard navigation.

Containers & Surfaces Cards (24px padding, 24px border-radius, 0 3px 8px shad

Do's and Don'ts

**Do**

• Do use the cream and beige surface stack to create visual hierarchy—never introduce new background colors outside the defined palette.
• Do apply the 0.2s ease-out transition timing consistently across all interactive elements (buttons, cards, inputs) for a cohesive feel.
• Do pair Tobias serif headlines with Saans sans-serif body copy to maintain the clinical-yet-warm aesthetic; never reverse this pairing.
• Do use the secondary accent (#d04926) exclusively for CTAs, alerts, and critical actions—never for decorative elements.
• Do maintain minimum 24px padding around card content and 40px vertical spacing between sections to preserve the 'calm clarity' positioning.

**Don't**

• Don't introduce shadows darker than rgba(0, 0, 0, 0.15) or blur radii larger than 24px—this breaks the warm, approachable aesthetic.
• Don't use the tertiary green (#1db16b) for CTAs or primary actions; reserve it strictly for success states and positive outcomes.
• Don't apply border-radius larger than 24px to cards or containers—this risks feeling playful rather than clinical.
• Don't mix serif and sans-serif fonts within a single headline or body paragraph; maintain clear typographic separation by role.
• Don't reduce padding below 12px (sm) on mobile or 24px (md) on desktop—whitespace is essential to the brand's positioning.