Until Labs

Overview

Until Labs is a biotechnology company pioneering whole-body cryopreservation to extend organ viability and save transplant lives. The design system embodies **Warm Minimalism with Scientific Precision**—a movement that pairs austere, grid-based architecture with earthy, human-centered color choices. The aesthetic rejects cold sterility in favor of approachable sophistication: warm off-white backgrounds (#f7f3ec), burnt-orange accents (#cb350f), and muted earth tones create an environment that feels both rigorous and humane. The UI evokes calm clarity—the visual equivalent of a laboratory where hope and precision coexist.

The brand voice is measured, optimistic, and direct. Until speaks in declarative statements grounded in scientific fact, never hyperbolic. Vocabulary favors concrete nouns (organ, recipient, preservation) over abstract adjectives. Tone example: "Every organ preserved is a life extended—we're building the infrastructure to make that scale." The personality is earnest without being breathless, technical without being cold.

Colors

The color system is anchored in a warm, off-white surface (#f7f3ec) that serves as the primary canvas—this is not pure white but a slightly yellowed, natural tone that reduces eye strain and conveys approachability. The primary accent is a burnt-orange (#cb350f), used exclusively on call-to-action buttons, active states, and key interactive elements. This warm accent appears sparingly but decisively, drawing attention to critical user actions like "Join Us" or "Contact." Secondary colors include a muted sage green (#465724) for supporting information and status indicators, and a dusty blue (#5880bd) for tertiary accents and data visualization. The error state uses a clinical red (#e40014) to signal urgency without warmth. Surface variants range from near-white (#ffffff) for elevated cards

Typography

The type system pairs Neue Haas Display (headlines, display) with Neue Haas Text (body, labels), creating a clear hierarchy between announcement and narrative. Display and headline weights (600–700) are reserved for section titles and hero statements; they use tight letter-spacing (-0.04em to -0.02em) to convey authority and precision. Body text (16–18px, 400 weight, 24–28px line-height) is set generously to ensure readability on the warm background and to reflect the brand's unhurried, thoughtful tone. Labels and UI text (12–14px, 500–600 weight) use +0.01em to +0.05em letter-spacing to add visual separation and formality. For small labels over textured or busy backgrounds, apply a subtle text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) to maintain contrast without harshness. All type is left-a

Layout

The layout system uses a 12-column grid with a max-width of 1080px, maintaining a fluid-to-fixed breakpoint strategy: below 768px, columns collapse to 4; above 1024px, the container remains fixed at 1080px with symmetric gutters of 24px. Section separation uses lg spacing (40px) for major content blocks, md spacing (24px) for subsections, and sm spacing (12px) for inline elements. The off-white background (#f7f3ec) provides visual continuity; white cards (#ffffff) float above it with soft shadows (0 3px 8px rgba(0, 0, 0, 0.15)) to create subtle depth without visual noise. Padding inside cards is consistently md (24px), with internal text blocks using sm (12px) gutters. The design favors generous whitespace—no element should feel crowded. Container max-width is 1080px to ensure readability

Elevation & Depth

Depth is achieved through a restrained shadow and surface-color system rather than aggressive layering. Level 1 (Base): The warm off-white background (#f7f3ec) with subtle noise texture (preloaded as /noise.avif) provides the foundation. Level 2 (Standard Cards): White cards (#ffffff) with a 1px border in surface-variant (#e5e7eb) and a soft shadow (0 3px 8px rgba(0, 0, 0, 0.15)) sit above the base. Level 3 (Elevated/Modals): Darker surface-container (#f9fafb) with a stronger shadow (0 8px 24px rgba(0, 0, 0, 0.12)) and a 1px border in outline-variant (#bebebe). Header navigation uses a frosted

Shapes

The shape philosophy is **Architectural Softness**—sharp enough to feel modern and precise, soft enough to feel human. Buttons and primary interactive elements use md radius (0.75rem / 12px), striking a balance between geometric clarity and approachability. Cards and containers use lg radius (1rem / 16px) to feel slightly more organic. Inputs and form fields use DEFAULT radius (0.5rem / 8px) for a technical, utilitarian feel. Badges and small UI elements use full radius (9999px) for a pill shape, signaling secondary or supplementary information. The header navigation uses lg radius (1rem / 16p

Components

Action Elements Buttons are the primary call-to-action mechanism. The primary button uses the burnt-orange background (#cb350f) with white text, md radius (12px), and 12px 24px padding, resulting in a 48px height. On hover, the background shifts to the lighter orange (#ff6a44) with a 200ms transition. On active/press, the background darkens to #a32506. Secondary buttons use a transparent background with a 1px outline in outline (#6a7282), the same padding and height, and shift to surface-container-high (#e5e7eb) on hover. Both button types use label-md typography (14px, 600 weight, 0.01em letter-spacing).

Containers & Surfaces Cards are the primary container for content. Standard cards use a white background (#ffffff), lg radius (16px), md padding (24px), a 1px border in surface-v

Do's and Don'ts

**Do**

• Do use the burnt-orange primary (#cb350f) exclusively on CTAs and active states—it is the visual anchor for user intent.
• Do maintain generous whitespace (lg spacing, 40px) between major sections to reflect the brand's thoughtful, unhurried tone.
• Do apply soft shadows (0 3px 8px rgba(0, 0, 0, 0.15)) to cards and elevated surfaces; avoid harsh, pure-black shadows.
• Do use Neue Haas Display for headlines with tight letter-spacing (-0.02em to -0.04em) to convey precision and authority.
• Do pair the warm off-white background (#f7f3ec) with deep charcoal text (#121212) for maximum readability and warmth.

**Don't**

• Don't use pure white (#ffffff) as the primary background; the warm off-white (#f7f3ec) is the canvas—white is reserved for elevated cards.
• Don't apply the primary orange to more than 5–8% of the interface; overuse dilutes its impact and confuses the visual hierarchy.
• Don't use sharp corners (0px radius) on any interactive element; minimum 8px radius maintains the approachable aesthetic.
• Don't center-align body text or multi-line content; left-alignment is the default for readability and hierarchy.
• Don't use pure black (#000) for text or shadows; always use the charcoal (#121212) or warm-tinted shadows (rgba(0, 0, 0, 0.15)) to maintain warmth.