Sotanghon

Design language

Sotanghon is glass you can actually see through. Surfaces are about a third opaque and sit over a soft, colourful backdrop, which they blur and brighten so that text on them stays readable. A thin line of light along the top edge and a hairline all round are what draw each pane; there are no solid fills except the ink primary. The backdrop is not optional: without something behind it, glass is just grey.

Designing new components in Sotanghon

MIAN does not ship every component you will need. To make a new one that belongs in Sotanghon, build it from --mn-* tokens inside [data-noodle="sotanghon"] and follow these rules.

Recipe: a selectable tile

[data-noodle="sotanghon"] .tile {
  padding: 18px; border: 0; border-radius: 24px;
  background: color-mix(in srgb, var(--mn-surface) 34%, transparent); color: var(--mn-fg);
  -webkit-backdrop-filter: blur(22px) saturate(1.7); backdrop-filter: blur(22px) saturate(1.7);
  box-shadow: inset 0 1px 0 light-dark(rgb(255 255 255 / .7), rgb(255 255 255 / .14)), inset 0 0 0 1px light-dark(rgb(15 23 42 / .1), rgb(255 255 255 / .1));
  transition: background-color 200ms cubic-bezier(.16, 1, .3, 1);
}
[data-noodle="sotanghon"] .tile:hover { background: color-mix(in srgb, var(--mn-surface) 68%, transparent); }
[data-noodle="sotanghon"] .tile[aria-selected="true"] { background: var(--mn-fg); color: var(--mn-bg); }

The same guide, for AI tools: /ai/noodles/sotanghon.md · MCP tool get_design_language.

Colour, type and brand

What Sotanghon 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.

Blue with its neighbour teal and cyan: an analogous pair, harmonious and natural. The page itself is cool.

Inspired by the noodle

• You see the broth through the noodle→surfaces at 34% opacity over a coloured backdrop
• Clear strands catch the light→a thin bright rim on the top edge of every pane
• Soaked until soft→heavy blur and saturation behind each pane, so text stays readable
• Served in a golden broth→a warm and cool backdrop of sky, peach and mint, never one flat colour

Specimen

The same markup as every other noodle. Press, hover, open the menu and the dialog: shape, depth, texture and motion all change.

Use it

<!-- everything -->
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<html data-noodle="sotanghon">

<!-- or only this noodle -->
<link rel="stylesheet" href="https://mian.ro/dist/mian-core.css">
<link rel="stylesheet" href="https://mian.ro/dist/noodles/sotanghon.css">

<!-- or scope it to one element -->
<section data-noodle="sotanghon" 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