{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "sotanghon",
  "name": "Sotanghon",
  "family": "Glass",
  "origin": "Philippines · glass noodles",
  "tagline": "Real transparency. You see what is behind.",
  "description": "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.",
  "inspiration": [
    "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"
  ],
  "traits": {
    "mood": [
      "glass",
      "transparent",
      "airy",
      "premium",
      "modern",
      "light",
      "futuristic"
    ],
    "intensity": 3,
    "contrast": "medium",
    "geometry": "large radius panes, rim of light",
    "type": "system sans",
    "surface": "truly transparent glass over a soft colour backdrop",
    "motion": "smooth, sharpens from blur",
    "goodFor": [
      "consumer apps",
      "media apps",
      "product launches",
      "weather",
      "music",
      "portfolios",
      "operating-system style interfaces"
    ],
    "lessFor": [
      "dense admin",
      "financial data",
      "print",
      "long-form reading"
    ],
    "density": "comfortable"
  },
  "license": "LicenseRef-MIAN-1.0",
  "designLanguage": {
    "essence": "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."
    ],
    "aspects": {
      "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."
    },
    "extend": [
      "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": "[data-noodle=\"sotanghon\"] .tile {\n  padding: 18px; border: 0; border-radius: 24px;\n  background: color-mix(in srgb, var(--mn-surface) 34%, transparent); color: var(--mn-fg);\n  -webkit-backdrop-filter: blur(22px) saturate(1.7); backdrop-filter: blur(22px) saturate(1.7);\n  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));\n  transition: background-color 200ms cubic-bezier(.16, 1, .3, 1);\n}\n[data-noodle=\"sotanghon\"] .tile:hover { background: color-mix(in srgb, var(--mn-surface) 68%, transparent); }\n[data-noodle=\"sotanghon\"] .tile[aria-selected=\"true\"] { background: var(--mn-fg); color: var(--mn-bg); }"
  },
  "psychology": {
    "temperature": "cool",
    "colours": [
      {
        "role": "Primary",
        "hex": "#0b1220",
        "family": "Blue",
        "depth": "deep",
        "says": "Trust, competence, calm, distance. The world’s most-liked colour and the default of banks, software and social networks.",
        "use": "Finance, enterprise, health, anything that must feel safe. Links are expected to be blue.",
        "risk": "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."
      },
      {
        "role": "Accent",
        "hex": "#0e7490",
        "family": "Teal and cyan",
        "depth": "mid, saturated",
        "says": "Clarity, cleanliness, calm technology. Cooler than green, softer than blue.",
        "use": "Health tech, wellness, productivity tools, water and travel.",
        "risk": "Very common in medical and SaaS products, so it needs a distinctive neutral or typeface to be remembered."
      },
      {
        "role": "Page",
        "hex": "#e9eef5",
        "family": "Blue",
        "depth": "pale",
        "says": "Trust, competence, calm, distance. The world’s most-liked colour and the default of banks, software and social networks.",
        "use": "Finance, enterprise, health, anything that must feel safe. Links are expected to be blue.",
        "risk": "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."
      }
    ],
    "relation": "Blue with its neighbour teal and cyan: an analogous pair, harmonious and natural.",
    "type": {
      "body": {
        "class": "system",
        "name": "System sans (the device’s own typeface)",
        "says": "Native, familiar, efficient. It disappears, which is the point: the product feels like part of the device.",
        "use": "Applications, dashboards, anything used daily.",
        "risk": "Carries no brand character at all. The brand must come from colour, shape, words and motion."
      },
      "heading": {
        "class": "system",
        "name": "System sans (the device’s own typeface)",
        "says": "Native, familiar, efficient. It disappears, which is the point: the product feels like part of the device.",
        "use": "Applications, dashboards, anything used daily.",
        "risk": "Carries no brand character at all. The brand must come from colour, shape, words and motion."
      },
      "weight": 650,
      "summary": "One voice throughout: system sans (the device’s own typeface). Headings are semibold, which reads as confident without shouting."
    },
    "personality": {
      "reads": [
        "glass",
        "transparent",
        "airy",
        "premium",
        "modern"
      ],
      "intensity": 3,
      "dimensions": [],
      "suits": [
        "consumer apps",
        "media apps",
        "product launches",
        "weather",
        "music"
      ],
      "lessFor": [
        "dense admin",
        "financial data",
        "print"
      ],
      "tone": "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."
  },
  "url": "https://mian.ro/noodles/sotanghon",
  "markdownUrl": "https://mian.ro/ai/noodles/sotanghon.md",
  "stylesheet": "https://mian.ro/dist/noodles/sotanghon.css",
  "usage": "<html data-noodle=\"sotanghon\">",
  "fonts": {
    "sans": "-apple-system, BlinkMacSystemFont, \"SF Pro Text\", \"SF Pro Display\", system-ui, \"Segoe UI Variable Text\", \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
    "heading": "-apple-system, BlinkMacSystemFont, \"SF Pro Text\", \"SF Pro Display\", system-ui, \"Segoe UI Variable Text\", \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
    "mono": "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace"
  },
  "headingWeight": 650,
  "radius": {
    "field": "14px",
    "box": "24px",
    "badge": "999px"
  },
  "shadow": "none",
  "density": "comfortable",
  "glass": true,
  "light": {
    "bg": "#e9eef5",
    "surface": "#ffffff",
    "surface2": "#dfe6ee",
    "fg": "#0b1220",
    "muted": "#3d4858",
    "border": "#d5dde7",
    "input": "#b3bfcd",
    "primary": "#0b1220",
    "primaryFg": "#ffffff",
    "secondary": "#dfe6ee",
    "secondaryFg": "#0b1220",
    "accent": "#0e7490",
    "accentFg": "#ffffff",
    "ring": "#0e7490",
    "success": "#15803d",
    "successFg": "#ffffff",
    "warning": "#b45309",
    "warningFg": "#ffffff",
    "danger": "#dc2626",
    "dangerFg": "#ffffff",
    "info": "#0369a1",
    "infoFg": "#ffffff",
    "primaryText": "#0b1220",
    "secondaryText": "#646b77",
    "accentText": "#0e728e",
    "successText": "#14793b",
    "warningText": "#aa4f0a",
    "dangerText": "#c72425",
    "infoText": "#0369a1",
    "link": "#0b1220"
  },
  "dark": {
    "bg": "#05070c",
    "surface": "#0f141c",
    "surface2": "#19202b",
    "fg": "#eef3f9",
    "muted": "#a3afc0",
    "border": "#252e3b",
    "input": "#3b4658",
    "primary": "#f2f6fb",
    "primaryFg": "#0b1220",
    "secondary": "#19202b",
    "secondaryFg": "#eef3f9",
    "accent": "#67d7ee",
    "accentFg": "#03222b",
    "ring": "#67d7ee",
    "success": "#4ade80",
    "successFg": "#052e16",
    "warning": "#fbbf24",
    "warningFg": "#1f1300",
    "danger": "#f87171",
    "dangerFg": "#210505",
    "info": "#38bdf8",
    "infoFg": "#03202d",
    "primaryText": "#f2f6fb",
    "secondaryText": "#7b818a",
    "accentText": "#67d7ee",
    "successText": "#4ade80",
    "warningText": "#fbbf24",
    "dangerText": "#f87171",
    "infoText": "#38bdf8",
    "link": "#f2f6fb"
  },
  "css": "[data-noodle=\"sotanghon\"] {\n  --mn-bg: light-dark(#e9eef5, #05070c);\n  --mn-surface: light-dark(#ffffff, #0f141c);\n  --mn-surface-2: light-dark(#dfe6ee, #19202b);\n  --mn-fg: light-dark(#0b1220, #eef3f9);\n  --mn-muted: light-dark(#3d4858, #a3afc0);\n  --mn-border: light-dark(#d5dde7, #252e3b);\n  --mn-input: light-dark(#b3bfcd, #3b4658);\n  --mn-primary: light-dark(#0b1220, #f2f6fb);\n  --mn-primary-fg: light-dark(#ffffff, #0b1220);\n  --mn-secondary: light-dark(#dfe6ee, #19202b);\n  --mn-secondary-fg: light-dark(#0b1220, #eef3f9);\n  --mn-accent: light-dark(#0e7490, #67d7ee);\n  --mn-accent-fg: light-dark(#ffffff, #03222b);\n  --mn-ring: light-dark(#0e7490, #67d7ee);\n  --mn-success: light-dark(#15803d, #4ade80);\n  --mn-success-fg: light-dark(#ffffff, #052e16);\n  --mn-warning: light-dark(#b45309, #fbbf24);\n  --mn-warning-fg: light-dark(#ffffff, #1f1300);\n  --mn-danger: light-dark(#dc2626, #f87171);\n  --mn-danger-fg: light-dark(#ffffff, #210505);\n  --mn-info: light-dark(#0369a1, #38bdf8);\n  --mn-info-fg: light-dark(#ffffff, #03202d);\n  --mn-primary-text: light-dark(#0b1220, #f2f6fb);\n  --mn-secondary-text: light-dark(#646b77, #7b818a);\n  --mn-accent-text: light-dark(#0e728e, #67d7ee);\n  --mn-success-text: light-dark(#14793b, #4ade80);\n  --mn-warning-text: light-dark(#aa4f0a, #fbbf24);\n  --mn-danger-text: light-dark(#c72425, #f87171);\n  --mn-info-text: light-dark(#0369a1, #38bdf8);\n  --mn-link: light-dark(#0b1220, #f2f6fb);\n  --mn-font: -apple-system, BlinkMacSystemFont, \"SF Pro Text\", \"SF Pro Display\", system-ui, \"Segoe UI Variable Text\", \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n  --mn-font-heading: -apple-system, BlinkMacSystemFont, \"SF Pro Text\", \"SF Pro Display\", system-ui, \"Segoe UI Variable Text\", \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n  --mn-font-mono: ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace;\n  --mn-heading-weight: 650;\n  --mn-radius-field: 14px;\n  --mn-radius-box: 24px;\n  --mn-radius-badge: 999px;\n  --mn-shadow-sm: none;\n  --mn-shadow-md: none;\n  --mn-shadow-lg: none;\n  --mn-size-xs: 28px;\n  --mn-size-sm: 34px;\n  --mn-size-md: 42px;\n  --mn-size-lg: 50px;\n  --mn-text-sm: 15px;\n  --mn-surface-alpha: 72%;\n  --mn-backdrop: blur(18px) saturate(1.4);\n  --mn-bg-image: radial-gradient(900px 600px at 0% 0%, light-dark(#b9e0ff, #0c3d63) 0%, transparent 62%), radial-gradient(800px 600px at 100% 8%, light-dark(#ffd6bd, #5c2b12) 0%, transparent 60%), radial-gradient(900px 700px at 55% 112%, light-dark(#c3f0da, #0b4638) 0%, transparent 62%);\n}\n"
}