Cha Soba
Matcha, calm, considered. Green-tea soba. Muted matcha primary, serif headings, paper-toned surfaces and small radii. Wellness, writing, reading.
Design language
Cha soba is green-tea buckwheat noodle, and its world is the tea ceremony: washi paper, brush and ink, hanko seals and the ensō circle. The language is hand-made and deliberate: paper texture, brush-stroke outlines with irregular radii, stamped seal badges, and slow motion in which things appear like ink spreading into paper.
Principles
- Paper: surfaces carry a subtle washi fibre texture.
- The brush: outlines use irregular elliptical radii (var(--c-brush)) so they look hand-drawn.
- Seals: badges are stamped hanko, a red or coloured frame with an inner line.
- Deliberate pace: 280–460ms, ease-out, never springy.
Shape
Brush-stroke radii on buttons and cards; the ensō (an open ring) for spinners and donuts.
Surface
Washi texture, ink outlines, brush underlines on card headers.
Colour
Matcha green primary, amber accent, ink and paper.
Type
Serif headings.
Motion
chasoba-ink: blur and spread in, 460ms. Buttons tilt slightly on hover like a brush lifting.
Data
Brush-stroke bars, an ensō donut, ink lines.
Designing new components in Cha Soba
MIAN does not ship every component you will need. To make a new one that belongs in Cha Soba, build it from --mn-* tokens inside [data-noodle="chasoba"] and follow these rules.
Do
- Border 2px var(--mn-fg) with border-radius var(--c-brush); background var(--mn-surface) var(--c-washi).
- Mark status with a hanko seal: 2px frame plus an inset 1.5px surface line.
- Enter with blur(4px) → 0 and a slow fade.
Avoid
- Perfect geometric radii
- Glossy or glassy effects
- Fast or bouncy motion
Recipe: a selectable tile
[data-noodle="chasoba"] .tile {
padding: 12px 16px; border: 2px solid var(--mn-fg); border-radius: var(--c-brush);
background: var(--mn-surface) var(--c-washi);
transition: transform 280ms cubic-bezier(.3, .1, .2, 1);
}
[data-noodle="chasoba"] .tile:hover { transform: rotate(-.6deg); }
[data-noodle="chasoba"] .tile[aria-selected="true"] { background-color: color-mix(in oklab, var(--mn-primary) 14%, var(--mn-surface)); }The same guide, for AI tools: /ai/noodles/chasoba.md · MCP tool get_design_language.
Colour, type and brand
What Cha Soba says before anyone reads a word, and what kind of brand it suits. Tendencies, not laws: see the guides on colour, type, branding and logos.
Primary · Green
Growth, health, permission, money. The easiest colour to look at for a long time.
Watch for: Success messages are green too: a green brand needs a success state that is clearly a status (icon, words). Claims of sustainability made with green alone read as greenwashing.
Accent · Brown and terracotta
Earth, craft, reliability, age. Feels made by hand and unhurried.
Watch for: Looks dull on screens unless the neutrals around it are warm too.
Page · White and paper
Space, honesty, simplicity. Warm whites feel human, cool whites feel clinical.
Watch for: Empty is not the same as calm: white space needs a grid behind it.
Green with brown and terracotta: a contrasting pair that needs one of the two to dominate. The page itself is warm.
Type
Two voices: book serif (old-style and transitional) for headings, neutral sans for the interface. Headings are semibold, which reads as confident without shouting. Considered, literate, established. The voice of books and long reading.
Personality
Reads as calm, natural, considered, bookish, wellness. Intensity 2 of 5.
Suits
wellness, writing, reading apps, tea and food, sustainability. Less suited to loud campaigns, gaming.
Tone of voice
Calm and clear. Short sentences, one idea each, a friendly but not chatty register.
Logo
A simple geometric mark with slightly softened corners fits; avoid both hard spikes and full circles. Set the wordmark in a serif to match the headings.
Inspired by the noodle
- Green tea→matcha palette and a washi paper texture
- Tea ceremony→slow, deliberate, ink-spreading transitions
- Brush and ink→hand-drawn, uneven outlines on buttons and fields
- Hanko seal→square red-stamp badges and switch knobs
Specimen
The same markup as every other noodle. Press, hover, open the menu and the dialog: shape, depth, texture and motion all change.
Buttons
Fields
Choices
Status
Tabs
Bars
Line & donut
Table
| Invoice | Status | Amount |
|---|---|---|
| INV-001 | Paid | €250.00 |
| INV-002 | Pending | €150.00 |
| INV-003 | Overdue | €350.00 |
Feedback & motion
Deployed
Your site is live.
- Cart
- Pay
- Done
Buttons
Fields
Choices
Status
Tabs
Bars
Line & donut
Table
| Invoice | Status | Amount |
|---|---|---|
| INV-001 | Paid | €250.00 |
| INV-002 | Pending | €150.00 |
| INV-003 | Overdue | €350.00 |
Feedback & motion
Deployed
Your site is live.
- Cart
- Pay
- Done
This palette on Cha Soba. Load it after mian.css and put data-brand on the same element as data-noodle.
Use it
<!-- everything -->
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<html data-noodle="chasoba">
<!-- or only this noodle -->
<link rel="stylesheet" href="https://mian.ro/dist/mian-core.css">
<link rel="stylesheet" href="https://mian.ro/dist/noodles/chasoba.css">
<!-- or scope it to one element -->
<section data-noodle="chasoba" data-mode="dark">…</section>Palette
Left half light, right half dark. Every text pair is verified for WCAG AA contrast when the site is built.
Typography & shape
| --mn-font | ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif |
| --mn-font-heading | ui-serif, "New York", "Iowan Old Style", "Palatino Linotype", Georgia, serif |
| --mn-radius-field / box / badge | 6px · 10px · 6px |
| density | default |
| shadows | subtle |