Daoxiao
Shaved from the block. Rough-hewn. Daoxiao mian, knife-shaved noodles, are shaved straight from a block of dough into boiling water, each one thick in the middle and thin at the edges like a willow leaf, with a ridged, hand-cut surface. Daoxiao is a carved system: shaved-stroke textures, ridged bevels, willow-leaf shapes and quick flicking motion.
Design language
Daoxiao is carved. Knife-shaved noodles are cut off a block with a curved blade, each thick in the middle and thin at the edges like a willow leaf, with a ridged surface. The interface carries a fine diagonal shaved-stroke texture, controls have a raised ridge down their middle, shapes are willow leaves (two round corners, two sharp), and things flick into place from the top right.
Principles
- Shaved texture (--dx-shave) on surfaces, tracks and headers.
- The ridge: a vertical light-to-dark gradient (--dx-ridge) on raised controls, plus a 2px carved bottom edge.
- Willow-leaf corners: 18px 4px 18px 4px (small: 10px 3px).
- A quick flick: translate from the top right with a slight rotation, 220ms, small overshoot.
Shape
Leaf radii on buttons, fields, cards, tabs and badges; a spinning leaf spinner.
Surface
Dough-cream with a shaved texture; a 2px carved edge and a warm soft shadow.
Colour
Vinegar-red primary, roasted-brown accent, dough neutrals.
Type
Sans at 650–750.
Motion
daoxiao-in: translate(10px,-8px) rotate(2deg) → 0; hover tilts −0.5°.
Data
Leaf-topped bars with a ridge; thick lines.
Designing new components in Daoxiao
MIAN does not ship every component you will need. To make a new one that belongs in Daoxiao, build it from --mn-* tokens inside [data-noodle="daoxiao"] and follow these rules.
Do
- border-radius: var(--dx-leaf) (or --dx-leaf-sm); background-image: var(--dx-shave) on surfaces, var(--dx-ridge) on controls.
- Add box-shadow: 0 2px 0 var(--mn-border) as the carved edge.
- Hover: translateY(-1px) rotate(-.5deg).
Avoid
- Symmetric uniform radii
- Glossy glass
- Perfectly smooth flat fills
Recipe: a selectable tile
[data-noodle="daoxiao"] .tile {
padding: 14px 16px; border: 1px solid var(--mn-border); border-radius: var(--dx-leaf);
background: var(--mn-surface) var(--dx-shave); box-shadow: 0 2px 0 var(--mn-border);
transition: transform 150ms cubic-bezier(.2, .9, .3, 1.15);
}
[data-noodle="daoxiao"] .tile:hover { transform: translateY(-1px) rotate(-.5deg); }
[data-noodle="daoxiao"] .tile[aria-selected="true"] { background-image: var(--dx-ridge), var(--dx-shave); border-color: var(--mn-primary); }The same guide, for AI tools: /ai/noodles/daoxiao.md · MCP tool get_design_language.
Colour, type and brand
What Daoxiao 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 · Red
Urgency, energy, appetite, danger. It raises attention faster than any other hue and reads as the most forceful.
Watch for: It is also the colour of errors. A red primary button next to a red error message makes both ambiguous, so pair a red brand with a distinct danger treatment (icon and words).
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 · 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.
Red with its neighbour brown and terracotta: an analogous pair, harmonious and natural. The page itself is warm.
Type
One voice throughout: neutral sans. Headings are heavy, which reads as loud and direct. Clear, modern, impartial. The voice of software and signage.
Personality
Reads as rough, hand-made, rugged, crafted, honest. Intensity 3 of 5. Brand dimension: ruggedness.
Suits
craft brands, outdoor, food, workshops. Less suited to fintech, precise tools.
Tone of voice
Lively. A point of view in the headline, concrete verbs, a little humour where it is true.
Logo
A simple geometric mark with slightly softened corners fits; avoid both hard spikes and full circles.
Inspired by the noodle
- Shaved from a block with a curved blade→diagonal shaved-stroke texture on surfaces
- Thick in the middle, thin at the edges→controls with a raised ridge down the middle and tapered ends
- Willow-leaf shape→leaf-cut corners on buttons, tabs and badges
- Flicked into the pot→a quick flick-in motion from the top right
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 Daoxiao. 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="daoxiao">
<!-- or only this noodle -->
<link rel="stylesheet" href="https://mian.ro/dist/mian-core.css">
<link rel="stylesheet" href="https://mian.ro/dist/noodles/daoxiao.css">
<!-- or scope it to one element -->
<section data-noodle="daoxiao" 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-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif |
| --mn-radius-field / box / badge | 6px · 10px · 4px |
| density | default |
| shadows | subtle |