Dangmyeon
Smoked glass, sesame gloss. Dangmyeon are Korean sweet-potato starch noodles: grey-brown and translucent, chewy, glossy with sesame oil and tossed with bright julienned vegetables in japchae. Dangmyeon is a smoked-glass system: dark tinted translucent panels with an amber sheen, and the vegetables’ colours as accents.
Design language
Dangmyeon is smoked glass. Sweet-potato noodles are grey-brown and translucent, glossy with sesame oil and tossed with bright vegetables, so the interface uses tinted, smoky translucent panels with a thicker glass edge at the bottom, a warm amber sheen that slides across when you hover, and the vegetables’ colours, carrot, spinach, egg yolk, for data.
Principles
- Tinted, not clear: panels are smoke-tinted glass (--d-smoke) with blur.
- A thicker bottom edge: inset 0 -3px 0 of the tint, a bright top edge (--d-edge).
- Sesame sheen: a diagonal amber highlight slides across buttons and rows on hover.
- Julienne colours for data and status, never for surfaces.
Shape
12px fields, 18px panels, pill badges.
Surface
Smoked translucent glass over a warm gradient; soft deep shadows.
Colour
Sesame-amber primary, spinach green accent; carrot, egg and mushroom series colours.
Type
Sans at 650–700.
Motion
dangmyeon-in: rise with a little blur and spring, 320ms; the sheen travels 600ms.
Data
Glossy tinted bars cycling through four julienne colours; a four-colour spinner.
Designing new components in Dangmyeon
MIAN does not ship every component you will need. To make a new one that belongs in Dangmyeon, build it from --mn-* tokens inside [data-noodle="dangmyeon"] and follow these rules.
Do
- background-color: var(--d-smoke); backdrop-filter: var(--d-blur); box-shadow: var(--d-edge).
- Add a ::before with var(--d-sheen) (background-size 250%) and move its background-position on hover.
- Colour data with --mn-series-1…4 (amber, green, yolk, carrot).
Avoid
- Clear or white glass
- Cold blue tints
- Flat opaque panels
Recipe: a selectable tile
[data-noodle="dangmyeon"] .tile {
position: relative; overflow: hidden; padding: 14px 16px; border: 1px solid light-dark(rgb(90 70 50 / .14), rgb(255 255 255 / .07)); border-radius: 18px;
background-color: var(--d-smoke); -webkit-backdrop-filter: var(--d-blur); backdrop-filter: var(--d-blur); box-shadow: var(--d-edge);
}
[data-noodle="dangmyeon"] .tile::before { content: ""; position: absolute; inset: 0; background: var(--d-sheen) 120% 0 / 250% 100% no-repeat; transition: background-position 600ms; }
[data-noodle="dangmyeon"] .tile:hover::before { background-position: -20% 0; }The same guide, for AI tools: /ai/noodles/dangmyeon.md · MCP tool get_design_language.
Colour, type and brand
What Dangmyeon 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 · Brown and terracotta
Earth, craft, reliability, age. Feels made by hand and unhurried.
Watch for: Looks dull on screens unless the neutrals around it are warm too.
Accent · Green
Growth, health, permission, money. The easiest colour to look at for a long time.
Watch for: Success messages are green too: a green brand needs a success state that is clearly a status (icon, words). Claims of sustainability made with green alone read as greenwashing.
Page · Brown and terracotta
Earth, craft, reliability, age. Feels made by hand and unhurried.
Watch for: Looks dull on screens unless the neutrals around it are warm too.
Brown and terracotta with green: a contrasting pair that needs one of the two to dominate. The page itself is warm.
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 smoked, glossy, moody, premium, dark. Intensity 3 of 5.
Suits
nightlife, music, premium apps, bars and restaurants. Less suited to children, public services.
Tone of voice
Lively. A point of view in the headline, concrete verbs, a little humour where it is true.
Logo
A simple geometric mark with slightly softened corners fits; avoid both hard spikes and full circles.
Inspired by the noodle
- Grey-brown, translucent→smoked, tinted glass panels rather than clear ones
- Glossy with sesame oil→a warm amber sheen along edges and on hover
- Tossed with carrot, spinach, egg and mushroom→a bright julienne palette for charts and status
- Chewy and springy→soft, slightly elastic motion
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 Dangmyeon. 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="dangmyeon">
<!-- or only this noodle -->
<link rel="stylesheet" href="https://mian.ro/dist/mian-core.css">
<link rel="stylesheet" href="https://mian.ro/dist/noodles/dangmyeon.css">
<!-- or scope it to one element -->
<section data-noodle="dangmyeon" 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 | 12px · 18px · 999px |
| density | default |
| shadows | soft |