Skip to content
DesignMunkDesignMunk Submit a site

Two Leaves and a Bud

twoleavestea.com
A great cup starts with a careful pluck—the two leaves and a bud.
Ecommerce Food & Drinks Shopify Homepage Figtree
Share Visit site
twoleavestea.com DESKTOP · 1440
Two Leaves and a Bud

AI Breakdown

Design export

---
version: alpha
name: Two Leaves and a Bud
description: A great cup starts with a careful pluck—the two leaves and a bud.
colors:
  primary: "#fbf9eb"
  tertiary: "#ffb500"
  neutral: "#121212"
  border: "#374151"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Figtree
    fontSize: 60px
    fontWeight: 700
    lineHeight: 1.2
  headline-md:
    fontFamily: Reckless
    fontSize: 44px
    fontWeight: 300
    lineHeight: 1.36
  headline-sm:
    fontFamily: Reckless
    fontSize: 33px
    fontWeight: 300
    lineHeight: 1.12
    letterSpacing: -0.015em
  headline-xs:
    fontFamily: Figtree
    fontSize: 24px
    fontWeight: 300
    lineHeight: 1.21
  body-md:
    fontFamily: Figtree
    fontSize: 18px
    fontWeight: 300
rounded:
  sm: 8px
  full: 9999px
spacing:
  xs: 2px
  sm: 10px
  md: 18px
  lg: 22px
  xl: 38px
components:
  button-primary:
    backgroundColor: "#ffffff"
    textColor: "#201c1a"
    rounded: "{rounded.full}"
    padding: 16px 60px
    height: 50px
  button-secondary:
    textColor: "#201c1a"
    rounded: "{rounded.full}"
    padding: 16px 60px
    height: 50px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 16px
---

# Two Leaves and a Bud: Cream Serif on Charcoal Commerce

## Overview

Two Leaves and a Bud blends premium retail with editorial calm. The UI favors dark surfaces with cream type, subtle borders, and pill-shaped CTAs. Headlines feel crafted and human; product grids stay efficient and scannable. Aim for warm, trustworthy, and unhurried—spacious where storytelling happens, denser where shopping decisions occur.

## Colors

