# Dangmyeon: a MIAN design language

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.

- Family: Glass · Origin: Korea · sweet-potato glass noodles · License: MIAN License (free to use)
- Traits: smoked, glossy, moody, premium, dark · intensity 3/5 · contrast medium · density default. Good for: nightlife, music, premium apps, bars and restaurants. Less for: children, public services.
- Use: `<html data-noodle="dangmyeon">` (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/dangmyeon.css
- Page: https://mian.ro/noodles/dangmyeon

## Design philosophy

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.

## The language

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

## Colour, type and brand

- **Primary** #a14a0d: brown and terracotta (mid, saturated). Earth, craft, reliability, age. Feels made by hand and unhurried.
- **Accent** #3f6212: green (deep). Growth, health, permission, money. The easiest colour to look at for a long time.
- **Page** #e7e3dd: brown and terracotta (pale, muted). Earth, craft, reliability, age. Feels made by hand and unhurried.
- **Scheme.** Brown and terracotta with green: a contrasting pair that needs one of the two to dominate. The page 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.
- **Reads as** smoked, glossy, moody, premium, dark.
- **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.
- 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: "dangmyeon").

## 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

## Designing new components in Dangmyeon

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

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

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

## 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 12px, box 18px, badge 999px
- Density: default · Shadows: soft · Translucent surfaces

| token | light | dark |
|---|---|---|
| bg | #e7e3dd | #0f0d0b |
| surface | #faf8f5 | #1b1815 |
| surface2 | #dcd6ce | #26221e |
| fg | #1d1915 | #f1ebe3 |
| muted | #5b5249 | #a8998a |
| border | #cdc5ba | #3a332c |
| input | #a99f92 | #564c42 |
| primary | #a14a0d | #f5a524 |
| primaryFg | #ffffff | #1f1300 |
| secondary | #dcd6ce | #26221e |
| secondaryFg | #1d1915 | #f1ebe3 |
| accent | #3f6212 | #a3d65c |
| accentFg | #ffffff | #132203 |
| ring | #a14a0d | #f5a524 |
| 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 | #a14a0d | #f5a524 |
| secondaryText | #69655f | #87827d |
| accentText | #3f6212 | #a3d65c |
| successText | #167438 | #4ade80 |
| warningText | #a24c0a | #fbbf24 |
| dangerText | #c12424 | #f87171 |
| infoText | #0369a1 | #38bdf8 |
| link | #a14a0d | #f5a524 |