# Daoxiao: a MIAN design language

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.

- Family: Textured · Origin: China · Shanxi · License: MIAN License (free to use)
- Traits: rough, hand-made, rugged, crafted, honest · intensity 3/5 · contrast medium · density default. Good for: craft brands, outdoor, food, workshops. Less for: fintech, precise tools.
- Use: `<html data-noodle="daoxiao">` (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/daoxiao.css
- Page: https://mian.ro/noodles/daoxiao

## Design philosophy

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.

## The language

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

## Colour, type and brand

- **Primary** #7f1d1d: red (mid). Urgency, energy, appetite, danger. It raises attention faster than any other hue and reads as the most forceful.
- **Accent** #8a5a12: brown and terracotta (mid, saturated). Earth, craft, reliability, age. Feels made by hand and unhurried.
- **Page** #f6f0e4: brown and terracotta (pale). Earth, craft, reliability, age. Feels made by hand and unhurried.
- **Scheme.** Red with its neighbour brown and terracotta: an analogous pair, harmonious and natural. The page 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.
- **Reads as** rough, hand-made, rugged, crafted, honest (brand dimension: ruggedness).
- **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.
- 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: "daoxiao").

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

## Designing new components in Daoxiao

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

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

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

## Tokens

- Fonts: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
- Heading font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
- Radius: field 6px, box 10px, badge 4px
- Density: default · Shadows: subtle

| token | light | dark |
|---|---|---|
| bg | #f6f0e4 | #15110b |
| surface | #fffaf1 | #1e1911 |
| surface2 | #ece2cf | #2a231a |
| fg | #231c12 | #f4ecdd |
| muted | #665a47 | #b0a28a |
| border | #dfd2ba | #3a3124 |
| input | #c2b193 | #574a36 |
| primary | #7f1d1d | #f5a3a3 |
| primaryFg | #ffffff | #2a0707 |
| secondary | #ece2cf | #2a231a |
| secondaryFg | #231c12 | #f4ecdd |
| accent | #8a5a12 | #e5b867 |
| accentFg | #ffffff | #261a04 |
| ring | #7f1d1d | #f5a3a3 |
| 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 | #7f1d1d | #f5a3a3 |
| secondaryText | #736b5e | #8b8378 |
| accentText | #8a5a12 | #e5b867 |
| successText | #167639 | #4ade80 |
| warningText | #a64e0a | #fbbf24 |
| dangerText | #c22523 | #f87171 |
| infoText | #0369a1 | #38bdf8 |
| link | #7f1d1d | #f5a3a3 |