- Primary (#fbf9eb): Cream base for text on dark surfaces and light section backgrounds.
- Tertiary (#ffb500): Marigold accent for sale flags, highlights, and small badges.
- Neutral (#121212): Charcoal foundation for surfaces, nav, and cards.
- Border (#374151): Cool slate divider for lines, input outlines, and grid separators.
- Surface ({colors.neutral}): Default page and card background in dark mode.
- On-surface ({colors.primary}): Default text and icon color when placed on dark surfaces.

## Typography

- Figtree: Sans-serif from Google Fonts (freely available). Used for headline-lg (60px, 700, 1.2), headline-xs (24px, 300, 1.21), and body-md (18px, 300). Load via Google and use for UI labels, navigation, product metadata, and long-form copy.
- Reckless: Custom display serif (not freely obtainable). Used for headline-md (44px, 300, 1.36) and headline-sm (33px, 300, 1.12, letter-spacing -0.015em). Substitute when unavailable with: Playfair Display (Google), Newsreader (Google), or Cormorant Garamond (Google). Choose a light weight and generous line height to keep the editorial tone.
- Role guidance: Use the serif only for brand lines, section titles, and short merchandising phrases. Keep all functional text (buttons, filters, prices, inputs) in Figtree for clarity and consistency.

## Layout

Spacing derives from a 2px base with steps at 10, 18, 22, and 38. Use 22px and 38px for vertical section rhythm; 10–18px for intra-component gaps. Product grids should keep 18–22px gutters to match card padding (16px). Hero, reviews, and journal sections can breathe with 38px top/bottom padding, while navigation and filters sit tighter at 10–18px. A standard responsive grid with consistent gutters works; emphasize alignment over variety.

## Elevation & Depth

Depth is minimal. Only a small shadow is measured (sm) and should be reserved for hover or active states on cards or sticky elements. Everyday hierarchy is handled with tonal contrast (#121212 vs #FBF9EB), slim borders in #374151, and whitespace. Mid and large shadows remain none; avoid drop-shadow stacking.

## Shapes

Corners communicate function: cards use rounded.sm (8px) for friendly containment; buttons and chips use rounded.full (9999px) for a soft, inviting pill. Links and editorial blocks keep square edges unless a component prescribes otherwise, which helps the pills read as interactive.

## Components

Buttons
- Primary: Background #ffffff, text #201c1a, height 50px, padding 16px 60px, rounded.full. Use on dark or photo backgrounds as the main CTA.
- Secondary: Text #201c1a, transparent background by default, height 50px, padding 16px 60px, rounded.full. Pair next to the primary.
- Link: Text {colors.primary} (#fbf9eb), no radius, for inline actions in copy.

Card
- Background {colors.neutral} (#121212), text {colors.primary} (#fbf9eb), padding 16px, rounded.sm (8px). Optional sm shadow on hover.

### Announcement Bar
- Uses surface #121212 with on-surface #fbf9eb text. Keep height compact with 10–18px vertical padding; highlight codes with tertiary #ffb500.

### Global Nav with Mega Menu
- Figtree body-md (18px) for labels, cream text on charcoal. Spacing: 18px between items; search/cart icons follow the same color rules.

### Hero Sale Banner
- Photo or video background with serif headline in Reckless headline-md (44px, 300). CTA uses button-primary specs; supporting copy in Figtree body-md.

### Slogan Split Headline
- Editorial block using Reckless headline-sm (33px, 300, -0.015em) across two lines on a light primary background (#fbf9eb) with neutral text (#121212).

### Best Sellers Grid
- 2–4 columns responsive. Each product uses the card spec: 8px radius, 16px padding, price and rating in Figtree, title may use headline-xs (24px) for emphasis.

### Reviews Carousel
- Dark card rails with on-surface text. Reviewer name in Figtree 18px; quote lead-in may use Reckless 33px for a pull-quote feel.

### Discover Filter Chips
- Pill chips using rounded.full, 10–18px horizontal padding, text in Figtree 18px. Use border #374151 to show deselected state; fill with #121212 → #ffb500 on hover/active.

### Journal Grid
- Three-up or two-up cards using card spec; headlines in Reckless headline-sm, excerpts in Figtree body-md. Keep 18–22px gutters.

## Do's and Don'ts

- Do reserve the serif (Reckless or substitute) for short, high-impact headings; keep body and UI in Figtree.
- Do use #ffb500 for accents like codes and tags; avoid introducing additional accent hues.
- Do keep cards at 8px radius and buttons at full pills; mixing shapes weakens recognition.
- Don't stack medium/large shadows; rely on borders #374151 and contrast for separation.
- Don't place cream text on light imagery; use a dark overlay or switch to #121212 on light backgrounds.
- Don't tighten line height below the token values; the system leans spacious and readable.

## Agent Prompt Guide

Quick reference — text: #fbf9eb, background: #121212, border: #374151, accent: #ffb500.

1) Build the global nav
- Background #121212, text #fbf9eb.
- Menu labels in Figtree 18px/300.
- Spacing: 18px gaps between items, 22px vertical padding.
- Add a link styled as button-secondary (height 50px, padding 16px 60px, rounded 9999px, text #201c1a on transparent) for a secondary action.

2) Create the hero
- Full-bleed image with a dark scrim; headline in Reckless 44px/300 (headline-md), subcopy in Figtree 18px/300.
- Primary CTA uses background #ffffff, text #201c1a, height 50px, padding 16px 60px, radius 9999px.
- Keep outer section padding at 38px top/bottom.

3) Product card for the Best Sellers grid
- Container: background #121212, radius 8px, padding 16px, optional small shadow "rgba(50,50,93,0.15) 0px 1px 3px" on hover.
- Title in Figtree 24px/300 (headline-xs), price and meta in Figtree 18px/300.
- Gutters between cards: 18–22px. Borders between sections: 1px #374151.

4) Reviews carousel slide
- Background #121212; quote set in Reckless 33px/300 with letter-spacing -0.015em; reviewer name in Figtree 18px/300.
- Navigation dots use #374151 default and #ffb500 active; keep 10px spacing.

5) Newsletter strip
- Background #121212, text #fbf9eb.
- Input: 1px border #374151, 8px radius; submit button uses primary button spec (white background, #201c1a text, radius 9999px). Section padding 22–38px.

## Similar Brands

- Rishi Tea: Also merchandises with editorial headlines; leans lighter overall, whereas Two Leaves uses darker surfaces and stronger border language.
- Blue Bottle Coffee: Premium retail with generous whitespace; their sans-only typography is plainer compared to this serif-accented voice.
- Stumptown Coffee Roasters: Dark UI moments with cream text; more graphic, while Two Leaves stays softer with pill buttons.
- Harney & Sons: Classic tea presentation with serif headings; their palette skews lighter and more ornate than this restrained marigold-on-charcoal.
- Trade Coffee: Modular product grids and minimal shadows; relies more on bright color accents versus this system's single marigold accent.

More like this

Browse Ecommerce →
wizcommerce.com
WizCommerce AI
WizCommerce
Built for Wholesale. Powered by AI.
Homepage · 3 days ago
checkoutpage.com
Checkout Page Ecommerce
Checkout Page
One platform for everything you sell
Homepage · 4 days ago
rodeo-labs.com
Rodeo Adventure Labs Ecommerce
Rodeo Adventure Labs
Ride. Explore. Create.
Homepage · 5 days ago
auntfannies.com
Aunt Fannie’s Ecommerce
Aunt Fannie’s
Cleaning differently: no harsh chemicals, plant-based, pet-friendly goodness
Homepage · 5 days ago