{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "woonsen",
  "name": "Woonsen",
  "family": "Glass",
  "origin": "Thailand · glass noodles",
  "tagline": "Crystal clear, a prism at the edge.",
  "description": "Woonsen are Thai glass noodles, crystal clear in a bright salad of lime, chilli and herbs. Woonsen is a crystal system: clear glass with faceted, bevelled edges that split light into a thin prism of colour, and small sparkles of motion.",
  "inspiration": [
    "Crystal clear → clear, lightly frosted glass on a bright white page",
    "Light through glass → a thin iridescent prism along edges and focus rings",
    "Cut glass facets → bevelled edges: a light edge on top-left, a dark edge on bottom-right",
    "Lime and chilli → a bright, zesty accent; a quick sparkle when things appear"
  ],
  "traits": {
    "mood": [
      "crystal",
      "bright",
      "faceted",
      "fresh",
      "sparkling"
    ],
    "intensity": 3,
    "contrast": "medium",
    "geometry": "bevelled facets",
    "type": "sans",
    "surface": "crystal glass with prism edges",
    "motion": "glint",
    "goodFor": [
      "jewellery",
      "beauty",
      "launches",
      "drinks"
    ],
    "lessFor": [
      "dense admin"
    ],
    "density": "default"
  },
  "license": "LicenseRef-MIAN-1.0",
  "designLanguage": {
    "essence": "Woonsen is cut crystal. Thai glass noodles are crystal clear in a bright salad, so the interface is clear, lightly frosted glass with bevelled edges, a light facet top-left, a darker one bottom-right, and a thin prism of colour where light splits along borders, focus rings and the current tab. Things arrive with a quick sparkle.",
    "principles": [
      "The prism edge: a 1px conic rainbow border (padding-box glass over a border-box --w-prism).",
      "Bevels, not shadows: --w-bevel gives every raised thing cut facets.",
      "Clear and bright: 60–90% glass over a pale prismatic wash.",
      "A glint sweeps across buttons on hover; entrances sparkle (brightness → normal)."
    ],
    "aspects": {
      "Shape": "10px fields, 16px panels, pill badges.",
      "Surface": "Clear frosted glass with a prism edge, bevels and a light lift.",
      "Colour": "Violet primary, lime accent; the prism (pink, gold, lime, cyan, lilac) only at edges.",
      "Type": "Clean sans at 600–650.",
      "Motion": "woonsen-in: from brightness(1.6) desaturated to normal, 300ms; woonsen-glint on hover.",
      "Data": "Cut-glass bars with a facet highlight; a turning prism-ring spinner."
    },
    "extend": [
      "border: 1px solid transparent; background: linear-gradient(var(--w-glass), var(--w-glass)) padding-box, var(--w-prism) border-box.",
      "Add box-shadow: var(--w-bevel), var(--w-lift).",
      "Use the prism only on edges and indicators, never fill an area with it."
    ],
    "avoid": [
      "Rainbow fills",
      "Dark smoky tints",
      "Soft blurred-only edges"
    ],
    "recipe": "[data-noodle=\"woonsen\"] .tile {\n  padding: 14px 16px; border: 1px solid transparent; border-radius: 16px;\n  background: linear-gradient(var(--w-glass), var(--w-glass)) padding-box, var(--w-prism) border-box;\n  -webkit-backdrop-filter: blur(12px) saturate(1.5); backdrop-filter: blur(12px) saturate(1.5);\n  box-shadow: var(--w-bevel), var(--w-lift);\n}"
  },
  "psychology": {
    "temperature": "cool",
    "colours": [
      {
        "role": "Primary",
        "hex": "#111827",
        "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": "#3f6212",
        "family": "Green",
        "depth": "deep",
        "says": "Growth, health, permission, money. The easiest colour to look at for a long time.",
        "use": "Finance, health, food, sustainability, and “go” or success states.",
        "risk": "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."
      },
      {
        "role": "Page",
        "hex": "#f5f7fb",
        "family": "White and paper",
        "depth": "pale",
        "says": "Space, honesty, simplicity. Warm whites feel human, cool whites feel clinical.",
        "use": "Almost everything. The page colour sets the temperature of the whole brand.",
        "risk": "Empty is not the same as calm: white space needs a grid behind it."
      }
    ],
    "relation": "Blue with green: a contrasting pair that needs one of the two to dominate.",
    "type": {
      "body": {
        "class": "neutral",
        "name": "Neutral sans",
        "says": "Clear, modern, impartial. The voice of software and signage.",
        "use": "Interfaces, documentation, most product marketing.",
        "risk": "The same few neutral sans typefaces set every generated page. Without a distinct weight, size or pairing it reads as a template."
      },
      "heading": {
        "class": "neutral",
        "name": "Neutral sans",
        "says": "Clear, modern, impartial. The voice of software and signage.",
        "use": "Interfaces, documentation, most product marketing.",
        "risk": "The same few neutral sans typefaces set every generated page. Without a distinct weight, size or pairing it reads as a template."
      },
      "weight": 650,
      "summary": "One voice throughout: neutral sans. Headings are semibold, which reads as confident without shouting."
    },
    "personality": {
      "reads": [
        "crystal",
        "bright",
        "faceted",
        "fresh",
        "sparkling"
      ],
      "intensity": 3,
      "dimensions": [],
      "suits": [
        "jewellery",
        "beauty",
        "launches",
        "drinks"
      ],
      "lessFor": [
        "dense admin"
      ],
      "tone": "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."
  },
  "url": "https://mian.ro/noodles/woonsen",
  "markdownUrl": "https://mian.ro/ai/noodles/woonsen.md",
  "stylesheet": "https://mian.ro/dist/noodles/woonsen.css",
  "usage": "<html data-noodle=\"woonsen\">",
  "fonts": {
    "sans": "ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
    "heading": "ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
    "mono": "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace"
  },
  "headingWeight": 650,
  "radius": {
    "field": "10px",
    "box": "16px",
    "badge": "999px"
  },
  "shadow": "subtle",
  "density": "default",
  "glass": true,
  "light": {
    "bg": "#f5f7fb",
    "surface": "#ffffff",
    "surface2": "#eceff6",
    "fg": "#111827",
    "muted": "#4b5563",
    "border": "#dfe3ec",
    "input": "#c3c9d6",
    "primary": "#111827",
    "primaryFg": "#ffffff",
    "secondary": "#eceff6",
    "secondaryFg": "#111827",
    "accent": "#3f6212",
    "accentFg": "#ffffff",
    "ring": "#111827",
    "success": "#15803d",
    "successFg": "#ffffff",
    "warning": "#b45309",
    "warningFg": "#ffffff",
    "danger": "#dc2626",
    "dangerFg": "#ffffff",
    "info": "#0369a1",
    "infoFg": "#ffffff",
    "primaryText": "#111827",
    "secondaryText": "#696e7a",
    "accentText": "#3f6212",
    "successText": "#15783b",
    "warningText": "#aa4f0b",
    "dangerText": "#c82526",
    "infoText": "#0369a1",
    "link": "#111827"
  },
  "dark": {
    "bg": "#07080d",
    "surface": "#11131c",
    "surface2": "#1a1d29",
    "fg": "#eef1f8",
    "muted": "#9aa3b5",
    "border": "#272b3a",
    "input": "#3b4154",
    "primary": "#eef1f8",
    "primaryFg": "#111827",
    "secondary": "#1a1d29",
    "secondaryFg": "#eef1f8",
    "accent": "#bef264",
    "accentFg": "#1a2e05",
    "ring": "#eef1f8",
    "success": "#4ade80",
    "successFg": "#052e16",
    "warning": "#fbbf24",
    "warningFg": "#1f1300",
    "danger": "#f87171",
    "dangerFg": "#210505",
    "info": "#38bdf8",
    "infoFg": "#03202d",
    "primaryText": "#eef1f8",
    "secondaryText": "#7c7f88",
    "accentText": "#bef264",
    "successText": "#4ade80",
    "warningText": "#fbbf24",
    "dangerText": "#f87171",
    "infoText": "#38bdf8",
    "link": "#eef1f8"
  },
  "css": "[data-noodle=\"woonsen\"] {\n  --mn-bg: light-dark(#f5f7fb, #07080d);\n  --mn-surface: light-dark(#ffffff, #11131c);\n  --mn-surface-2: light-dark(#eceff6, #1a1d29);\n  --mn-fg: light-dark(#111827, #eef1f8);\n  --mn-muted: light-dark(#4b5563, #9aa3b5);\n  --mn-border: light-dark(#dfe3ec, #272b3a);\n  --mn-input: light-dark(#c3c9d6, #3b4154);\n  --mn-primary: light-dark(#111827, #eef1f8);\n  --mn-primary-fg: light-dark(#ffffff, #111827);\n  --mn-secondary: light-dark(#eceff6, #1a1d29);\n  --mn-secondary-fg: light-dark(#111827, #eef1f8);\n  --mn-accent: light-dark(#3f6212, #bef264);\n  --mn-accent-fg: light-dark(#ffffff, #1a2e05);\n  --mn-ring: light-dark(#111827, #eef1f8);\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(#111827, #eef1f8);\n  --mn-secondary-text: light-dark(#696e7a, #7c7f88);\n  --mn-accent-text: light-dark(#3f6212, #bef264);\n  --mn-success-text: light-dark(#15783b, #4ade80);\n  --mn-warning-text: light-dark(#aa4f0b, #fbbf24);\n  --mn-danger-text: light-dark(#c82526, #f87171);\n  --mn-info-text: light-dark(#0369a1, #38bdf8);\n  --mn-link: light-dark(#111827, #eef1f8);\n  --mn-font: ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n  --mn-font-heading: ui-sans-serif, system-ui, -apple-system, \"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: 10px;\n  --mn-radius-box: 16px;\n  --mn-radius-badge: 999px;\n  --mn-shadow-sm: 0 1px 2px rgb(0 0 0 / .05);\n  --mn-shadow-md: 0 2px 6px -1px rgb(0 0 0 / .08), 0 1px 2px rgb(0 0 0 / .04);\n  --mn-shadow-lg: 0 12px 32px -8px rgb(0 0 0 / .18), 0 4px 8px -4px rgb(0 0 0 / .08);\n  --mn-size-xs: 26px;\n  --mn-size-sm: 32px;\n  --mn-size-md: 38px;\n  --mn-size-lg: 46px;\n  --mn-text-sm: 14px;\n  --mn-surface-alpha: 72%;\n  --mn-backdrop: blur(18px) saturate(1.4);\n  --mn-bg-image: linear-gradient(135deg, light-dark(#f4f8fb, #070b10) 0%, light-dark(#f5f7fb, #07080d) 45%, light-dark(#f3fbef, #08110a) 100%);\n}\n"
}