---
version: alpha
name: Bloom Lab
description: Laboratory equipment that likes you. A high-key mint page, one acid green, one plum, and corners rounded further than is sensible.
meta:
  id: "theme-bloom-lab"
  model: "Claude Opus 5"
  author: "Claude Code"
  createdAt: "2026-09-01T19:34:32+09:00"
  updatedAt: "2026-09-02T16:52:37+09:00"
  version: "1.0.0"
  isNew: false
lookbook:
  tagline: Serious instruments with the corners taken off
  bestFor: Science and health consumer products, wellness apps, education, onboarding-heavy SaaS
  avoidFor: Enterprise procurement, legal, anything that must read as conservative
  defaultMode: light
  surfaceStyle: elevated
  accentUse: fill
  caseStyle: none
  borderWidth: 1px
  imageTreatment: soft
  motion:
    intensity: 4
    duration: 240ms
    ease: "cubic-bezier(0.34, 1.4, 0.64, 1)"
    signature: "A slight overshoot on entry. Things arrive with a small bounce."
  displayFont: Outfit
  displayKind: sans
  bodyFont: Outfit
  monoFont: DM Mono
colors:
  background: "#F2F9F0"
  foreground: "#242F26"
  card: "#E9F1E7"
  card-foreground: "#242F26"
  popover: "#E9F1E7"
  popover-foreground: "#242F26"
  primary: "#45961F"
  primary-foreground: "#081006"
  secondary: "#DDE8DB"
  secondary-foreground: "#242F26"
  muted: "#DDE8DB"
  muted-foreground: "#59695C"
  accent: "#872887"
  accent-foreground: "#F6FCF5"
  destructive: "#B6322D"
  destructive-foreground: "#F6FCF5"
  border: "#CAD4C8"
  input: "#CAD4C8"
  ring: "#45961F"
  chart-1: "#488F2A"
  chart-2: "#8070D7"
  chart-3: "#008578"
  chart-4: "#D86054"
  chart-5: "#0075A0"
colorsDark:
  background: "#0F1911"
  foreground: "#DBE7DD"
  card: "#19231B"
  card-foreground: "#DBE7DD"
  popover: "#19231B"
  popover-foreground: "#DBE7DD"
  primary: "#7DD05F"
  primary-foreground: "#041107"
  secondary: "#212F24"
  secondary-foreground: "#DBE7DD"
  muted: "#212F24"
  muted-foreground: "#8A978C"
  accent: "#D277D0"
  accent-foreground: "#041107"
  destructive: "#FF968A"
  destructive-foreground: "#041107"
  border: "#303C32"
  input: "#303C32"
  ring: "#7DD05F"
  chart-1: "#7EC763"
  chart-2: "#A396FF"
  chart-3: "#00D6C2"
  chart-4: "#EE7467"
  chart-5: "#6BCDFF"
typography:
  display-lg:
    fontFamily: Outfit
    fontSize: 58px
    fontWeight: 600
    lineHeight: 1.02
    letterSpacing: -0.025em
  headline-lg:
    fontFamily: Outfit
    fontSize: 34px
    fontWeight: 600
    lineHeight: 1.12
    letterSpacing: -0.02em
  headline-md:
    fontFamily: Outfit
    fontSize: 21px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: -0.01em
  body-lg:
    fontFamily: Outfit
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.62
  body-md:
    fontFamily: Outfit
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.58
  body-sm:
    fontFamily: Outfit
    fontSize: 13.5px
    fontWeight: 400
    lineHeight: 1.5
  label-caps:
    fontFamily: Outfit
    fontSize: 11px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: 0.14em
  label-mono:
    fontFamily: DM Mono
    fontSize: 12.5px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.02em
  numeral-xl:
    fontFamily: DM Mono
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: -0.03em
rounded:
  none: 0px
  sm: 8px
  md: 14px
  lg: 22px
  xl: 30px
  full: 9999px
