Olive Branch
#6c853bHeading color and accent borders — the sole chromatic note, an organic olive green that gives the brand its botanical, anti-corporate feel
until
untillabs.comWebsite preview
The design language
Until presents a warm, editorial biotech identity: a cream-paper canvas (#f7f3ec) carries nearly all surfaces, text is near-black (#121212), and a single olive green (#6c853b) acts as botanical punctuation on headings and borders. The system is fundamentally photographic — full-bleed overhead lifestyle imagery replaces illustration, and copy rides directly over pictures with no tinted overlays. Typography carries the weight: Neue Haas Display in compressed tracking at near-1.0 line-height creates a Swiss editorial cadence, while Neue Haas Text at 14–16px keeps body content quiet. Everything is rounded generously — 32px on cards, 64px on buttons — producing soft, pill-heavy UI that feels like a printed science monograph rather than a dashboard. Shadows are almost imperceptible; the cream-on-cream layering and thick border lines (1px solid #121212) provide separation instead of elevation.
Color palette
brand
neutral
Parchment
#f7f3ecPage background, card surfaces, nav container — warm off-white that replaces pure white to soften the entire system
Ink
#121212Primary text, all borders, card outlines, nav links — near-black with a whisper of warmth, drives every structural line on the page
Black
#000000Link borders, footer accents, and icon fills — pure black reserved for high-emphasis micro elements
Paper
#ffffffButton fills, elevated surface accents, footer background — pure white used sparingly for contrast punctuation against the cream canvas
Mist
#bebebeDisabled or secondary body text and subtle dividers — sits below the ink line
Bone
#121c0fDeep text on light backgrounds where extra weight is needed — almost-black with a green undertone matching the olive
Typography
Type scale
Minor Third (1.2) · 16px basedisplay
69px · 500 · 0.9 · -2.55px trackingThe quick brown fox jumps
heading-lg
56px · 500 · 1 · -1.68px trackingThe quick brown fox jumps
heading
39px · 500 · 1 · -1.17px trackingThe quick brown fox jumps
heading-sm
32px · 500 · 1 · -0.96px trackingThe quick brown fox jumps
subheading
24px · 500 · 1.1 · -0.6px trackingThe quick brown fox jumps
body
16px · 400 · 1.5 · -0.14px trackingThe quick brown fox jumps
body-sm
14px · 400 · 1.43 · -0.35px trackingThe quick brown fox jumps
caption
12px · 500 · 1.4 · -0.3px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
neueHaasDisplay
- Weights
- 400, 500
- Sizes
- 16px, 24px, 32px, 39px, 56px, 69px
- Line height
- 0.90–1.50
- Letter spacing
- -2.55px at 69px, -0.96px at 32px, -0.4px at 16px
- Fallback
- Neue Haas Grotesk Display Pro, or Inter at matching weight + tight letter-spacing
Display and headings — from subhead at 24px to hero at 69px, with tight line-heights (0.90–1.10) and aggressive negative tracking (up to -0.037em) creating a compressed Swiss-editorial feel
Additional typeface
neueHaasText
- Weights
- 400, 500
- Sizes
- 14px, 16px
- Line height
- 1.43–1.50
- Letter spacing
- -0.35px at 14px, -0.14px at 16px
- Fallback
- Neue Haas Grotesk Text Pro, or Inter
Body copy, nav links, button labels, card text — 14px and 16px with moderate negative tracking (-0.025em at 14px, -0.009em at 16px), reads as a clean grotesque but not clinical
Additional typeface
Geist Mono
- Weights
- 400, 500
- Sizes
- 12px, 14px
- Line height
- 1.40–1.50
- Letter spacing
- -0.3px at 12px (normal), +0.7px at 12px (annotation)
- Fallback
- JetBrains Mono, IBM Plex Mono
- Features
- "ss01" on
Captions, annotations, code-like labels, scroll prompts — 12–14px with +0.05em tracking on the 12px size, adds a technical/research-lab accent
Spacing & shape
Spacing
- Density
- compact
- Base unit
- 8px
- Max width
- 1200px
- Section gap
- 48px
- Card padding
- 24px
- Element gap
- 8px
Border radius
nav
64pxcards
32pxsmall
6pxbadges
50pximages
24pxbuttons
64pxSpacing scale
4px8px10px12px16px24px28px32px40px48px71px96px128px138px257pxGuidelines
Do
- Use #f7f3ec as the page background on every screen; never substitute pure white for the main canvas.
- Set all headings in Neue Haas Display with letter-spacing between -0.020em and -0.037em — the negative tracking is the brand's editorial signature.
- Round all interactive elements to 64px (full pill) and all cards to 32px; the softness is non-negotiable.
- Use #6c853b olive only on heading text, heading underlines, and small annotation labels — never as a button fill or large surface.
- Use Geist Mono 12px with +0.05em tracking for bracketed micro-labels like '[ Scroll to discover ]' — these are decorative research-journal accents.
- Keep shadows to the single inset-highlight pattern (rgba(255,255,255,0.1) inset top and bottom + rgba(0,0,0,0.05) 0 3px 17px outer); avoid heavy drop-shadows.
- Maintain 48–96px vertical gaps between major sections; the page breathes like a printed magazine spread.
Don’t
- Do not use pure black (#000000) for body text — use #121212, which has a slight warmth matching the cream canvas.
- Do not introduce additional chromatic colors; the olive is the only accent and overusing it dilutes the botanical restraint.
- Do not use sharp corners (0–6px radius) on cards, buttons, or images — the rounded language defines the softness.
- Do not place text on tinted overlays over photography; headlines sit directly on images or on the cream canvas.
- Do not set body text below 14px or above 16px; the type scale is deliberately narrow and editorial.
- Do not use filled colored buttons — every CTA is a pill with a 1px #121212 border, either white or ghost.
- Do not use box-shadows heavier than the defined inset/outer combo; the system relies on cream-on-cream layering, not elevation.
Components
Pill Navigation Bar
Primary site navigationFloating capsule container with 64px border-radius, white or cream fill, 1px solid #121212 border, 16px vertical padding. Brand wordmark left, centered nav links at 14px Neue Haas Text weight 400, rounded 'Join Us' button right. Sits over the hero with a subtle inset highlight.
Pill Primary Button
Main call-to-action64px border-radius (full pill), white #ffffff fill, 1px solid #121212 border, 8px–16px horizontal padding, 14px Neue Haas Text weight 500, color #121212. Joins CTAs, contact actions, and team invites.
Pill Ghost Button
Secondary actionSame 64px radius and border as primary, but transparent fill over the cream canvas. Used in nav for 'Join Us' when not filled, and for lower-emphasis actions like FAQ links.
Hero Display Headline
First-screen editorial headlineNeue Haas Display 69px weight 400, line-height 0.90, letter-spacing -2.55px, color #121212 or #ffffff depending on image brightness. Sits bottom-left of the hero image, often paired with a Geist Mono 12px caption like '[ Scroll to discover ]'.
Editorial Image Card
Team / lab photography card32px border-radius, 1px solid #121212 border, no shadow. Image fills the card edge-to-edge. Small Geist Mono label (e.g., '| 3 |') sits above in olive #6c853b or ink.
Feature Image Card Grid
Four-column lab/team showcaseFour cards in a row, each 32px radius, 1px solid #121212 border, equal width with 16–24px gaps. Numbered annotations in olive above each card: '| 1 | A remarkably interdisciplinary lab'.
Recruitment Copy Block
Hiring section textTwo-column layout: bold statement left in Neue Haas Display 32–39px weight 500, supporting paragraph right in Neue Haas Text 16px weight 400, color #121212. Pairs with a primary pill button below.
Scroll Prompt Caption
Editorial micro-labelGeist Mono 12px, color #ffffff over hero images, often wrapped in brackets '[ Scroll to discover ]' with +0.05em letter-spacing — functions as a typographic ornament.
Top Header Strip
Above-nav utility barThin horizontal strip with the brand wordmark and three small dots on the left, nav links center, 'Join Us' pill right. Cream #f7f3ec fill, 1px #121212 bottom border.
Full-Bleed Hero Image
First-viewport visualEdge-to-edge photograph (overhead lifestyle, grass/picnic scenes), no overlay tint, no border-radius on the image itself. Headline overlays directly on the image at bottom-left.
Nav Pill Container
Floating navigation capsuleWhite #ffffff pill with 64px radius, 1px #121212 border, floats centered at top of inner pages (not the hero). Contains two small dots (page indicator) and the 'Join Us' CTA.
Borderless Stacked Section
Content block separatorSections flow into each other with only whitespace — no visible dividers. Vertical rhythm driven by 48–96px gaps between sections.
Surfaces & elevation
Level 0
Parchment Canvas
#f7f3ecBase page background — every page, every section
Level 1
Paper Elevation
#ffffffFloating nav capsule, primary button fills, footer, elevated badges
Level 2
Olive Accent
#6c853bDecorative heading accents and annotation labels only
Editorial Image Card
rgba(255, 255, 255, 0.1) 0px -1px 2px 0px inset, rgba(255, 255, 255, 0.1) 0px 1px 2px 0px inset, rgba(0, 0, 0, 0.1) 0px 0px 2px 0px, rgba(0, 0, 0, 0.05) 0px 3px 17px 0px
Floating Nav Pill
rgba(0, 0, 0, 0.043) 0px 7.5px 30px 0px, rgba(255, 255, 255, 0.3) 0px 1px 1px 0px inset
Layout & imagery
Layout
Max-width 1200px centered container, full-bleed hero, then alternating cream bands. Hero is a full-viewport photograph with a bottom-left display headline and a centered floating nav pill at top. Content sections use a 4-column card grid for visual showcases (lab/team), then transition to 2-column text-heavy blocks for hiring copy. Navigation is a thin header strip on the home page and a floating white pill capsule on inner pages. Vertical rhythm is generous (48–96px between sections) creating a magazine-spread cadence. The page reads top-to-bottom as: hero photo → 4-up card grid → recruitment copy block → footer.
Imagery
Photography dominates the visual language: full-bleed overhead lifestyle shots of people in nature (a couple on a picnic blanket in grass, lab scientists at work) serve as the entire hero and section visuals. No illustration, no product renders, no abstract graphics. Images are treated raw — no overlays, no duotone, no rounded crops except inside cards (24–32px). The photography style is warm, natural-light, slightly nostalgic, shot from above or at eye level in real environments. Icons are minimal and inline; most visual punctuation is typographic (brackets, pipes, mono annotations). Density is image-heavy in the hero and card grids, text-dominant in body sections.
Design notes
Agent Guide
Quick Color Reference: - text: #121212 - background: #f7f3ec - border: #121212 - accent: #6c853b - surface (elevated): #ffffff - primary action: no distinct CTA color Example Component Prompts: 1. Create a hero section: full-bleed photograph background, no overlay tint. Headline at 69px neueHaasDisplay weight 400, color #ffffff, letter-spacing -2.55px, line-height 0.90, positioned bottom-left. Below the headline, add a 12px Geist Mono caption in white with +0.7px tracking: '[ Scroll to discover ]'. 2. Create a four-column image card grid: each card 32px border-radius, 1px solid #121212 border, 1px inset highlight rgba(255,255,255,0.1). Above each card, a small olive label in 12px Geist Mono: '| 1 |', '| 2 |', etc., color #6c853b. 24px gap between cards, all on #f7f3ec background. 3. Create a floating nav pill: white #ffffff fill, 64px border-radius, 1px solid #121212 border, horizontal padding 24px, vertical padding 8px. Contains two small black dots (8px circles) on the left and a 'Join Us' text button on the right in 14px neueHaasText weight 500, color #121212. 4. Create a recruitment copy block: two-column layout on #f7f3ec. Left column: headline at 39px neueHaasDisplay weight 500, color #121212, letter-spacing -1.17px. Right column: body text at 16px neueHaasText weight 400, color #121212, line-height 1.5. Below left column, a pill button: white fill, 64px radius, 1px #121212 border, padding 8px 16px, label 'Join the team' in 14px neueHaasText weight 500. 5. Create a secondary ghost button: transparent fill, 64px border-radius, 1px solid #121212 border, padding 8px 16px, label in 14px neueHaasText weight 500, color #121212. Sits on the cream canvas.
Gradient System
A single decorative gradient appears on the site: linear-gradient(90deg, rgb(203, 53, 15) 0%, rgb(244, 224, 155) 50%, rgb(171, 193, 227) 100%) — a warm-to-cool sunset sweep (terracotta → cream → soft blue). This is used as a thin accent rule or section divider, not as a surface. Treat it as a rare typographic ornament, not a fill.
Similar brands
Ginkgo Bioworks
Same cream-canvas editorial biotech aesthetic with large display type and minimal chromatic palette
Modern Meadow
Similar warm off-white backgrounds, soft rounded cards, and bio-laboratory photography in lifestyle settings
Notion (marketing site)
Pill-shaped CTAs, generous border-radius on cards, and restrained near-monochrome palette with a single accent
Arc Browser
Cream canvas with near-black text, tight Neue-Haas-style display tracking, and full-bleed photographic hero treatment
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
