Cambrian Bio

Overview

Cambrian Bio is a clinical-stage biotech company pioneering therapeutics that redefine 21st-century healthcare. The design system embodies 'Precision Minimalism'—a philosophy that marries deep-tech credibility with human-centered warmth. The visual language is anchored in a sophisticated midnight-navy foundation (#081b42) that conveys scientific rigor and institutional trust, while teal accents (#48c0b9) and warm terracotta tones (#d8a76e) inject approachability and breakthrough optimism. The interface feels deliberate, never cluttered: every element earns its place through functional clarity and visual hierarchy. Users experience the brand as both intellectually rigorous and genuinely invested in their health outcomes.

The brand voice is precise, measured, and human. Cambrian speaks in declarative sentences grounded in data—never breathless, never overselling. The vocabulary favors scientific accuracy over marketing hyperbole: 'metabolic restoration' not 'revolutionary healing,' 'translational data' not 'miraculous results.' Typography pairs serif headlines (Tiempos) for authority with humanist sans-serif body copy (Brown) for warmth. Example sentence in brand voice: 'Our AMPK network activators restore metabolic function at the cellular level—delivering measurable outcomes in human trials.'

Colors

The color system operates on a dual-layer principle: a deep, trust-building surface layer and a vibrant accent layer that signals interactivity and breakthrough science.

**Surface Stack (Trust & Stability):** The primary surface is midnight navy (#081b42), applied to backgrounds and large containers. This color conveys institutional credibility and scientific seriousness—it's the canvas upon which breakthrough science unfolds. Surface containers range from #0a1635 (lowest, most recessed) to #214085 (highest, most prominent), creating subtle depth without visual noise. On-surface text is pure white (#ffffff) for maximum legibility; on-surface-variant (#c7d9ea) is used for secondary text and disabled states at 60% opacity.

**Primary Accent (Interactivity & Hope):** Teal (#48c0b9) is the si

Typography

The type system balances authority with accessibility through a serif-and-sans pairing rooted in editorial tradition. Headlines use Tiempos (a high-contrast serif) at weights 500–600, establishing intellectual credibility and visual hierarchy. The display size (60px, 68px line-height, -0.04em letter-spacing) commands attention on hero sections; headline-lg (40px, 48px line-height) anchors section introductions; headline-md (28px, 36px line-height) breaks up content. Body copy shifts to Brown (a humanist sans-serif) at 400 weight, 16–18px sizes, and 24–28px line-heights, ensuring comfortable reading at arm's length. Labels and UI text use Open Sans at 11–14px with 500–600 weight and 0.01–0.05em letter-spacing for crisp, scannable microcopy. On small labels over busy backgrounds (e.g., badge

Layout

The layout system uses a 12-column grid with a max-width of 1280px, ensuring content remains readable on ultra-wide displays while maintaining mobile fluidity. The hero section spans full viewport height (calc(100vh + 1vw) on desktop) to create immersive first impressions; secondary sections use calc(100vh + 2–5vw) to account for content depth. Horizontal gutters are consistently 24px (md spacing) on desktop, reducing to 12px (sm spacing) on tablets and 8px on mobile. Vertical rhythm follows a 40px (lg spacing) scale for section separation, with 24px (md spacing) for component clusters. Container padding uses the gutter token (24px) on all sides, creating breathing room around content. The layout philosophy is 'generous white space'—never cramped, always scannable. Asymmetric layouts (e.g.

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than aggressive drop-shadows. The elevation system defines three levels: sm (0 1px 3px rgba(0, 0, 0, 0.2)) for cards and input fields, md (0 2px 5px rgba(0, 0, 0, 0.3)) for modals and popovers, and lg (0 3px 8px rgba(0, 0, 0, 0.15)) for floating elements and tooltips. Cards use a 1px border at rgba(255, 255, 255, 0.1) combined with sm shadow to create a 'frosted glass' effect against the dark background. On hover, cards transition to rgba(255, 255, 255, 0.15) border and sm shadow over 200ms, signaling interactivity without lifting of

Shapes

The shape philosophy is 'Refined Geometry'—rounded corners are used purposefully to soften technical interfaces without sacrificing precision. Buttons and small interactive elements use 20px radius (lg), creating approachable, clickable targets that feel human-scaled. Cards and containers use 20px radius for consistency with buttons, reinforcing a cohesive component language. Input fields use 10px radius (DEFAULT), slightly tighter than buttons to signal 'form' rather than 'action.' Badges and pills use 9999px (full) radius, creating perfect circles or capsules that feel lightweight and modern

Components

Action Elements Buttons are the primary interface for user intent. The button-primary component uses teal (#48c0b9) background with dark navy text (#081b42), 44px height, 12px vertical / 24px horizontal padding, and 20px border-radius. The label-sm typography (11px, 500 weight, 0.05em letter-spacing) ensures crisp readability. On hover, the background transitions to primary-fixed-dim (#31767c) over 200ms ease-in-out, providing tactile feedback. Focus state adds a 3px ring at rgba(72, 192, 185, 0.1). Button-secondary uses a transparent background with a 1px teal border and teal text; on hover, it fills with rgba(72, 192, 185, 0.08). Button-tertiary uses warm terracotta (#d8a76e) for secondary CTAs, with the same sizing and interaction model. All buttons disable with 50% opacity and curs

Do's and Don'ts

**Do**

• Do use teal (#48c0b9) exclusively for primary CTAs and active states—it's the brand's signature accent and must remain distinctive.
• Do maintain 24px gutters on desktop and reduce proportionally on mobile (12px tablet, 8px mobile) to preserve the generous white-space philosophy.
• Do apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) to small labels over gradient backgrounds to ensure accessibility.
• Do use Tiempos serif for all headlines (h1–h3) and Brown sans-serif for body copy—never reverse this pairing.
• Do transition all interactive elements (buttons, cards, inputs) over 150–200ms ease-in-out to signal responsiveness without animation fatigue.
• Do use the frosted-glass card aesthetic (semi-transparent background + border) on dark navy surfaces—never use solid white cards.
• Do reserve tertiary accent (#d8a76e) for warmth and humanity; use sparingly on badges, decorative accents, and inverse contexts.

**Don't**

• Don't use sharp 90° corners on buttons or cards—the 10–20px radius is non-negotiable for brand consistency.
• Don't apply shadows >0 3px 8px rgba(0, 0, 0, 0.15)—excessive depth flattens the frosted-glass aesthetic.
• Don't use primary teal (#48c0b9) for body text or secondary elements; reserve it for interactive states only.
• Don't mix serif and sans-serif within a single headline or body paragraph—maintain strict typographic hierarchy.
• Don't disable animations entirely; use 200ms transitions on hover/focus states to maintain perceived responsiveness.
• Don't use system fonts (system-ui, -apple-system) for headlines—Tiempos serif is required for authority.
• Don't exceed 1280px container max-width; content becomes unreadable on ultra-wide displays.