spacing:
  base: 16px
  xs: 4px
  sm: 8px
  md: 16px
  lg: 26px
  xl: 52px
  gutter: 22px
  margin: 30px
  measure: 70ch
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    rounded: "{rounded.full}"
    padding: 13px
  button-secondary:
    backgroundColor: "{colors.card}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.full}"
    padding: 13px
  card-article:
    backgroundColor: "{colors.card}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.lg}"
    padding: 24px
  badge-label:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.secondary-foreground}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.sm}"
---

# Bloom Lab

## Overview

Bloom Lab is what happens when a piece of scientific software decides not to
frighten anyone. The page is a very light mint, cards are white and float on a
soft green-tinted shadow, and everything that can be rounded is rounded past the
point of neutrality — 22px on cards, full pills on buttons.

The seriousness comes back through the type and the numbers: one geometric sans
at every size, and a mono for every measurement, with units always set smaller
and in muted-foreground so the value dominates.

Personality: optimistic, tidy, competent. Friendly without being childish.

## Colors

A pastel ground with two saturated actors.

- **Ground (#F2F9F0):** Pale mint. Just enough green that white cards read as
  white.
- **Primary (#45961F):** Acid green. Buttons, active states, the "good" band on
  a range. It is the only green allowed to be saturated.
- **Accent (#872887):** Plum. The second semantic class — attention, out of
  range, the value being compared against. It is a fill, not a text colour.
- **Cards (#E9F1E7):** a step *up* from the ground, with a soft
  low-alpha shadow tinted green rather than grey.
- Charts are accented: primary, plum, then three quiet supporting hues. Two loud
  series and three that stay out of the way.

## Typography

One typeface, Outfit, at every size — display and body — plus DM Mono for
measurements.

- **Display:** Outfit at 58px, weight 600. Geometric sans set large reads as
  friendly rather than technical, which is the whole point.
- **Body:** Outfit at 16.5px with a 1.62 line height. Because display and body
  are the same family, hierarchy has to come from size and weight, so use both
  decisively — never a 17px heading above 16px body.
- **Labels:** sentence case, 11px, 600 weight. Nothing is uppercase.
- **Measurements:** DM Mono. The number is 400 weight at full size; the unit is
  the same size in muted-foreground.

## Layout

A 12-column grid at 1200px with 22px gutters. The signature move is a two-column
split where the left column is a tall card that stays put and the right column
scrolls — a specimen beside its readings.

Vertical rhythm is 4px with a generous 26px block gap. Cards never touch: there
is always at least 22px of mint between them, because the shadow needs room.

## Elevation & Depth

Cards float. The shadow is wide, soft and tinted with the ground's hue rather
than grey, at a very low alpha, and it increases on hover along with a 2px lift.
This is one of the two lookbook themes where a hover lift is correct.

Borders are hairline and mostly optional — the shadow is doing the separating.

## Shapes

Very round. 22px on cards, 30px on modals and large panels, full pills on
buttons, chips and avatars, 8px on badges. Inputs are pills too, which is
unusual and is the fastest way to recognise this theme.

Images are clipped to the card radius and get a soft, slightly lifted grade.

## Components

- **Buttons:** pill, solid green fill, white text, 13px padding. Hover lifts 2px
  and deepens the shadow.
- **Cards:** white, 22px radius, 24px padding, soft green shadow, hairline
  border only when two cards sit edge to edge.
- **Range readouts:** a pill track in muted with a green fill and a plum marker
  for the compared value. This is the theme's signature component.
- **Inputs:** pill, 1px border, white fill, green focus ring at 3px offset.
- **Badges:** pill, plum or green fill at 15% tint with full-strength text.

## Do's and Don'ts

- Do round everything, including inputs.
- Do tint the shadows with the ground hue instead of using grey.
- Do let the mint ground show between cards.
- Don't use a second typeface for headings.
- Don't set the plum as body text — it is a fill colour.
- Don't crowd the cards; this theme collapses when the shadows overlap.
- Don't remove the overshoot from the easing. The small bounce is the character.