Soba
Earthy, editorial, restrained. Buckwheat neutrals with serif headings and small radii. Flat: borders instead of shadows. For publications, docs and calm tools.
Design language
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.
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.
Designing new components in Soba
MIAN does not ship every component you will need. To make a new one that belongs in Soba, build it from --mn-* tokens inside [data-noodle="soba"] and follow these rules.
Do
- 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
[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; }The same guide, for AI tools: /ai/noodles/soba.md · MCP tool get_design_language.
Colour, type and brand
What 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 · Black and ink
Authority, precision, luxury. It makes everything next to it look more deliberate.
Watch for: Pure #000 on pure #fff is harsh on long text. Soften one of the two slightly, or warm both.
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.
A neutral primary with one brown and terracotta accent: the accent means “look here” precisely because nothing else is coloured. 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 editorial, earthy, restrained, literary, calm. Intensity 1 of 5. Brand dimension: sophistication.
Suits
publications, documentation, law, research, calm tools. Less suited to games, campaigns.
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.
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
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 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="soba">
<!-- or only this noodle -->
<link rel="stylesheet" href="https://mian.ro/dist/mian-core.css">
<link rel="stylesheet" href="https://mian.ro/dist/noodles/soba.css">
<!-- or scope it to one element -->
<section data-noodle="soba" 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 | 4px · 6px · 4px |
| density | default |
| shadows | none |