Green Tea Theme Guide: Color, Typography, and UI Patterns

Overview

A Green Tea Theme evokes freshness, calm, and natural simplicity by using soft greens, muted neutrals, and light textures.
Best for wellness, eco, lifestyle blogs, tea shops, health apps, and minimalist portfolios.

Color Palette

Primary: Soft matcha green (#86C17A) — used for primary actions, headers, and highlights.
Secondary: Pale green (#DFF3E2) — backgrounds, cards, and subtle accents.
Accent: Warm amber (#F2C57C) — call-to-action emphasis and micro-interactions.
Neutral: Charcoal (#2E2E2E) for text, off-white (#FBFBFA) for surfaces.
Usage rules: Maintain 60/30/10 balance (60% neutrals/backgrounds, 30% primary, 10% accent). Ensure WCAG AA contrast for body text (≥4.5:1).

Typography

Heading font: A warm, geometric sans (e.g., Inter, Poppins) — medium weight for H1, semi-bold for H2.
Body font: A highly readable sans-serif (e.g., Roboto, Lora for a serif alternative) — 16px base with 1.5 line-height.
System suggestions:
- H1: 36–48px (responsive scaling)
- H2: 24–32px
- Body: 16px
- Small/captions: 12–14px
Hierarchy: Use weight and color (primary green for headings) rather than all-caps; keep letter-spacing minimal.

UI Patterns

Navigation: Transparent or soft-green navbar with subtle shadow; sticky on scroll for apps and blogs.
Buttons: Rounded 6–10px corners; primary buttons in matcha green with white text, secondary in outline style using primary color.
Cards: Soft drop shadows, rounded corners, pale-green backgrounds for featured cards.
Forms: Clear labels, floating labels optional, input focus with 2–3px green ring, error states in warm red with helper text.
Imagery: Use high-quality photography with natural light and green accents; apply a slight warm filter to unify visuals.
Microinteractions: Gentle easing and 120–200ms durations; hover lift of 4–6px and subtle color shifts toward accent amber for CTAs.
Accessibility: Ensure focus visible states, keyboard navigability, and sufficient color contrast; offer a high-contrast toggle.

Layout & Components

Spacing: Generous whitespace; 24–32px grid gutters on desktop.
Hero: Large hero with soft-gradient overlay (primary → transparent) and concise CTA.
Sidebars: Keep optional — use for related posts or product filters with sticky behavior.
Footer: Dark charcoal background with light text, social icons in accent amber on hover.

Branding Tips

Logo: Simplified mark — leaf or cup silhouette; pair with wordmark in primary green.
Tone: Calm, friendly, knowledgeable — copy should be concise and reassuring.
Iconography: Line icons with 2px stroke, primary green fills for active states.

Sample Component Styles (CSS hints)

Button:

Code
.btn-primary { background: #86C17A;   color: #fff;   border-radius: 8px;   padding: 10px 18px; }

Card:

Code
.card {   background: #DFF3E2;   border-radius: 12px;   box-shadow: 0 6px 18px rgba(0,0,0,0.06);   padding: 20px; }

Quick Checklist Before Launch

Comments