Two Leaves and a Bud

Overview

Two Leaves and a Bud is an independent tea company rooted in Colorado's mountain heritage, founded on the principle that every cup should feel intentional and good. The design system embodies 'Botanical Minimalism'—a philosophy that marries earthy, nature-inspired color palettes with refined typography and generous whitespace to create an experience that feels both grounded and elevated. The brand speaks to tea drinkers who view their ritual as a moment of mindfulness, not mere consumption. The visual language prioritizes clarity and authenticity: deep navy (#2a2857) anchors the brand as a sophisticated, trustworthy primary, while warm botanical greens (#75ab45) and golden accents (#ffb500) evoke the natural origins of the product. The UI feels unhurried, with breathing room between elements and a restrained color palette that lets product photography and content take center stage.

The brand voice is warm, knowledgeable, and unpretentious. Sentences are direct and conversational, avoiding marketing clichés in favor of specificity: 'Whether your mornings are more grab-and-go or intentional and slow, we have matcha and matcha lattes for every ritual.' The tone celebrates the craft of tea without condescension, speaking to both newcomers and enthusiasts. Typography choices—Reckless for headlines (light, elegant, with generous letter-spacing) and Figtree for body copy (modern, legible, friendly)—reinforce this balance between sophistication and accessibility.

Colors

The color system is built on a foundation of natural, muted tones that reflect tea's earthiness while maintaining contemporary sophistication. Primary (#2a2857) is a deep, cool navy that serves as the brand's anchor—used on CTAs, navigation, and key interactive elements. It conveys trust and intentionality without feeling corporate. Secondary (#ffb500) is a warm, saturated gold that appears on accent elements, badges, and hover states; it's energetic enough to draw attention but grounded in natural ochre tones. Tertiary (#75ab45) is a muted sage green that reinforces the botanical heritage and appears in supporting UI elements, badges, and secondary callouts.

The surface stack progresses from #fffefb (warm off-white background) through #f5f4f3 (subtle container) to #cacaca (high-contrast

Typography

The type system reflects a 'refined-yet-approachable' philosophy: Reckless (a custom display font loaded at 300–400 weight) commands attention in headlines with its elegant, slightly condensed letterforms, while Figtree (a contemporary geometric sans-serif) handles body copy with clarity and warmth. Display text (84px, 300 weight, -0.02em letter-spacing) is reserved for hero headlines like 'Meet Your Matcha,' where its lightness creates visual breathing room. Headline-lg (48px, 400 weight) is used for section titles, maintaining elegance without the extreme lightness of display. Body-lg (18px, 400 weight, 28px line-height) is the primary reading size, with generous line-height (1.56) to ensure comfort on screens and print. Labels and UI text use Figtree at 14px (label-md) or 12px (label-sm

Layout

The layout follows a 12-column grid with a max-width of 1280px, maintaining a fluid, responsive structure that adapts from mobile (single column) to desktop (multi-column). Container padding uses the gutter token (24px) on all sides, ensuring consistent breathing room. Section separation employs lg spacing (40px) vertically to create clear visual rhythm without overwhelming the page. The hero section occupies at least 600px height, centering content vertically and horizontally to emphasize the primary CTA and product imagery. Card-based layouts use md spacing (24px) for internal padding and lg spacing (40px) for gaps between cards. Whitespace is treated as a design element, not wasted space—the brand philosophy values clarity over density, so empty space around key elements (headlines, CTA

Elevation & Depth

Depth in this system is achieved through subtle shadow and layering, not dramatic contrast. The base layer (Level 1) is the surface background (#fffefb), which provides a warm, neutral canvas. Level 2 (Standard cards and containers) uses elevation.sm (0 1px 2px rgba(10, 10, 10, 0.06))—a barely perceptible shadow that separates the card from the background without drawing attention. Level 3 (Modals, dropdowns, elevated cards) uses elevation.md (0 4px 12px rgba(10, 10, 10, 0.08)), creating a more pronounced lift. Input fields receive an inset shadow (inset 0 1px 2px rgba(10, 10, 10, 0.1)) to sug

Shapes

The shape philosophy is 'Organic Precision'—rounded corners are used strategically to soften the interface while maintaining clarity and usability. Buttons and primary CTAs use full (50px border-radius), creating pill-shaped elements that feel friendly and inviting while remaining clearly clickable. Input fields and secondary containers use DEFAULT (12px), a subtle rounding that softens edges without obscuring the form's structure. Cards and larger containers use lg (1rem / 16px), providing a gentle curve that feels contemporary without being trendy. Small UI elements like badges and tags use

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons (button-primary) use the brand navy (#2a2857) background with cream text (#fbf9eb), 50px border-radius, 16px vertical / 60px horizontal padding, and 18px body-lg typography. On hover, the background shifts to primary-container (#4a4680) with a 0.25s ease-in-out transition, signaling state change without jarring the user. Secondary buttons (button-secondary) invert this: cream background with navy text, a 1px outline border in outline color (#8a8a8a), and the same padding and radius. On hover, the background shifts to surface-container-high (#e6e6e6). Both button variants maintain 48px minimum height for touch accessibility.

Containers & Surfaces Cards (card) use surface-container-lowest (#fefefe) backgr

Do's and Don'ts

**Do**

• Do use primary (#2a2857) sparingly on CTAs and key interactive elements—it's the brand's signature, so overuse dilutes its impact.
• Do maintain generous whitespace around headlines and product imagery; the brand values clarity and breathing room over density.
• Do apply 0.25–0.5s transitions on all interactive state changes (hover, focus, active) to signal interactivity smoothly.
• Do use Reckless for headlines and Figtree for body copy; this pairing is the brand's typographic signature and should not be substituted.
• Do ensure all buttons maintain at least 48px height and 16px horizontal padding for touch accessibility and visual clarity.
• Do use the full rounded scale (50px) on buttons and badges to reinforce the brand's approachable, organic aesthetic.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) for text or backgrounds; the brand uses warm off-whites (#fbf9eb) and near-blacks (#201c1a) to maintain warmth.
• Don't apply shadows darker than rgba(10, 10, 10, 0.12); the brand avoids heavy shadows that would feel corporate or harsh.
• Don't mix Reckless and Figtree weights arbitrarily; Reckless is display-only (300–400 weight), and Figtree handles all body and UI text.
• Don't use secondary (#ffb500) or tertiary (#75ab45) as primary button backgrounds; reserve them for accents, badges, and supporting elements.
• Don't apply more than one shadow layer to a single element; the system uses single, subtle shadows to maintain visual clarity.
• Don't override the 50px border-radius on buttons and badges; this shape is core to the brand's identity and should remain consistent.