Misua
Finest thread, never cut. Misua (mee sua) is one of the finest wheat noodles there is, stretched by hand into threads and eaten on birthdays as longevity noodles, the longer and more unbroken, the better. Misua is a thread-thin system in which long, unbroken lines run through and between components, drawn slowly, with a red longevity thread for what matters.
Design language
Misua is the finest thread, and it must never be cut: it is eaten for long life, and the longer the strand, the better. The interface is drawn in 1px threads that run on from one thing to the next, list items strung on a vertical thread, steps on a horizontal one, tabs on a shared line, and draw themselves slowly. A red longevity thread marks progress, selection and focus.
Principles
- 1px threads and light (300–400) type.
- Continuity: connect related elements with one unbroken thread instead of separate borders.
- The red thread marks what matters: focus, selection, progress, highlights.
- Beads on threads: knobs, points and markers are small circles on a line.
- Slow drawing: lines grow over 400–900ms (scaleX/scaleY from the start).
Shape
4px fields, 6px containers, round beads for knobs and markers.
Surface
Warm paper with thread-coloured (fg at 22%) 1px edges; no shadows.
Colour
Ink and paper; a red thread accent.
Type
Book serif headings at 400; light sans body; tracked uppercase table headers.
Motion
misua-in: slow fade 500ms; threads draw with misua-draw / misua-draw-y.
Data
Each bar is a single thread topped with a bead; 1px lines with small points; a 3px donut ring.
Designing new components in Misua
MIAN does not ship every component you will need. To make a new one that belongs in Misua, build it from --mn-* tokens inside [data-noodle="misua"] and follow these rules.
Do
- Separate and connect with 1px var(--ms-thread); if two items belong together, let one line run through both.
- Mark the current item with a 1px red thread (inset box-shadow or ::after) and draw it in with scaleX.
- Use a 6–7px bead (circle) as the knob or marker on any thread.
Avoid
- Lines thicker than 1px
- Broken, dashed or segmented lines
- Filled blocks of colour
- Quick snaps
Recipe: a selectable tile
[data-noodle="misua"] .tile { position: relative; padding: 12px 0 12px 28px; border: 0; background: none; font-weight: 400; }
[data-noodle="misua"] .tile::before { content: ""; position: absolute; left: 12px; top: 0; bottom: 0; width: 1px; background: var(--ms-thread); }
[data-noodle="misua"] .tile::after { content: ""; position: absolute; left: 9.5px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--mn-bg); box-shadow: inset 0 0 0 1px var(--mn-fg); }
[data-noodle="misua"] .tile[aria-selected="true"]::after { background: var(--mn-accent); box-shadow: none; }The same guide, for AI tools: /ai/noodles/misua.md · MCP tool get_design_language.
Colour, type and brand
What Misua 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 · 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.
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 fine, continuous, celebratory, gentle, thread-like. Intensity 2 of 5.
Suits
events, weddings, cultural sites, timelines. Less suited to dense admin.
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
- Threads finer than a hair→1px lines and light type throughout
- Longevity: never cut→lines continue from one element to the next: list items, steps and tabs are strung on one thread
- Stretched slowly by hand→lines draw themselves from start to end
- A red thread for birthdays→a thin red thread marks progress, selection and focus
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 Misua. 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="misua">
<!-- or only this noodle -->
<link rel="stylesheet" href="https://mian.ro/dist/mian-core.css">
<link rel="stylesheet" href="https://mian.ro/dist/noodles/misua.css">
<!-- or scope it to one element -->
<section data-noodle="misua" 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 | 4px · 6px · 999px |
| density | default |
| shadows | none |