Design System Inspiration of Bloom & Wild

Overview

Visual Theme & Atmosphere

Bloom & Wild is a British flower and gifting company, founded in 2013 by Aron Gelbard and Ben Stanway in London, known for flowers that fit through the letterbox. Its site describes the brand in one line — “We don’t just send gifts. We help you care wildly.” — and its footer shows the family it now belongs to: Bloom & Wild in the UK, Ireland, Germany and Austria, bloomon in the Netherlands, Belgium and Denmark, and Bergamotte in France. It is a certified B Corp.

That family explains why the stylesheet carries a second, much larger token layer (--oasys-*, 889 declarations) beside Bloom & Wild’s own 60: a platform shared across the group’s brands. No design-system page exists — bloomandwild.com/design-system returns the same generic 404 as a nonsense-path control.

The landing page is warm and paper-toned: a near-black ink (#262626) on white, warmed by a linen cream (#f9ecd7), a bright lemon (#fdf888) and a muted pine-green (#447964), with soft two-layer shadows built from rgba(0,0,0,.1) and rgba(0,0,0,.07). Buttons are almost square — a 2px radius that sits outside the site’s own 0/4/8/12/16/9999 radius scale — while the search control is a full pill.

What makes it worth reading:

• Two foundry faces, both self-hosted. Tiempos Headline (Klim) and Unica 77 LL (Lineto) both load and render, served as hashed webfont files from Bloom & Wild’s own asset host rather than a foundry CDN.
• Hover is quiet. The primary, outline and nav controls show no visible change beyond an authored focus ring; the header search pill fills with a cream tint and the Log in link underlines.
• A shared group platform underneath. --oasys-* supplies the universal focus-ring blue and feeds at least one brand colour (the pine-green ramp) without being a Bloom & Wild-specific namespace itself.

Primary tasks

• Browse and buy letterbox flowers and gifts; claim a promotional offer.
• Search for products; log in; browse by occasion (e.g. Birthday Gifts) via mega-nav.

Brand Narrative

Bloom & Wild’s landing surface reads as warm and restrained: a near-black ink and white base, lit by cream, lemon and pine-green bands, with almost no interactive colour change beyond a shared focus ring. The one type pairing that carries the brand’s visual identity — Tiempos Headline for display, Unica 77 LL for everything else — is self-hosted rather than served from a foundry, and both faces load and render on the homepage.

The token structure tells a group story as much as a brand one: a compact, 60-variable Bloom & Wild layer sits on top of an 889-variable --oasys-* platform shared with its sibling brands (bloomon, Bergamotte) since the 2021 group formation — visible in the identical focus-ring blue and the borrowed pine-green value. No rebrand case study or design-system page documents the Tiempos/Unica pairing publicly; it is read here from the rendered page alone.

Principles

• Near-monochrome, warmed by bands. #262626 on white, lit by linen and lemon.
• Interaction is quiet. Half the controls don’t change on hover; the focus ring is the constant.
• Two foundry faces, self-hosted. Tiempos Headline for display, Unica 77 LL for the rest.

Personas

Not researched. No persona claim is made from a UI capture.

Colors

Measured with getComputedStyle(document.documentElement) plus a recursive stylesheet walk: 60 custom properties at :root, 965 declarations across all rules.

Root namespaces (60 at :root)

Brand colours (--bwBrand__*)

• Ink / Foreground (#262626) — --bwBrand__text, the dominant text colour (179 of the sampled text-bearing tags) and the fill behind the primary CTA (6 background occurrences). Body ink inside <p> tags confirms #262626 as the brand text token, not a separate nav grey.
• Canvas (#ffffff) — --bwBrand__background, the dominant background (60 occurrences).
• Linen (#f9ecd7) and its tints #f4e8cd / #f9ecd7 — warm cream section backgrounds.
• Lemon (#fdf888) — a bright accent background (4 occurrences).
• Pine-green (#447964) and its 50%-tint Pine-green light (#a1bcb1) — used as a background (5 occurrences) and a rare accent text colour, and as a border colour (2 occurrences). One darker one-off green, #065d4d, appears once and is not tokenised.
• Error (#db4141) — the --bwBrand__error token.
• Two shadow-colour primitives, rgba(0,0,0,.1) (tight blur) and rgba(0,0,0,.07) (loose blur), compose the three named shadow recipes (--bwBrand__box-shadow, --box-shadow--inverse, --box-shadow--bottom-only) — no shadow was observed on any of the six probed interactive controls, so elevation is reserved for cards/panels, not buttons or links.

Foreground-muted and border

• Foreground-muted (#534e46) — a warm grey used for the search input’s resting text and supporting labels (8 occurrences).
• Border (#e2e0dc) — a light grey hairline, the search input’s resting border.
• Two pale tint families recur across the rendered census without a named root variable: a pale green (#dfe9e3), a pale pink/blush (#f9dfd9 / #faeeef), and a dark 30%-opacity overlay (color(srgb .149 .149 .149 / .3), roughly #262626 at 30% alpha) — recorded in prose, not as a hex token, since it is not a flat 6-digit colour.

Interaction colour: the group platform

Focus-ring blue (#2771fc) — --oasys-color-blue-50, the Bloom & Wild Group’s shared platform colour, not a --bwBrand__* token. It is the one colour that appears identically on every one of the six probed controls’ focus state, regardless of the control’s own resting colour. --oasys-color-green-60 (#447964) is identical to --bwBrand__pine-green — the group ramp feeds at least this one brand value — but the other 887 --oasys-* declarations (partner colours for PayPal, Facebook, Trustpilot; blush/buttercream/lilac ramps) are not seen rendered on Bloom & Wild’s own surface and are excluded from its brand token count.

Search-hover tint

Search-hover (#fcf5ea) — the only real, colour-changing hover found across the six probed controls: the header search pill’s rest-to-hover fill, close to the linen family but a distinct lighter cream.

Typography

Font family

• Display — "Tiempos Headline", computed on h1. Only the 700 (Bold) weight is present as a loaded face; no Regular or Medium weight was found, consistent with a display-only headline face.
• Sans / body — "Unica 77 LL TT", computed on body. Buttons compute a fallback stack (Unica77, Arial, Helvetica, sans-serif) that resolves to the same loaded face. document.fonts shows Unica 77 LL TT at both 500 (Medium) and 400 (Regular).

document.fonts (status === 'loaded'), deduped:

Tiempos Headline   700 normal
Unica 77 LL TT     500 normal
Unica 77 LL TT     400 normal

Both are self-hosted, served from relative ./media/ paths with hashed filenames (e.g. TiemposHeadlineWeb-Bold-5AMXWUK5.woff2, Unica77LLWeb-Medium-QGRSVCXK.woff2, Unica77LLWeb-Regular-CCQNHAFT.woff2) — both are served from Bloom & Wild’s own asset host, not a foundry CDN. No Google Fonts and no external font <link> were found.

Scale (rendered, not a published token scale)

No --font-size-* or --text-* custom-property scale was found at :root; sizes above are read directly off the probed controls and headline.

Layout

• Warm paper tones (linen #f9ecd7, lemon #fdf888) alternate with white and pine-green (#447964) to structure sections, rather than borders or shadows.
• A fixed set of layout heights (--bw-nav__top--height: 120px, --bw-navbar__bottom--height: 62px, --bw-servicebar--height: 32px, --bw-site-header-content-height: 113px) governs the header stack.
• Image aspect ratios are tokenised per placement (--ui__hero-banner: 16:10 desktop / 3:4 mobile; --ui__main-image and --ui__secondary-image: 1:1; --ui__generic-content-block-item: 5:3; --ui__expressive-list-odd: 3:4 / -even: 1:1; --ui__story-block-image: 4:3; --ui__blog-hero-image: 1:1; --ui__blog-item-square: 1:1; --ui__blog-item-rectangle: 3:4), with a shared --ui__gutter-width: 12px.

Responsive Behavior

Not measured. The probe ran at a single 1440×1000 desktop viewport; no mobile breakpoint or layout was rendered this session.

Elevation & Depth

Three shadow recipes, all built from the same two blur-colour primitives:

--bwBrand__box-shadow:              0 0 3px rgba(0,0,0,.1), 0 1px 32px rgba(0,0,0,.07)
--bwBrand__box-shadow--inverse:     0 0 3px rgba(0,0,0,.1), 0 -1px 32px rgba(0,0,0,.07)
--bwBrand__box-shadow--bottom-only: 0 4px 3px -3px rgba(0,0,0,.1), 0 38px 32px -32px rgba(0,0,0,.07)

No shadow was observed at rest on any of the six probed interactive controls — elevation is reserved for card/panel surfaces, not buttons or links.

Motion & Easing

No transition duration or easing token was found on the six probed controls or in the root custom properties; state changes (where present) render without a measured animation curve this session.

and 965 stylesheet declarations read via getComputedStyle and a recursive rule walk; six components measured at rest, hover, pressed and focus via scripts/probe-component-states.mjs; Tiempos Headline and Unica 77 LL TT confirmed loaded via document.fonts, captured 2026-09-26); (nonsense-path control — the same generic 404, “Uhoh! We can’t find the page…”, as bloomandwild.com/design-system, confirming no official design-system page exists on this host, captured 2026-09-26); (the “care wildly” line; the footer lists the bloomon and Bergamotte sites and the B Corp certification, read 2026-09-26)

Regional sources: (UKTN, 2021-01-18 — “Bloom & Wild raises £75M, London-based online flower delivery and gifting startup achieves 160% growth in revenue”; founded in 2013 by Aron Gelbard and Ben Stanway)

Components

Six controls probed (scripts/probe-component-states.mjs), each at rest, hover, pressed and focus. A universal focus ring, outline: #2771fc solid 2px, appears on every control regardless of its own resting colour.

• Primary CTA (“Claim offer”, promo-banner button) — #262626 bg, #ffffff fg, #262626 border, radius 2px (off the named radius scale), 48px tall, 13px/19px padding, 18px/400. No visible change on hover or press; only the #2771fc focus outline appears.
• Secondary (“Next slide”, carousel arrow, button--outline size-large type-secondary) — transparent bg, #262626 fg and border, same geometry as the primary CTA. No visible change on hover or press.
• Nav link (“Flowers”, mega-nav top-level item) — transparent bg, #262626 fg, 45px tall, 10px/4px/11px padding, 16px/500. No visible change on hover or press.
• Search trigger (“Search for products”, header search pill — a styled trigger, not a raw input[type=search]) — #ffffff bg, #534e46 fg, #e2e0dc border, pill radius (9999, matching --radius-full), 37px tall, 8px/72px/8px/36px padding, 16px/400. Hover and pressed fill #fcf5ea with fg/border unchanged — the one real per-control colour-changing state found in this pass.
• Card link (“Birthday Gifts”, image-backed category card) — transparent bg, #ffffff label over a photo, 24px tall, 16px/500. Focus draws the same #2771fc outline; the label stays white. Hover and press were not measured — the pointer could not reach the element under a sibling; recorded as unmeasured, not as “no change.”
• Icon-link (“Log in”, secondary nav) — transparent bg, #262626 fg and border, 58px tall, 8px padding, 16px/400. Hover and press underline the label (text-decoration: underline #262626; re-measured 2026-09-26 — the first pass compared colours only and read it as unchanged).

Only the search pill shows a colour-changing hover, and only the Log in link an underline; the primary, outline and nav controls carry their resting values through hover and press, with the #2771fc ring the sole marker of interactivity on focus.

States

Six components probed. Hover: no visible change on the primary CTA, secondary button and nav link; the search trigger fills #fcf5ea and the Log in icon-link underlines, on both hover and press; the card-link’s hover was not measured. Focus: a universal #2771fc 2px outline on five controls; the card-link instead flips its fg/border to #262626 with no visible outline. The card-link’s hover state was not measured (locator timeout) and is left unrecorded rather than marked unchanged. No disabled state was observed.

Do’s and Don’ts

Do

• Use #262626 as both the primary ink and the primary CTA’s background — the palette is near-monochrome with warm accent bands.
• Reserve #fdf888 (lemon) and #f9ecd7 (linen) for section-level warmth, not for interactive states.
• Use the #2771fc focus ring exactly as the group platform renders it; it is shared across the whole Bloom & Wild Group, not a Bloom & Wild-only choice.
• Pair Tiempos Headline (display, Bold only) with Unica 77 LL TT (body, 400/500) rather than inventing intermediate weights that were not observed loaded.

Don’t

• Don’t assume hover changes much: three of six probed controls show identical rest and hover states; the search pill’s #fcf5ea fill and the Log in underline are the exceptions.
• Don’t count --oasys-* (889 declarations) as Bloom & Wild-specific — it is the group’s shared platform layer, feeding only a couple of brand values.
• Don’t round buttons to the named radius scale (0/4/8/12/16/9999) — the CTA and outline buttons use an undocumented 2px radius outside that scale.
• Don’t cite a rebrand case study for the Tiempos + Unica 77 pairing; none was found on-site.

Voice & Tone

Not assessed as authored voice. The one confirmed brand line — “We don’t just send gifts. We help you care wildly.” — is a mission statement from the about page, not a UI-copy sample.

Agent Prompt Guide

Quick Color Reference

#262626 ink / primary CTA · #ffffff canvas · #f9ecd7 linen · #fdf888 lemon · #447964 pine-green · #a1bcb1 pine-green light · #db4141 error · #534e46 foreground-muted · #e2e0dc border · #fcf5ea search-hover · #2771fc focus ring (group platform)

Example Component Prompts

• “A 48px near-square button: #262626 background, white text, #262626 border, 2px radius; no hover change, a 2px #2771fc focus outline.”
• “A pill search field: white background, #534e46 placeholder text, #e2e0dc border; hover and press fill #fcf5ea.”

Governance

Known Gaps

• Contrast, button-secondary. Text #262626 on #00000000 measures 1.39:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, nav-link. Text #262626 on #00000000 measures 1.39:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, icon-link. Text #262626 on #00000000 measures 1.39:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.