Biolyz

Overview

Biolyz embodies a "Scientific Minimalism" aesthetic—a design philosophy that prioritizes clarity, precision, and data-driven decision-making through a high-contrast, reductive visual language. The brand serves elite athletic teams and individual athletes seeking non-invasive biomarker insights; the UI transforms complex biological data into actionable intelligence without visual noise or decoration. The interface is intentionally austere: a near-white background (#fbfefb), deep charcoal text (#232323), and a vivid electric blue accent (#0013e9) that commands attention on CTAs and critical insights. Depth is achieved through subtle shadows (0 3px 8px rgba(0,0,0,0.15)) and strategic use of neon-green secondary accents (#c6ff00) for highlights and status indicators.

The brand voice is direct, authoritative, and athlete-centric—no marketing hyperbole, only facts. Tone: confident yet accessible, technical yet conversational. Example: "Your saliva tells the story. We decode it in 48 hours." The typography pairing of Nohemi (display/headlines) and DM Sans (body/UI) reinforces this duality: Nohemi's geometric precision signals scientific rigor, while DM Sans's humanist warmth keeps the interface approachable. The design system rejects gradients, blur effects, and ornament; instead, it relies on bold color contrast, generous whitespace (lg spacing: 40px for section separation), and purposeful hierarchy to guide users through performance data.

Colors

The color system is built on a foundation of scientific clarity: a near-white surface (#fbfefb) provides the canvas, while a deep neutral black (#232323) serves as the primary text color for maximum legibility and contrast (WCAG AAA compliant at 16.5:1). Primary blue (#0013e9) is the signature accent—used exclusively on CTAs ("Book a demo", "Join the Journey"), focus states, and key interactive elements. This electric blue is intentionally saturated and high-energy, reflecting the intensity of athletic performance optimization. Secondary neon-green (#c6ff00) and melon-green (#f1ffbf) act as status indicators and highlight accents, particularly in data visualization and achievement badges. Tertiary light cyan (#dcf4ff) provides a soft, scientific counterpoint for secondary containers and in

Typography

The type system enforces a clear hierarchy that mirrors the brand's scientific precision. Nohemi (fontWeight: 500, letterSpacing: -0.04em) is reserved for display and headline scales—its geometric, slightly condensed letterforms communicate authority and technical expertise. The display size (132px, lineHeight: 140px) dominates hero sections with commanding presence; headline-lg (56px) and headline-md (40px) break content into digestible sections. DM Sans (fontWeight: 400 for body, 500 for labels) handles all UI text and body copy, with careful attention to line-height (28px for body-lg, 24px for body-md) to ensure readability at smaller sizes and on mobile. Labels use 500 weight and 0.01em letter-spacing to add subtle emphasis without appearing heavy. All text uses -webkit-font-smoothing:

Layout

The layout system uses a 12-column grid with a fixed max-width of 1280px, centered on the viewport. Spacing follows a semantic scale: xs (4px) for micro-adjustments, sm (12px) for component internal padding, md (24px) for gutter and section padding, lg (40px) for major section separation, and xl (64px) for hero/footer spacing. The design favors generous whitespace—sections are separated by lg spacing (40px) minimum, and card padding uses md (24px) on desktop, reducing to sm (12px) on mobile. Container padding is consistently gutter (24px) on desktop, 3% on mobile. The grid is fluid below 1280px, scaling proportionally via viewport-width calculations (e.g., font-size: 1.25vw for responsive heroblock text). Hero sections occupy full viewport height with centered content; secondary sections u

Elevation & Depth

Depth in Biolyz is conveyed through a restrained shadow system and subtle vertical displacement on interaction. The elevation scale consists of three levels: sm (0 2px 4px rgba(0,0,0,0.08)) for resting cards and subtle separation, md (0 3px 8px rgba(0,0,0,0.15)) for hover states and secondary modals, and lg (0 8px 24px rgba(0,0,0,0.12)) for primary modals and elevated overlays. Shadows are always soft and diffuse, never sharp; they use a 15% black opacity to maintain the light, scientific aesthetic. On hover, cards lift 4px (transform: translateY(-4px)) and gain md shadow, signaling interactiv

Shapes

The shape philosophy is "Functional Geometry"—rounded corners are used sparingly and purposefully to soften the scientific austerity without introducing organic or playful aesthetics. Buttons use full border-radius (9999px) to create pill-shaped CTAs that feel modern and inviting, contrasting with the sharp geometry of the overall layout. Cards and containers use lg radius (1rem / 16px) for a subtle roundness that signals containment without softness. Input fields use DEFAULT radius (0.5rem / 8px) for a more technical appearance. Modals and dropdowns use md radius (0.75rem / 12px). The rationa

Components

Action Elements Buttons are the primary interactive affordance and use two distinct variants. Primary buttons (backgroundColor: #0013e9, textColor: #ffffff, padding: 12px 24px, borderRadius: 9999px, height: 48px) are reserved for high-priority CTAs like "Book a demo" and "Join the Journey." On hover, the background darkens to #0010c4, the button lifts 2px (transform: translateY(-2px)), and shadow elevation increases to md (0 3px 8px rgba(0,0,0,0.15)). Active state uses #000d9f. Secondary buttons (backgroundColor: transparent, border: 2px solid #0013e9, textColor: #0013e9) are used for lower-priority actions; on hover, the background fills with primary-container (#dde5f1) while the border remains primary blue. All button text uses label-md typography (DM Sans, 16px, fontWeight: 500). Tr

Do's and Don'ts

**Do**

• Do use primary blue (#0013e9) exclusively on CTAs and focus states—it is the brand's signature accent and must never be diluted or overused.
• Do maintain minimum 48px touch targets for all interactive elements (buttons, links, form fields) to ensure accessibility on mobile devices.
• Do apply lg spacing (40px) between major sections and md spacing (24px) for internal component padding to preserve the generous, scientific whitespace aesthetic.
• Do use Nohemi for all display and headline text (sizes 40px and above) and DM Sans for body and UI text to maintain the precision/warmth duality.
• Do apply the md shadow (0 3px 8px rgba(0,0,0,0.15)) on hover and lift elements 2–4px to signal interactivity without changing color.
• Do use full border-radius (9999px) exclusively on buttons; all other elements use 0, lg (1rem), or md (0.75rem) radius to maintain hierarchy.

**Don't**

• Don't use secondary colors (neon-green #c6ff00, cyan #dcf4ff) on primary CTAs—reserve them for badges, highlights, and data visualization only.
• Don't apply gradients, blur effects (backdrop-filter), or glassmorphism—the aesthetic is flat, high-contrast, and scientifically austere.
• Don't center-align body copy or use text-align: center for paragraphs longer than 2 lines; always use left-align with max-width: 65ch for readability.
• Don't use shadows darker than rgba(0,0,0,0.15) or spread shadows beyond 8px—keep elevation subtle and diffuse to maintain the minimal aesthetic.
• Don't mix rounded and sharp corners on the same component; buttons are full-radius, cards are lg-radius, and structural elements are 0-radius.
• Don't use more than 3 font sizes in a single section; rely on weight (400 vs 500 vs 600) and letter-spacing to create hierarchy within a tight typographic scale.