Biangbiang
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.
Design language
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).
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.
Designing new components in Biangbiang
MIAN does not ship every component you will need. To make a new one that belongs in Biangbiang, build it from --mn-* tokens inside [data-noodle="biangbiang"] and follow these rules.
Do
- 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
[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); }The same guide, for AI tools: /ai/noodles/biangbiang.md · MCP tool get_design_language.
Colour, type and brand
What Biangbiang 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 · Orange
Warmth, friendliness, appetite, affordability. Active like red, without the alarm.
Watch for: Can read as cheap when saturated across large areas; text on orange rarely passes contrast, so use it for fills with dark text or for accents.
Accent · Green
Growth, health, permission, money. The easiest colour to look at for a long time.
Watch for: Success messages are green too: a green brand needs a success state that is clearly a status (icon, words). Claims of sustainability made with green alone read as greenwashing.
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.
Orange with green: a contrasting pair that needs one of the two to dominate. 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 loud, brutal, energetic, unusual, raw. Intensity 5 of 5. Brand dimension: excitement.
Suits
creative agencies, festivals, events, youth brands, indie products. Less suited to finance, legal, healthcare.
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.
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
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 Biangbiang. 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="biangbiang">
<!-- or only this noodle -->
<link rel="stylesheet" href="https://mian.ro/dist/mian-core.css">
<link rel="stylesheet" href="https://mian.ro/dist/noodles/biangbiang.css">
<!-- or scope it to one element -->
<section data-noodle="biangbiang" 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 | 4px · 6px · 3px |
| density | comfortable |
| shadows | none |