Chotto Matchav1.0 · May 2026

Foundation

Chotto Matcha — Design System

Quiet, thoughtful, and made to bring a moment of calm. Tokens, components, and voice for the loyalty app — Seedling, Whisk, Ceremony.

01

Color

--matcha-deep

#2F4B2E

Primary actions · headlines

--forest

#3E5A36

Hover · depth

--sage

#A8B48A

Accent · soft

--sage-tint

#DCE3CD

Pressed · badges

--sage-wash

#EEF1E5

Hover bg · toasts

--stone

#F3F1EC

Quiet surface

--cream

#FAF7F2

Page background

--charcoal

#2B2B2B

Body text

--ink-muted

#6B6E66

Captions

--ink-faint

#9CA095

Placeholders

--line

#E4E1D9

Borders

--line-soft

#ECE9E2

Dividers

02

Typography

Playfair Display for display & headings. Inter for everything below 18px.

Display 1 · Playfair 500 · 88/96

Quiet ritual.

H1 · Playfair 700 · 48/52

Welcome back, Haruka.

H2 · Playfair 600 · 32/38

Today's moment

H3 · Playfair 500 · 24/30

Ready to redeem

Body · Inter 400 · 16/24

You earned 50 points. Keep going, matcha lover.

Body Strong · Inter 600 · 16/24

Your next reward is 180 points away.

Caption · Inter 400 · 12/18

Just a moment — we're saving your reward.

Eyebrow · Inter 600 · 11/16 · 0.16em

Quiet ritual

03

Spacing — 8pt grid

--s-14px
--s-28px
--s-312px
--s-416px
--s-524px
--s-632px
--s-740px
--s-848px
--s-964px

04

Radius

--r-sm

8px

--r-md

12px

--r-lg

16px

--r-xl

24px

--r-pill

999px

05

Elevation

Shadows are restraint, not decoration.

--shadow-sm

Subtle lift

--shadow-md

Floating panel

--shadow-lg

Modal · sheet

06

Buttons

Pill-shaped. One Primary per screen.

07

Pills & badges

+50 PointsLiveRestingClosedOut of stockSeedlingWhiskCeremony

08

Forms

09

Components

1,280

available points

Ceremony · A devoted member of the community

Iced Matcha Latte

350

House matcha, oat milk, and a slow pour over ice.

Always availableReady to redeem

Ceremonial Tin

1,600

Small-batch matcha tin for home whisking.

6 left1,280 / 1,600

You earned 50 points

Keep going, matcha lover.

Redeem reward?

This will spend 350 points on an Iced Matcha Latte.

HomeRewardsScanJournalProfile

10

Tiers

Status grows with cumulative points earned.

  • Seedling

    0–149 points

    Just starting the ritual

  • Whisk

    150–499 points

    Practiced, regular, deepening the habit

  • Ceremony

    500+ points

    A devoted member of the community

11

Voice

Warm. Thoughtful. Quietly celebratory.

Do

  • You earned 50 points. Keep going, matcha lover.
  • Just a moment — we're saving your reward.
  • Welcome back, Haruka.

Don't

  • BOOM! +50 POINTS UNLOCKED!!!
  • Loading… please wait.
  • Hi User1234! Login successful.