# Longxu: a MIAN design language

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.

- Family: Thin · Origin: China · dragon’s beard noodles · License: MIAN License (free to use)
- Traits: engraved, intricate, crafted, precise, heritage · intensity 2/5 · contrast medium · density default. Good for: banking, certificates, heritage brands, premium tools. Less for: playful consumer.
- Use: `<html data-noodle="longxu">` (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/longxu.css
- Page: https://mian.ro/noodles/longxu

## Design philosophy

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.

## The language

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

## Colour, type and brand

- **Primary** #1a1712: brown and terracotta (deep, muted). Earth, craft, reliability, age. Feels made by hand and unhurried.
- **Accent** #8a2a1c: red (mid). Urgency, energy, appetite, danger. It raises attention faster than any other hue and reads as the most forceful.
- **Page** #f8f5ee: yellow and gold (pale). Optimism, attention, caution. Gold tones add value and ceremony.
- **Scheme.** Brown and terracotta with its neighbour red: an analogous pair, harmonious and natural. The page 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.
- **Reads as** engraved, intricate, crafted, precise, heritage.
- **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.
- 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: "longxu").

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

## Designing new components in Longxu

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

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

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

## Tokens

- Fonts: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
- Heading font: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", ui-serif, Georgia, serif
- Radius: field 3px, box 4px, badge 2px
- Density: default · Shadows: none

| token | light | dark |
|---|---|---|
| bg | #f8f5ee | #11100d |
| surface | #fffdf8 | #181612 |
| surface2 | #f0ebe0 | #221f1a |
| fg | #1a1712 | #f2ede3 |
| muted | #625b50 | #a79f92 |
| border | #e3dccd | #2f2b24 |
| input | #b8ad97 | #5a5347 |
| primary | #1a1712 | #f2ede3 |
| primaryFg | #fffdf8 | #1a1712 |
| secondary | #f0ebe0 | #221f1a |
| secondaryFg | #1a1712 | #f2ede3 |
| accent | #8a2a1c | #e59a8a |
| accentFg | #ffffff | #2a0a05 |
| ring | #1a1712 | #f2ede3 |
| 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 | #1a1712 | #f2ede3 |
| secondaryText | #747069 | #86827a |
| accentText | #8a2a1c | #e59a8a |
| successText | #15783a | #4ade80 |
| warningText | #a84e0a | #fbbf24 |
| dangerText | #c52424 | #f87171 |
| infoText | #0369a1 | #38bdf8 |
| link | #1a1712 | #f2ede3 |