# Sotanghon: a MIAN design language

Real transparency. You see what is behind. Sotanghon are Filipino mung-bean noodles: in the bowl you see the broth through them rather than the noodle. Sotanghon is glass with real transparency: surfaces are about a third opaque, they blur and brighten whatever is behind them, a line of light runs along the top edge, and the backdrop is part of the design.

- Family: Glass · Origin: Philippines · glass noodles · License: MIAN License (free to use)
- Traits: glass, transparent, airy, premium, modern, light, futuristic · intensity 3/5 · contrast medium · density comfortable. Good for: consumer apps, media apps, product launches, weather, music, portfolios, operating-system style interfaces. Less for: dense admin, financial data, print, long-form reading.
- Use: `<html data-noodle="sotanghon">` (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/sotanghon.css
- Page: https://mian.ro/noodles/sotanghon

## Design philosophy

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.

## Principles

- Three opacities only: 18% for wells, 34% for panes, 68% for anything that floats above panes.
- Every pane has the rim: inset 0 1px 0 light, plus a 1px inner hairline. No opaque borders.
- Blur and saturate behind (22px, 170%), so the backdrop becomes soft colour, never detail.
- Ink is the only solid: primary buttons, the switch when on, progress fills.
- Design the backdrop: two or three large soft colours, warm and cool, behind everything.

## The language

- **Shape.** 14px fields, 24px panes, pill badges.
- **Surface.** Translucent white (dark: translucent slate) with backdrop-filter. Panes inside panes drop the blur and use the 18% well.
- **Colour.** Ink primary on glass, a teal accent. Colour comes from the backdrop: sky, peach and mint in light, deep blue, ember and forest in dark.
- **Type.** The system font, headings at 650 tracked −0.03em.
- **Motion.** sotanghon-in: rises 6px, scales from .985 and sharpens from a 6px blur in 320ms.
- **Data.** Bars are 16% ink glass with the highlighted bar in solid ink; a 2px ink line over a 16% area.

## Colour, type and brand

- **Primary** #0b1220: blue (deep). Trust, competence, calm, distance. The world’s most-liked colour and the default of banks, software and social networks.
- **Accent** #0e7490: teal and cyan (mid, saturated). Clarity, cleanliness, calm technology. Cooler than green, softer than blue.
- **Page** #e9eef5: blue (pale). Trust, competence, calm, distance. The world’s most-liked colour and the default of banks, software and social networks.
- **Scheme.** Blue with its neighbour teal and cyan: an analogous pair, harmonious and natural. The page is cool.
- **Type.** One voice throughout: system sans (the device’s own typeface). Headings are semibold, which reads as confident without shouting. Native, familiar, efficient. It disappears, which is the point: the product feels like part of the device.
- **Reads as** glass, transparent, airy, premium, modern.
- **Tone of voice.** Lively. A point of view in the headline, concrete verbs, a little humour where it is true.
- **Logo.** Round marks fit: a circular symbol or a soft, lowercase wordmark.
- 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: "sotanghon").

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

## Designing new components in Sotanghon

Build new components from `--mn-*` tokens, scoped with `[data-noodle="sotanghon"]`, 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-mix(in srgb, var(--mn-surface) 34%, transparent) with backdrop-filter: var(--mn-backdrop). Border: transparent.
- Edge: box-shadow: var(--st-rim), var(--st-drop).
- Hover raises opacity to 68%; it does not move or tint.
- Selected: a 68% pane inside an 18% track, or solid ink for a single chosen item.
- Place it over the noodle’s backdrop (the page already has it); inside another pane, drop the blur.
- Honour prefers-reduced-transparency by raising the opacity to 94%.

Avoid:

- Opaque cards
- Glass over a plain white or plain black page
- Purple and blue blobs as the backdrop
- Body text on a pane with no blur behind it
- More than two layers of glass on top of each other

Recipe: a selectable tile in this language:

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

## Tokens

- Fonts: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
- Heading font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
- Radius: field 14px, box 24px, badge 999px
- Density: comfortable · Shadows: none · Translucent surfaces

| token | light | dark |
|---|---|---|
| bg | #e9eef5 | #05070c |
| surface | #ffffff | #0f141c |
| surface2 | #dfe6ee | #19202b |
| fg | #0b1220 | #eef3f9 |
| muted | #3d4858 | #a3afc0 |
| border | #d5dde7 | #252e3b |
| input | #b3bfcd | #3b4658 |
| primary | #0b1220 | #f2f6fb |
| primaryFg | #ffffff | #0b1220 |
| secondary | #dfe6ee | #19202b |
| secondaryFg | #0b1220 | #eef3f9 |
| accent | #0e7490 | #67d7ee |
| accentFg | #ffffff | #03222b |
| ring | #0e7490 | #67d7ee |
| 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 | #0b1220 | #f2f6fb |
| secondaryText | #646b77 | #7b818a |
| accentText | #0e728e | #67d7ee |
| successText | #14793b | #4ade80 |
| warningText | #aa4f0a | #fbbf24 |
| dangerText | #c72425 | #f87171 |
| infoText | #0369a1 | #38bdf8 |
| link | #0b1220 | #f2f6fb |