# Soba: a MIAN design language

Earthy, editorial, restrained. Buckwheat neutrals with serif headings and small radii. Flat: borders instead of shadows. For publications, docs and calm tools.

- Family: Elegant · Origin: Japan · License: MIAN License (free to use)
- Traits: editorial, earthy, restrained, literary, calm · intensity 1/5 · contrast medium · density default. Good for: publications, documentation, law, research, calm tools. Less for: games, campaigns.
- Use: `<html data-noodle="soba">` (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/soba.css
- Page: https://mian.ro/noodles/soba

## Design philosophy

Soba is buckwheat: grey-brown, speckled, cut straight with a knife and served on a slatted bamboo zaru. The language is editorial and restrained: square corners, serif headings, a faint speckle in the paper, slatted stripes in tables, progress and charts, and its motion is calm and ceremonial.

## Principles

- Square and straight: corners of 4–6px at most, strict alignments.
- The zaru pattern: repeating vertical slats mark progress, stripes and charts.
- Speckle, not shine: a fine buckwheat texture on surfaces instead of gradients.
- Serif for headings, sans for reading; restrained earth colours.
- Unhurried: things unroll into place over 260ms without bounce.

## The language

- **Shape.** 4px fields, 6px containers; radios become diamonds; segmented indicators.
- **Surface.** Warm paper with the speckle texture, 1px borders, no shadows.
- **Colour.** Buckwheat taupe primary, roasted brown accent, stone neutrals.
- **Type.** Serif headings, small-caps style uppercase labels.
- **Motion.** soba-unroll: reveal from the top edge, 260ms, cubic-bezier(.4,0,.2,1).
- **Data.** Bars cut into slats, striped progress, tables with slatted headers.

## Colour, type and brand

- **Primary** #3f3a33: black and ink (deep, muted). Authority, precision, luxury. It makes everything next to it look more deliberate.
- **Accent** #7c5a2e: brown and terracotta (mid). Earth, craft, reliability, age. Feels made by hand and unhurried.
- **Page** #f7f6f3: white and paper (pale, muted). Space, honesty, simplicity. Warm whites feel human, cool whites feel clinical.
- **Scheme.** A neutral primary with one brown and terracotta accent: the accent means “look here” precisely because nothing else is coloured. 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** editorial, earthy, restrained, literary, calm (brand dimension: sophistication).
- **Tone of voice.** Quiet. Plain statements in sentence case, no exclamation marks, numbers with their units. Let space do the persuading.
- **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: "soba").

## Inspired by the noodle

- Buckwheat speckle → a fine speckled texture on surfaces
- Served on a bamboo zaru → slatted stripes in tables, progress and charts
- Cut straight with a knife → square corners and segmented indicators
- Dipping ritual → calm, measured motion that settles without bounce

## Designing new components in Soba

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

- Use var(--s-speckle) as a background-image on new surfaces and var(--s-slats) for anything that measures or fills.
- Keep corners square (≤6px) and use the serif heading font for titles.
- Selected = a solid taupe fill or a 2px straight underline.

Avoid:

- Rounded pills
- Glossy gradients
- Bright saturated colours
- Springy motion

Recipe: a selectable tile in this language:

```css
[data-noodle="soba"] .tile {
  padding: 12px 14px; border: 1px solid var(--mn-border); border-radius: 4px;
  background: var(--mn-surface) var(--s-speckle);
}
[data-noodle="soba"] .tile[aria-selected="true"] { background-image: var(--s-slats); border-color: var(--mn-fg); }
[data-noodle="soba"] .tile h3 { font-family: var(--mn-font-heading); font-weight: 600; }
```

## 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 4px, box 6px, badge 4px
- Density: default · Shadows: none

| token | light | dark |
|---|---|---|
| bg | #f7f6f3 | #161513 |
| surface | #ffffff | #1d1c19 |
| surface2 | #eeece6 | #282622 |
| fg | #1f1d1a | #eeebe4 |
| muted | #66615a | #a39d91 |
| border | #e0ddd5 | #33302b |
| input | #cdc8bc | #48443c |
| primary | #3f3a33 | #eeebe4 |
| primaryFg | #faf9f6 | #1d1c19 |
| secondary | #eeece6 | #282622 |
| secondaryFg | #1f1d1a | #eeebe4 |
| accent | #7c5a2e | #d4a466 |
| accentFg | #ffffff | #1d1407 |
| ring | #7c5a2e | #d4a466 |
| 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 | #3f3a33 | #eeebe4 |
| secondaryText | #72706c | #87857f |
| accentText | #7c5a2e | #d4a466 |
| successText | #16783a | #4ade80 |
| warningText | #a84f0a | #fbbf24 |
| dangerText | #c52525 | #f87171 |
| infoText | #0369a1 | #38bdf8 |
| link | #3f3a33 | #eeebe4 |