# Biangbiang: a MIAN design language

Belt-wide, slapped, loud. Biangbiang noodles are hand-pulled into belts as wide as a hand and slapped against the counter as they are stretched, the sound gives them their name, written with one of the most complicated characters in Chinese. Biangbiang is a heavyweight system: belt-wide blocks, very heavy type, thick borders, flat colour and a slap of motion.

- Family: Bold · Origin: China · Shaanxi · License: MIAN License (free to use)
- Traits: loud, brutal, energetic, unusual, raw, expressive · intensity 5/5 · contrast high · density comfortable. Good for: creative agencies, festivals, events, youth brands, indie products. Less for: finance, legal, healthcare, dense admin.
- Use: `<html data-noodle="biangbiang">` (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/biangbiang.css
- Page: https://mian.ro/noodles/biangbiang

## Design philosophy

Biangbiang is loud and wide. The noodles are hand-wide belts slapped on the counter, named after the sound and written with one of the most complicated characters there is. The interface uses the heaviest type in MIAN, belt-wide blocks with 3px ink borders, full-width colour bands across card tops, flat colour with no shadows at all, and a slap of motion: things land with an impact and a small rebound.

## Principles

- Weight: 900 headings, uppercase 900 buttons, labels and tabs.
- Belts: wide padding, full-width colour bands, 8px tab underlines.
- 3px ink borders on everything (--mn-border-w: 3px).
- Flat: no shadows, no gradients, only ink, cream and chilli orange.
- Slap: land from above with a squash and a rebound (biangbiang-in).

## The language

- **Shape.** 4px fields, 6px panels, 3px badges; blocky switch and slider.
- **Surface.** Cream with 3px ink edges; card headers are solid chilli bands.
- **Colour.** Chilli orange primary with black text, scallion green accent, ink and cream.
- **Type.** Sans at 900, tight (−0.05em) and large.
- **Motion.** biangbiang-in: −14px drop, squash, rebound, 300ms.
- **Data.** Fat flat bars with an ink edge, a very thick donut.

## Colour, type and brand

- **Primary** #ea580c: orange (mid, saturated). Warmth, friendliness, appetite, affordability. Active like red, without the alarm.
- **Accent** #166534: green (deep). Growth, health, permission, money. The easiest colour to look at for a long time.
- **Page** #fff7ed: white and paper (pale, saturated). Space, honesty, simplicity. Warm whites feel human, cool whites feel clinical.
- **Scheme.** Orange with green: a contrasting pair that needs one of the two to dominate. 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** loud, brutal, energetic, unusual, raw (brand dimension: excitement).
- **Tone of voice.** Loud. Imperatives, one- and two-word lines, contrast in everything. Use it only if the product can keep the promise.
- **Logo.** A simple geometric mark with slightly softened corners fits; avoid both hard spikes and full circles. Use a heavy wordmark; a thin one would vanish beside these 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: "biangbiang").

## Inspired by the noodle

- Belts as wide as a hand → wide, flat, blocky controls and full-width colour bands
- One of the most complicated characters → the heaviest type in MIAN (900), set tight and large
- Slapped on the counter → things land with a quick impact and a small rebound
- Chilli oil poured hot over the top → chilli orange on black and cream

## Designing new components in Biangbiang

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

- border: 3px solid var(--mn-fg); border-radius: 4–6px; no box-shadow.
- Make it wide and loud: uppercase 900 text, generous horizontal padding.
- Selected = solid primary band with an ink edge.

Avoid:

- Shadows and gradients
- Thin lines or light weights
- Subtle hover states

Recipe: a selectable tile in this language:

```css
[data-noodle="biangbiang"] .tile {
  padding: 14px 20px; border: 3px solid var(--mn-fg); border-radius: 6px; background: var(--mn-surface);
  font-weight: 900; text-transform: uppercase; letter-spacing: .02em;
}
[data-noodle="biangbiang"] .tile[aria-selected="true"] { background: var(--mn-primary); color: var(--mn-primary-fg); }
[data-noodle="biangbiang"] .tile:active { transform: scaleY(.9); }
```

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

| token | light | dark |
|---|---|---|
| bg | #fff7ed | #0c0a09 |
| surface | #ffffff | #171412 |
| surface2 | #fde9d4 | #24201c |
| fg | #0a0a0a | #fff7ed |
| muted | #5c4a3c | #b8a898 |
| border | #0a0a0a | #fff7ed |
| input | #0a0a0a | #fff7ed |
| primary | #ea580c | #fb923c |
| primaryFg | #0a0a0a | #0a0a0a |
| secondary | #0a0a0a | #fff7ed |
| secondaryFg | #fff7ed | #0c0a09 |
| accent | #166534 | #4ade80 |
| accentFg | #ffffff | #052e16 |
| ring | #0a0a0a | #fb923c |
| 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 | #b4450c | #fb923c |
| secondaryText | #0a0a0a | #fff7ed |
| accentText | #166534 | #4ade80 |
| successText | #14793a | #4ade80 |
| warningText | #aa4f09 | #fbbf24 |
| dangerText | #c72323 | #f87171 |
| infoText | #0369a1 | #38bdf8 |
| link | #166534 | #fb923c |