# Bún: a MIAN design language

Delicate, rosy, light. Rice vermicelli. Rose primary on blush white, teal accent, rounded but refined. Lifestyle, beauty, events.

- Family: Thin · Origin: Vietnam · rice vermicelli · License: MIAN License (free to use)
- Traits: rosy, delicate, light, friendly, lifestyle · intensity 2/5 · contrast low · density default. Good for: beauty, lifestyle, events, salons. Less for: finance, engineering.
- Use: `<html data-noodle="bun">` (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/bun.css
- Page: https://mian.ro/noodles/bun

## Design philosophy

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.

## The language

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

## Colour, type and brand

- **Primary** #e11d48: red (mid, saturated). Urgency, energy, appetite, danger. It raises attention faster than any other hue and reads as the most forceful.
- **Accent** #0f766e: teal and cyan (deep, saturated). Clarity, cleanliness, calm technology. Cooler than green, softer than blue.
- **Page** #fffafa: white and paper (pale, saturated). Space, honesty, simplicity. Warm whites feel human, cool whites feel clinical.
- **Scheme.** Red against teal and cyan, close to complementary: strong contrast, so the accent must stay rare. The page 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.
- **Reads as** rosy, delicate, light, friendly, lifestyle.
- **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: "bun").

## Inspired by the noodle

- Thread-thin rice vermicelli → fine double-thread outlines
- Served in little nests → concentric rings on focus, avatars and spinners
- Tangled → dashed, looping thread dividers
- Delicate → light, airy spacing and small, precise motion

## Designing new components in Bún

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

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

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

## Tokens

- Fonts: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
- Heading font: ui-serif, "New York", "Iowan Old Style", "Palatino Linotype", Georgia, serif
- Radius: field 10px, box 16px, badge 999px
- Density: default · Shadows: subtle

| token | light | dark |
|---|---|---|
| bg | #fffafa | #170b0d |
| surface | #ffffff | #1f0f12 |
| surface2 | #fcefef | #2b161a |
| fg | #2a1215 | #fcecee |
| muted | #6e5156 | #c09aa0 |
| border | #f3dfe1 | #3a1f24 |
| input | #e3c2c7 | #55303a |
| primary | #e11d48 | #fb7185 |
| primaryFg | #ffffff | #2a0610 |
| secondary | #fde8ea | #2b161a |
| secondaryFg | #881337 | #fcecee |
| accent | #0f766e | #2dd4bf |
| accentFg | #ffffff | #042f2c |
| ring | #e11d48 | #fb7185 |
| 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 | #c71b41 | #fb7185 |
| secondaryText | #836c6e | #8f7d80 |
| accentText | #0f766e | #2dd4bf |
| successText | #16793b | #4ade80 |
| warningText | #a94e0a | #fbbf24 |
| dangerText | #c72424 | #f87171 |
| infoText | #0369a1 | #38bdf8 |
| link | #e11d48 | #fb7185 |