# Naengmyeon: a MIAN design language

Ice-cold, in a brushed-steel bowl. Naengmyeon are long, chewy buckwheat noodles served in an ice-cold broth, often with a slush of ice, in a brushed stainless-steel bowl, and cut at the table with scissors. Naengmyeon is a brushed-metal system: fine brushed-steel textures, frosted edges, cool steel greys, and a crisp snip when things open.

- Family: Textured · Origin: Korea · License: MIAN License (free to use)
- Traits: metallic, cold, industrial, crisp, engineered · intensity 2/5 · contrast medium · density default. Good for: hardware, industrial, automotive, engineering. Less for: soft lifestyle.
- Use: `<html data-noodle="naengmyeon">` (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/naengmyeon.css
- Page: https://mian.ro/noodles/naengmyeon

## Design philosophy

Naengmyeon is brushed steel and ice. The noodles come ice-cold in a stainless-steel bowl and are cut with scissors at the table, so raised surfaces are brushed metal plates with a bright top rim and a dark bottom rim, fields are cold recessed steel that frost at the edge when focused, and components open with a crisp snip from the centre.

## Principles

- Brushed metal (--nm-brush over --nm-steel) on raised surfaces, knobs and thumbs.
- Rims, not borders: --nm-rim (bright top, dark bottom).
- Frost for focus and hover: an icy blue outer ring.
- Snip: clip-path opens from the centre (inset(0 50% 0 50%) → 0), 220ms.

## The language

- **Shape.** 8px fields, 12px panels, 5–7px rectangular knobs.
- **Surface.** Brushed steel plates; recessed cold wells for inputs, tracks and segmented controls.
- **Colour.** Slate primary (steel gradient on default buttons), icy blue accent, cool greys.
- **Type.** Sans at 600, slightly tracked.
- **Motion.** naengmyeon-in: clip-path snip from the centre; blades spinner.
- **Data.** Steel bars with rims; the highlight frosted blue.

## Colour, type and brand

- **Primary** #334155: blue (deep, muted). Trust, competence, calm, distance. The world’s most-liked colour and the default of banks, software and social networks.
- **Accent** #0369a1: blue (mid, saturated). Trust, competence, calm, distance. The world’s most-liked colour and the default of banks, software and social networks.
- **Page** #eef1f4: blue (pale, muted). Trust, competence, calm, distance. The world’s most-liked colour and the default of banks, software and social networks.
- **Scheme.** Two tones of blue: harmonious and calm, with little contrast between brand and accent. The page is cool.
- **Type.** One voice throughout: neutral sans. Headings are semibold, which reads as confident without shouting. Clear, modern, impartial. The voice of software and signage.
- **Reads as** metallic, cold, industrial, crisp, engineered (brand dimension: ruggedness).
- **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.
- 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: "naengmyeon").

## Inspired by the noodle

- A brushed stainless-steel bowl → fine horizontal brushed-metal texture on raised surfaces and knobs
- Ice slush in the broth → frosted, icy highlights and cool blue-greys
- Cut with scissors at the table → components open with a crisp snip from the centre
- Long, chewy strands → long steel rails for progress and sliders

## Designing new components in Naengmyeon

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

- background: var(--nm-brush), var(--nm-steel); box-shadow: var(--nm-rim), 0 1px 2px rgb(0 0 0 / .18).
- Recessed parts: a darker flat fill with inset 0 1px 3px shadow.
- Hover/focus: add var(--nm-frost) (an icy 1px ring) or a 3px pale blue halo.

Avoid:

- Warm colours
- Soft organic shapes
- Glossy colour gradients

Recipe: a selectable tile in this language:

```css
[data-noodle="naengmyeon"] .tile {
  padding: 14px 16px; border: 1px solid var(--mn-border); border-radius: 12px;
  background: var(--nm-brush), var(--nm-steel); box-shadow: var(--nm-rim);
}
[data-noodle="naengmyeon"] .tile:hover { box-shadow: var(--nm-rim), var(--nm-frost); }
```

## Tokens

- Fonts: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
- Heading font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
- Radius: field 8px, box 12px, badge 6px
- Density: default · Shadows: subtle

| token | light | dark |
|---|---|---|
| bg | #eef1f4 | #0b0e12 |
| surface | #fbfcfd | #141920 |
| surface2 | #e2e7ec | #1d242d |
| fg | #0f172a | #e8edf3 |
| muted | #4a5568 | #98a4b3 |
| border | #d3dae2 | #2a333e |
| input | #aab5c2 | #445061 |
| primary | #334155 | #cbd5e1 |
| primaryFg | #ffffff | #0f172a |
| secondary | #e2e7ec | #1d242d |
| secondaryFg | #0f172a | #e8edf3 |
| accent | #0369a1 | #7dd3fc |
| accentFg | #ffffff | #04202e |
| ring | #0369a1 | #7dd3fc |
| 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 | #334155 | #cbd5e1 |
| secondaryText | #686e7b | #7e848c |
| accentText | #0369a1 | #7dd3fc |
| successText | #14763b | #4ade80 |
| warningText | #a74e0c | #fbbf24 |
| dangerText | #c32426 | #f87171 |
| infoText | #0369a1 | #38bdf8 |
| link | #334155 | #cbd5e1 |