Longxu
Folded, pulled, doubled, engraved in hairlines. Longxu mian, dragon’s beard noodles, are made by folding and pulling one rope of dough again and again; every fold doubles the strands, 2, 4, 8 … thousands of hair-fine threads. Longxu is an engraving system: fills are drawn with fine parallel hatching that doubles in density when something is active, on warm paper, in ink.
Design language
Longxu is an engraving. Dragon’s beard noodles are folded and pulled until one rope becomes thousands of hair-fine threads, each fold doubling the last, so fills are drawn, not painted: fine parallel hatching in ink on warm paper, which doubles in density when something is hovered, selected or on. Lines are 1px, headings are set in a book serif, and nothing is flat colour except the ink.
Principles
- Hatching instead of fills: --lx-hatch (1px every 6px); active states use --lx-hatch-2 (every 3px), the fold doubles the strands.
- Cross-hatching (--lx-cross) marks the strongest state: checked, highlighted, the chosen bar.
- 1px ink lines for every edge; text over hatching gets a paper-coloured halo (text-shadow).
- Book serif for headings and numbers; a small offset ink outline under floating panels, like a printed plate.
Shape
3–4px corners; square knobs.
Surface
Warm paper, 1px ink-tinted frames, a hatched rule under card headings.
Colour
Ink on paper; seal-red accent used sparingly.
Type
Book serif (400) headings, sans body.
Motion
Steady and even; progress hatching slides along (longxu-pull).
Data
Hatched columns with a 1px outline; the highlight cross-hatched; hatched rings for radials and spinners.
Designing new components in Longxu
MIAN does not ship every component you will need. To make a new one that belongs in Longxu, build it from --mn-* tokens inside [data-noodle="longxu"] and follow these rules.
Do
- Fill with background: var(--lx-hatch) and an inset 0 0 0 1px ink outline; on hover/selection switch to var(--lx-hatch-2).
- Put a paper halo behind any text over hatching: text-shadow: 0 0 3px var(--mn-surface).
- Keep every line 1px and every colour ink.
Avoid
- Solid colour fills for states
- Gradients and shadows
- Rounded pills
Recipe: a selectable tile
[data-noodle="longxu"] .tile { padding: 12px 14px; border: 1px solid var(--mn-fg); border-radius: 3px; background: var(--mn-surface); }
[data-noodle="longxu"] .tile:hover { background: var(--mn-surface) var(--lx-hatch); }
[data-noodle="longxu"] .tile[aria-selected="true"] { background: var(--mn-surface) var(--lx-hatch-2); }
[data-noodle="longxu"] .tile > * { text-shadow: 0 0 3px var(--mn-surface), 0 0 3px var(--mn-surface); }The same guide, for AI tools: /ai/noodles/longxu.md · MCP tool get_design_language.
Colour, type and brand
What Longxu 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 · 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.
Accent · 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).
Page · Yellow and gold
Optimism, attention, caution. Gold tones add value and ceremony.
Watch for: The lightest hue: white text on yellow fails, so yellow always carries dark text. Large yellow areas tire the eye.
Brown and terracotta with its neighbour red: an analogous pair, harmonious and natural. The page itself is warm.
Type
Two voices: book serif (old-style and transitional) for headings, neutral sans for the interface. Headings are light to regular, which reads as delicate and unhurried. Considered, literate, established. The voice of books and long reading.
Personality
Reads as engraved, intricate, crafted, precise, heritage. Intensity 2 of 5.
Suits
banking, certificates, heritage brands, premium tools. Less suited to playful consumer.
Tone of voice
Calm and clear. Short sentences, one idea each, a friendly but not chatty register.
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
- Every fold doubles the strands→hatched fills whose line spacing halves on hover and selection
- Hair-fine threads→1px lines and hairline hatching instead of flat colour
- A craft shown to an audience→an engraved, printed look: ink on warm paper, a book serif
- Pulled with rhythm→steady, even motion
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 Longxu. 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="longxu">
<!-- or only this noodle -->
<link rel="stylesheet" href="https://mian.ro/dist/mian-core.css">
<link rel="stylesheet" href="https://mian.ro/dist/noodles/longxu.css">
<!-- or scope it to one element -->
<section data-noodle="longxu" 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 | "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", ui-serif, Georgia, serif |
| --mn-radius-field / box / badge | 3px · 4px · 2px |
| density | default |
| shadows | none |