Naengmyeon
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.
Design language
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.
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.
Designing new components in Naengmyeon
MIAN does not ship every component you will need. To make a new one that belongs in Naengmyeon, build it from --mn-* tokens inside [data-noodle="naengmyeon"] and follow these rules.
Do
- 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
[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); }The same guide, for AI tools: /ai/noodles/naengmyeon.md · MCP tool get_design_language.
Colour, type and brand
What Naengmyeon 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 · Blue
Trust, competence, calm, distance. The world’s most-liked colour and the default of banks, software and social networks.
Watch for: The safest choice is also the least memorable. A blue brand is told apart by its typography, shape and tone of voice, not by its blue.
Accent · Blue
Trust, competence, calm, distance. The world’s most-liked colour and the default of banks, software and social networks.
Watch for: The safest choice is also the least memorable. A blue brand is told apart by its typography, shape and tone of voice, not by its blue.
Page · Blue
Trust, competence, calm, distance. The world’s most-liked colour and the default of banks, software and social networks.
Watch for: The safest choice is also the least memorable. A blue brand is told apart by its typography, shape and tone of voice, not by its blue.
Two tones of blue: harmonious and calm, with little contrast between brand and accent. The page itself 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.
Personality
Reads as metallic, cold, industrial, crisp, engineered. Intensity 2 of 5. Brand dimension: ruggedness.
Suits
hardware, industrial, automotive, engineering. Less suited to soft 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.
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
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 Naengmyeon. 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="naengmyeon">
<!-- or only this noodle -->
<link rel="stylesheet" href="https://mian.ro/dist/mian-core.css">
<link rel="stylesheet" href="https://mian.ro/dist/noodles/naengmyeon.css">
<!-- or scope it to one element -->
<section data-noodle="naengmyeon" 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 | ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif |
| --mn-radius-field / box / badge | 8px · 12px · 6px |
| density | default |
| shadows | subtle |