Bún: a MIAN design system

Design language

Bún is thread-thin rice vermicelli, served in small, lightly tangled nests. The language is fine and concentric: double-thread outlines, rings within rings on focus and on avatars, beads on threads for progress and switches, dotted and dashed thread dividers, and nested spinners turning opposite ways.

Principles

Two threads: outlines are a 1px line, a gap, and a second 1px line (layered box-shadows).
Nests: focus and emphasis add concentric rings.
Beads on threads: progress, switches and chart bars are thin threads ending in a bead.
Delicate: thin strokes, rosy light colours.

Shape

Pills and circles; 10px fields, 16px containers.

Surface

Rosy white, surfaces ringed by a double thread (var(--b-thread)).

Colour

Rose primary, teal accent.

Type

Delicate serif-like headings, light body.

Motion

bun-in: a slight twist and scale, 220ms; focus rings expand outward (bun-nest).

Data

Thread bars topped with a nest ring, beaded progress, doubled line shadows, ringed donuts.

Designing new components in Bún

MIAN does not ship every component you will need. To make a new one that belongs in Bún, build it from --mn-* tokens inside [data-noodle="bun"] and follow these rules.

Do

Outline with box-shadow: 0 0 0 1px var(--mn-border), 0 0 0 4px var(--mn-bg), 0 0 0 5px var(--mn-border).
Emphasise with an extra outer ring in the primary at 45%.
Show quantities as a 1.5–2px thread with a round bead at the end.

Avoid

Thick fills
Heavy shadows
Square corners

Recipe: a selectable tile

[data-noodle="bun"] .tile {
  padding: 12px 16px; border: 1px solid var(--mn-border); border-radius: 16px; background: var(--mn-surface);
  box-shadow: 0 0 0 4px var(--mn-bg), 0 0 0 5px var(--mn-border);
}
[data-noodle="bun"] .tile[aria-selected="true"] { box-shadow: 0 0 0 2px var(--mn-bg), 0 0 0 3px var(--mn-primary), 0 0 0 5px var(--mn-bg), 0 0 0 6px color-mix(in oklab, var(--mn-primary) 45%, transparent); }

The same guide, for AI tools: /ai/noodles/bun.md · MCP tool get_design_language.

Colour, type and brand

What Bún 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 · Red

#e11d48 · mid, saturated

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

Accent · Teal and cyan

#0f766e · deep, saturated

Clarity, cleanliness, calm technology. Cooler than green, softer than blue.

Watch for: Very common in medical and SaaS products, so it needs a distinctive neutral or typeface to be remembered.

Page · White and paper

#fffafa · pale, saturated

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.

Red against teal and cyan, close to complementary: strong contrast, so the accent must stay rare. The page itself is warm.

Type

Two voices: book serif (old-style and transitional) for headings, neutral sans for the interface. Headings are semibold, which reads as confident without shouting. Considered, literate, established. The voice of books and long reading.

Personality

Reads as rosy, delicate, light, friendly, lifestyle. Intensity 2 of 5.

Suits

beauty, lifestyle, events, salons. Less suited to finance, engineering.

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

Thread-thin rice vermicellifine double-thread outlines
Served in little nestsconcentric rings on focus, avatars and spinners
Tangleddashed, looping thread dividers
Delicatelight, airy spacing and small, precise motion

Specimen

The same markup as every other noodle. Press, hover, open the menu and the dialog: shape, depth, texture and motion all change.

Try your brand colour

Your own

Open in the studio

Light

Buttons

Fields

Name

Choices

Check Radio

Status

NewPaidPendingDraftTag

72

AP

Tabs

Overview panel.

Activity panel.

Settings panel.

Bars

M

T

W

T

F

S

Line & donut

45%

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

Dark

Buttons

Fields

Name

Choices

Check Radio

Status

NewPaidPendingDraftTag

72

AP

Tabs

Overview panel.

Activity panel.

Settings panel.

Bars

M

T

W

T

F

S

Line & donut

45%

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

Use it

<!-- everything -->
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<html data-noodle="bun">

<!-- or only this noodle -->
<link rel="stylesheet" href="https://mian.ro/dist/mian-core.css">
<link rel="stylesheet" href="https://mian.ro/dist/noodles/bun.css">

<!-- or scope it to one element -->
<section data-noodle="bun" 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.

Background#fffafa

Surface#ffffff

Muted surface#fcefef

Foreground#2a1215

Muted text#6e5156

Border#f3dfe1

Input border#e3c2c7

Primary#e11d48

On primary#ffffff

Secondary#fde8ea

Accent#0f766e

Success#15803d

Warning#b45309

Danger#dc2626

Info#0369a1

Focus ring#e11d48

Typography & shape

--mn-font	ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
--mn-font-heading	ui-serif, "New York", "Iowan Old Style", "Palatino Linotype", Georgia, serif
--mn-radius-field / box / badge	10px · 16px · 999px
density	default
shadows	subtle