Theming & noodles

Choosing a noodle

Set data-noodle on <html>. Without it you get Mian, the black-and-white base every other noodle varies.

<html data-noodle="udon">

Light and dark

Every noodle has a light and a dark palette. By default the page follows the operating system. Force a mode with data-mode:

<html data-noodle="lamian" data-mode="dark">

Under the hood each token is a light-dark() pair and data-mode sets color-scheme, which inherits, so modes nest correctly.

Scoping

Both attributes work on any element, and they nest. A marketing section can use Mee while the app shell uses Mian, and a code sample can be forced dark:

<body>                                   <!-- mian -->
  <section data-noodle="mee"> … </section>
  <aside data-noodle="shirataki" data-mode="dark"> … </aside>
</body>

Switchers can be scoped too. Add data-mn-target to any theme control and it changes only that element: this is how the previews on this site work while the site itself stays Mian:

<select data-mn-noodle-select data-mn-target="#preview">…</select>
<div id="preview" data-noodle="mian"> … </div>

Families

The 67 noodles are grouped by what they share: Minimal (11), Flat (5), Pixel (3), Linear (7), Thin (5), Glass (10), Textured (5), Bold (7), Elegant (7), Rounded (7). Each noodle page opens with its written design language, philosophy, principles, the rules for shape, surface, colour, type, motion and data, and a section on designing new components in that language.

Tokens

Components only read these custom properties. Override any of them on any selector.

Noodles are design languages, not themes

A noodle has three parts. Tokens: colours, radii, fonts, density, shadows. A skin: rules in the mian.noodles cascade layer that change how components are built: Udon buttons have a thickness edge that compresses, Fensi surfaces are liquid glass with lens rims, Yinzhen draws everything in dots, Sanuki has no radius anywhere, every noodle has its own entrance animation. And a written design language: the philosophy, principles and rules behind the skin, so new components can be designed in the same language.

Skins are written with @scope ([data-noodle="…"]) to ([data-noodle]:not([data-noodle="…"])). The lower boundary is what makes nesting safe: a Shirataki section inside an Udon page gets none of Udon's rules.

Load everything with mian.css, or only what you use:

<link rel="stylesheet" href="https://mian.ro/dist/mian-core.css">      <!-- components + Mian -->
<link rel="stylesheet" href="https://mian.ro/dist/noodles/udon.css">  <!-- one more noodle -->

Make your own noodle

A noodle is a selector that sets the tokens, plus (optionally) a scoped skin. Start from one of the noodle JSON files or write it by hand:

[data-noodle="tonkotsu"] {
  --mn-bg:        light-dark(#fffaf5, #140f0b);
  --mn-surface:   light-dark(#ffffff, #1c1611);
  --mn-surface-2: light-dark(#f6ede3, #271f18);
  --mn-fg:        light-dark(#24170e, #f6ede3);
  --mn-muted:     light-dark(#6d5a4a, #b39f8b);
  --mn-border:    light-dark(#eadccd, #382d23);
  --mn-input:     light-dark(#d9c6b1, #4a3c2f);
  --mn-primary:   light-dark(#9a3412, #fdba74);
  --mn-primary-fg:   light-dark(#ffffff, #2a1206);
  --mn-primary-text: light-dark(#9a3412, #fdba74);
  --mn-ring:      light-dark(#9a3412, #fdba74);
  --mn-radius-field: 10px;
  --mn-radius-box: 14px;
}

/* Optional skin: change how things are built, not just their colour. */
@layer mian.noodles {
  @scope ([data-noodle="tonkotsu"]) to ([data-noodle]:not([data-noodle="tonkotsu"])) {
    :scope { --mn-enter: my-simmer; --mn-bar-radius: 999px; }
    .mn-btn { border-radius: 999px; box-shadow: 0 4px 0 color-mix(in oklab, var(--_bg), #000 25%); }
    .mn-card { border-width: 2px; }
  }
}
@keyframes my-simmer { from { opacity: 0; transform: translateY(6px) scale(.98); } }

Any token you leave out falls back to Mian. Check your text pairs reach 4.5:1 contrast, MIAN's own noodles are verified by the build.

Designing components MIAN does not ship

Every noodle page has a Designing new components section: concrete do and avoid rules and a CSS recipe. The same guide is published for AI tools at /ai/noodles/<id>.md and through the MCP tool get_design_language. The pattern is always the same:

/* 1. Build from tokens, scoped to the noodle */
[data-noodle="kalguksu"] .pricing-tier {
  border: 1px solid var(--mn-border);
  background: var(--mn-surface);
  color: var(--mn-fg);
}
/* 2. Apply the noodle's own rules (here: knife-cut corner, mono labels) */
[data-noodle="kalguksu"] .pricing-tier {
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
}

Colour roles

Components that take colour accept a role class next to them: mn-primary, mn-secondary, mn-accent, mn-success, mn-warning, mn-danger, mn-info, mn-neutral. Roles do not inherit, so a red alert does not turn the buttons inside it red.