Launch pricing · Grab your template before prices go up.Launch pricing is here.Shop templates
All themes

Website theme for Cafés Matcha Theme

A café website theme with green and warm paper colours, bold type, and tea imagery. Includes design guidelines and image prompts for building with AI.

See what's possible

What you receive

  • Theme · .md

    Colours, typography, spacing, layout, and motion.

  • Image prompts · .md

    Prompts to create images with a matching look and feel.

DESIGN.md

Matcha Theme

Bold Public Sans headings, warm paper surfaces and full green scenes define Matcha. Space Mono labels, square controls, fine rules and tactile tea imagery complete the design system.

01 — Foundations

Colour palette

  • Text

    #1C1C1C

    Primary copy, rules and solid buttons.

  • Warm paper

    #F9F8F5

    Page backgrounds and inverted labels on dark.

  • Matcha green

    #01DA4D

    Immersive green scenes, active navigation and the footer wordmark.

  • Footer black

    #000000

    The black footer behind the green wordmark.

  • White detail

    #FFFFFF

    Progress marks and source-specific white accents; most inverted labels use warm paper.

02 — Foundations

Typography

Public Sans 700 for headings and 400 for body copy; Space Mono 700 for uppercase navigation, labels and prices. Original desktop presets are listed; samples scale to fit. Page titles step 216/140/80px, statements 72/56/40px, and body copy 20/19/17px. Type presets change at 1200px and 810px; canvas layouts change at 1440px and 810px. The fitted SplitTitle wordmark can exceed its preset size.

Page titlePublic Sans · 216px / 700 / 0.85 · 0.06em tracking

MATCHA

StatementPublic Sans · 72px / 700 / 1.02 · -0.02em tracking

Single-origin matcha, stone-ground in Uji and whisked to order.

Feature headingPublic Sans · 56px / 700 / 1.05 · -0.02em tracking

Whisked to order.

Section headingPublic Sans · 42px / 700 / 1 · -2px tracking

The Shop

LeadPublic Sans · 26px / 400 / 1.35 · -0.02em tracking

No syrups, no shortcuts — just leaf, water, and light.

BodyPublic Sans · 20px / 400 / 1.45 · -0.01em tracking

Thin whisked matcha, ceremonial grade. Served in a warmed chawan.

Menu itemPublic Sans · 26px / 700 / 1.2 · -0.02em tracking

Usucha

Navigation & labelsSpace Mono · 14px / 700 / 1.2 · 0.02em tracking

HOME · MENU · SHOP · ABOUT

Compact labelSpace Mono · 12px / 700 / 1.2 · 0.02em tracking

LOCATIONS

PriceSpace Mono · 16px / 700 / 1.2 · 0em tracking

$6.00

03 — Components

Button variants

Sharp corners and uppercase Space Mono 700. The compact link uses 12px labels; larger links use 14px. Matcha’s source buttons use text without arrow icons. Hover over the samples to see their fill changes.

Compact location link

Locations

12px bold Space Mono, a 1px outline, and 6px × 10px padding.

Outline link

Shop more

14px bold Space Mono and 10px × 18px padding. The fill turns dark on hover.

Solid action

Shop now

Paper text on ink, 20px × 32px padding. The solid link turns green on hover.

Inverted location link

Locations

Paper text and border on dark, reversing to paper fill on hover.

Build your own website with this theme and launch faster.

See this theme in Matcha.

See what's possible

How to use your theme

Make it yours.

  1. Download your theme

    Save the design file and image prompts to your computer.

  2. Use the theme

    Give your AI builder the design file and describe your website.

  3. Create your images

    Use the image prompts in your favorite AI image tool.

  4. Bring it all together

    Bring the theme, image prompts, and your images into your favorite builder.

Read the full theme guide

FAQ

Who is this theme for?

Matcha Theme is designed for matcha cafés, specialty drinks, and independent food brands. Use it when you want design direction for your own page layouts, with consistent colours and typography.

What files are included?

You receive the theme guidelines and matching image prompts as downloadable text files. The guidelines cover colours, typography, spacing, layout, and motion. After purchase, download the files from My account.

The Matcha website template already includes this theme, so you do not need to purchase both.

Can I use this theme with AI or Framer?

Yes. For vibe coding, give the guidelines to your AI website builder and describe what you want to create. In Framer or another visual editor, use the guidelines to apply the colours, fonts, and styling yourself. The theme provides design direction; a Framer Remix link comes with the matching website template. Read the theme guide.

Can I preview the theme before buying it?

Yes. This page shows the colour palette, typography, and button styles, along with examples in See what’s possible. You can view these public previews without signing up. The full guidelines and image-prompt files are delivered after purchase.

Which license do I need for a client website?

A theme purchased on its own covers one finished website for yourself, your business, or one client, including commercial use. Another independent website needs another theme license. When a theme comes with a paid template, it follows that template’s Personal or Commercial License: business promotion, monetization, and paid client work require Commercial. Read the Terms & Conditions for details.

Are hosting, my domain, and paid tools included?

No. Themes are a one-time purchase or a free download, as labelled. Your domain, hosting, paid AI or website-builder plans, and other services are separate. Use our website launch checklist when you are ready to publish.

Can I get a refund?

Digital product sales are final, except where a refund or other remedy is required by law. Review the previews, included files, and licence before buying. If your files are not delivered or do not match the description, contact us through the support route in the Terms & Conditions.