# Cha Soba: a MIAN design language

Matcha, calm, considered. Green-tea soba. Muted matcha primary, serif headings, paper-toned surfaces and small radii. Wellness, writing, reading.

- Family: Textured · Origin: Japan · green tea soba · License: MIAN License (free to use)
- Traits: calm, natural, considered, bookish, wellness · intensity 2/5 · contrast medium · density default. Good for: wellness, writing, reading apps, tea and food, sustainability. Less for: loud campaigns, gaming.
- Use: `<html data-noodle="chasoba">` (or on any element to scope it). Add `data-mode="dark"` or `"light"` to force a mode.
- Everything: https://mian.ro/dist/mian.css · Only this noodle: https://mian.ro/dist/mian-core.css + https://mian.ro/dist/noodles/chasoba.css
- Page: https://mian.ro/noodles/chasoba

## Design philosophy

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.

## The language

- **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.

## Colour, type and brand

- **Primary** #4d7c0f: green (deep, saturated). Growth, health, permission, money. The easiest colour to look at for a long time.
- **Accent** #a16207: brown and terracotta (mid, saturated). Earth, craft, reliability, age. Feels made by hand and unhurried.
- **Page** #f7f8f3: white and paper (pale, muted). Space, honesty, simplicity. Warm whites feel human, cool whites feel clinical.
- **Scheme.** Green with brown and terracotta: a contrasting pair that needs one of the two to dominate. The page 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.
- **Reads as** calm, natural, considered, bookish, wellness.
- **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.
- To keep this noodle’s shape with your own brand colours: POST https://mian.ro/api/v1/noodles/create or the MCP tool `create_noodle` (base: "chasoba").

## 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

## Designing new components in Cha Soba

Build new components from `--mn-*` tokens, scoped with `[data-noodle="chasoba"]`, and follow these rules. Any `--x-*` variables named below are defined by this noodle's skin and can be used inside its scope.

- 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 in this language:

```css
[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)); }
```

## Tokens

- Fonts: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
- Heading font: ui-serif, "New York", "Iowan Old Style", "Palatino Linotype", Georgia, serif
- Radius: field 6px, box 10px, badge 6px
- Density: default · Shadows: subtle

| token | light | dark |
|---|---|---|
| bg | #f7f8f3 | #10130d |
| surface | #fdfdfa | #161a12 |
| surface2 | #ecefe3 | #20261a |
| fg | #1c2117 | #eef1e6 |
| muted | #5b6452 | #a3ab95 |
| border | #dde2d2 | #2b3323 |
| input | #c7cfb8 | #3f4a33 |
| primary | #4d7c0f | #a3e635 |
| primaryFg | #ffffff | #10130d |
| secondary | #e6ebd9 | #20261a |
| secondaryFg | #1c2117 | #eef1e6 |
| accent | #a16207 | #facc15 |
| accentFg | #ffffff | #1c1600 |
| ring | #4d7c0f | #a3e635 |
| success | #15803d | #4ade80 |
| successFg | #ffffff | #052e16 |
| warning | #b45309 | #fbbf24 |
| warningFg | #ffffff | #1f1300 |
| danger | #dc2626 | #f87171 |
| dangerFg | #ffffff | #210505 |
| info | #0369a1 | #38bdf8 |
| infoFg | #ffffff | #03202d |
| primaryText | #487310 | #a3e635 |
| secondaryText | #6d7265 | #83877c |
| accentText | #945c09 | #facc15 |
| successText | #16783a | #4ade80 |
| warningText | #a54e0a | #fbbf24 |
| dangerText | #c52524 | #f87171 |
| infoText | #0369a1 | #38bdf8 |
| link | #4d7c0f | #a3e635 |