Moya Matcha

Overview

Moya Matcha is a premium Japanese organic matcha tea brand that bridges ancient ceremonial tradition with contemporary wellness culture. The design system embodies 'Organic Minimalism'—a philosophy that celebrates natural materials, authentic craftsmanship, and uncluttered visual hierarchy. The aesthetic is rooted in the Japanese concept of *ma* (negative space), where restraint and intentionality create calm, focused experiences. The UI evokes the ritualistic precision of matcha preparation: every element has purpose, every color choice reflects the tea's verdant essence or the earthy tones of its preparation vessels.

The brand voice is knowledgeable yet approachable, never pretentious. Moya speaks with the confidence of a tea master who respects tradition but embraces modern accessibility. Vocabulary favors concrete, sensory language: 'vibrant ceremonial green,' 'smooth umami notes,' 'hand-whisked ritual.' Example sentence in brand voice: 'Our Kuricha matcha carries the mineral sweetness of Uji's volcanic soil—taste the terroir in every sip.'

Colors

The color palette is anchored by a sophisticated blue-green spectrum that reflects both the matcha leaf's vivid chlorophyll and the serene water used in tea preparation. Primary (#2ea3f2) is a clean, trustworthy blue deployed on CTAs, navigation highlights, and interactive states—it signals reliability and premium quality without aggression. Secondary (#00d084) is a vibrant, natural green that echoes the matcha powder itself; use it sparingly for accent highlights, success states, and product badges to reinforce the organic, living essence of the brand. Tertiary (#1a8c3d) is a deeper forest green reserved for secondary CTAs and status indicators, grounding the palette in natural authority.

The surface stack is deliberately light and minimal: surface (#ffffff) provides the clean canvas, wh

Typography

The type system pairs Roboto Condensed (headlines, navigation) with Open Sans (body, UI labels), creating a dynamic contrast between structured authority and warm approachability. Roboto Condensed's geometric precision at display (56px, 700 weight, -0.03em tracking) commands attention on hero sections and product titles, while its condensed proportions economize space—critical for product grids and category navigation. Open Sans at body-md (14px, 500 weight) provides readable, friendly body copy; its generous 20px line-height (1.43 unitless) ensures comfortable reading on both mobile and desktop. For small labels and metadata (12px, 500 weight, 0.03em tracking), apply a subtle text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) when overlaying images or busy backgrounds to ensure legibility without

Layout

The layout operates on a 12-column fluid grid with a max-width of 1080px, honoring the brand's balance between spaciousness and content density. The gutter is fixed at 24px, creating consistent breathing room between columns and sections. Container padding follows the spacing scale: 24px (md) on desktop, 16px on tablet, 12px on mobile—this ensures the content never feels cramped or overwhelming. Section separation uses lg spacing (40px) for major transitions (hero to product grid, product grid to testimonials) and md spacing (24px) for subsection breaks. The layout philosophy prioritizes white space as an active design element: never fill available space just because it exists. Product cards occupy 4 columns on desktop (3-column grid), 6 columns on tablet (2-column), and full-width on mobi

Elevation & Depth

Depth is conveyed through subtle, naturalistic shadows that mimic soft diffused light rather than harsh overhead illumination. The elevation system uses three tiers: sm (0 1px 3px rgba(0, 0, 0, 0.08)) for base interactive elements like input fields and small cards, md (0 4px 12px rgba(0, 0, 0, 0.12)) for elevated cards and modals, and lg (0 8px 24px rgba(0, 0, 0, 0.15)) for floating elements like dropdowns and popovers. Buttons transition between elevation states: at rest, button-primary uses sm shadow; on hover, it elevates to md shadow with a 200ms ease-out transition. No hard borders or sta

Shapes

The shape philosophy is 'Refined Geometry'—rounded corners are present but restrained, reflecting both the organic nature of tea leaves and the precision of modern e-commerce. Border-radius follows a deliberate scale: sm (3px) for subtle softening on inputs and small UI elements, DEFAULT (4px) for standard cards and buttons, md (8px) for larger containers and product images, lg (12px) for modals and hero sections, and full (9999px) for badges and pill-shaped elements. The reasoning: 3–4px radii feel natural and contemporary without appearing playful or childish; 8–12px radii signal importance

Components

Action Elements Buttons are the primary interaction mechanism and must feel premium yet inviting. Button-primary uses a 44px height (padding: 12px 24px) with a 4px border-radius, background-color: {colors.primary}, and a subtle box-shadow: 0 2px 8px rgba(46, 163, 242, 0.2). On hover, the background darkens to #1e8fd9 and shadow expands to 0 4px 12px rgba(46, 163, 242, 0.3), with a 200ms ease-out transition. On active/pressed, background becomes #0d5fa8 and shadow contracts to 0 2px 4px, creating tactile feedback. Button-secondary mirrors the primary structure but uses a transparent background with a 1px border in {colors.primary} and text-color: {colors.primary}; on hover, it fills with {colors.primary-container} while maintaining the border. All buttons use label-md typography (13px,

Do's and Don'ts

**Do**

• Do use primary blue (#2ea3f2) exclusively for primary CTAs, links, and focus states—it is the brand's signature accent and must remain distinctive and recognizable.
• Do apply generous white space (40px+ between major sections) to honor the Japanese aesthetic of *ma* and prevent visual overwhelm.
• Do pair Roboto Condensed headlines with Open Sans body text to create dynamic contrast; never mix typefaces within a single component.
• Do use the secondary green (#00d084) as a rare, high-impact accent for success states, product badges, and organic/certified indicators—overuse dilutes its power.
• Do maintain consistent 24px gutters and 12-column grid structure across all breakpoints to ensure predictable, professional layouts.
• Do apply subtle shadows (sm/md/lg elevation) rather than borders to define depth; hard lines conflict with the organic aesthetic.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) for text or backgrounds—always use {colors.on-surface} (#333333) and {colors.surface} (#ffffff) to maintain the refined, slightly warm palette.
• Don't apply border-radius greater than 12px except for full-circle badges; excessive rounding feels playful and undermines premium positioning.
• Don't mix tertiary green (#1a8c3d) with secondary green (#00d084) in the same UI section—the color confusion dilutes both and creates visual noise.
• Don't use error red (#cf2e2e) for warnings or non-critical feedback; reserve it exclusively for destructive actions and validation failures.
• Don't exceed 2 typeface families or 3 font weights in a single page—the system uses only Roboto Condensed (600, 700) and Open Sans (400, 500, 600) for clarity and consistency.
• Don't apply shadows greater than lg elevation (0 8px 24px) on standard UI elements; excessive depth creates visual hierarchy confusion and feels heavy.