{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "fensi",
  "name": "Fensi",
  "family": "Glass",
  "origin": "China · mung-bean glass noodles",
  "tagline": "Liquid glass.",
  "description": "Fensi are mung-bean noodles that turn perfectly clear and glossy when cooked, slipping and bending like liquid. Fensi is a liquid-glass system: thick, clear capsules that bend the colour behind them, bright rims of light top and bottom, and shapes that flow and swell when touched.",
  "inspiration": [
    "Clear as water when cooked → thick, highly transparent glass with strong saturation behind it",
    "Glossy and round in cross-section → a bright rim of light along the top edge and a softer one along the bottom, like a lens",
    "Slippery, liquid strands → capsules and blobs that swell and flow when pressed",
    "Everything seen through it → a colourful backdrop that the glass refracts"
  ],
  "traits": {
    "mood": [
      "liquid",
      "glossy",
      "futuristic",
      "fluid",
      "premium"
    ],
    "intensity": 3,
    "contrast": "medium",
    "geometry": "thick liquid glass, pills",
    "type": "clean sans",
    "surface": "liquid glass with gliding lenses",
    "motion": "fluid, springy",
    "goodFor": [
      "consumer apps",
      "audio",
      "product launches",
      "mobile"
    ],
    "lessFor": [
      "dense admin",
      "print"
    ],
    "density": "comfortable"
  },
  "license": "LicenseRef-MIAN-1.0",
  "designLanguage": {
    "essence": "Fensi is liquid glass. The noodles become perfectly clear when cooked and slip and bend like water, so every surface is a thick, very clear piece of glass that saturates and brightens whatever is behind it. Each piece acts like a lens, a bright rim of light along its top edge, a softer one along the bottom, and shapes swell and flow under the finger instead of clicking.",
    "principles": [
      "Clear, not frosted: 22–34% surface with blur(14px) saturate(1.9): the colour behind should glow through.",
      "The lens rim: --f-lens (bright inner top edge, soft inner bottom edge, faint inner outline) on every glass object.",
      "Liquid response: hover swells (scale 1.04), press squashes (1.08 × .92) and springs back.",
      "Capsules and big radii: 999px controls, 28px panels.",
      "Needs a colourful backdrop (the page gradient) to show what it is."
    ],
    "aspects": {
      "Shape": "Capsules for controls, 28px panels, blob-like morphing spinners.",
      "Surface": "Clear glass with lens rims and a soft drop; recessed wells for inputs and tracks.",
      "Colour": "Lagoon blue primary, fuchsia accent, over an aqua–pink–mint gradient.",
      "Type": "Clean sans at 600–650.",
      "Motion": "fensi-in: from blur(6px) and scale(.9) with overshoot, 460ms; springs at cubic-bezier(.3,1.4,.4,1).",
      "Data": "Glass tubes of colour with lens rims; glowing lines (drop-shadow); a donut with a soft shadow."
    },
    "extend": [
      "background-color: var(--f-clear); backdrop-filter: var(--f-blur); box-shadow: var(--f-lens), var(--f-drop); border-radius: 999px or 28px.",
      "Interaction: transform: scale(1.04) on hover and scale(1.08, .92) on press with a spring transition (~420ms).",
      "Recessed parts (wells, tracks): inset 0 2px 6px shadow plus a bright bottom rim.",
      "Put the glass over colour; on a flat white page use the noodle’s --mn-bg-image."
    ],
    "avoid": [
      "Opaque fills",
      "Hard 1px borders",
      "Flat, instant presses",
      "Placing text directly on busy backdrops without a surface"
    ],
    "recipe": "[data-noodle=\"fensi\"] .tile {\n  padding: 14px 22px; border: 0; border-radius: 999px;\n  background: var(--f-clear); -webkit-backdrop-filter: var(--f-blur); backdrop-filter: var(--f-blur);\n  box-shadow: var(--f-lens), var(--f-drop);\n  transition: transform 420ms cubic-bezier(.3, 1.4, .4, 1);\n}\n[data-noodle=\"fensi\"] .tile:hover { transform: scale(1.04); }\n[data-noodle=\"fensi\"] .tile:active { transform: scale(1.08, .92); transition-duration: 120ms; }"
  },
  "psychology": {
    "temperature": "cool",
    "colours": [
      {
        "role": "Primary",
        "hex": "#0b6e99",
        "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": "Accent",
        "hex": "#b4391f",
        "family": "Red",
        "depth": "mid, saturated",
        "says": "Urgency, energy, appetite, danger. It raises attention faster than any other hue and reads as the most forceful.",
        "use": "One action that must be seen, sale and limited-time states, food, sport, entertainment.",
        "risk": "It is also the colour of errors. A red primary button next to a red error message makes both ambiguous, so pair a red brand with a distinct danger treatment (icon and words)."
      },
      {
        "role": "Page",
        "hex": "#eaf1f8",
        "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": "Teal and cyan against red, close to complementary: strong contrast, so the accent must stay rare.",
    "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": [
        "liquid",
        "glossy",
        "futuristic",
        "fluid",
        "premium"
      ],
      "intensity": 3,
      "dimensions": [],
      "suits": [
        "consumer apps",
        "audio",
        "product launches",
        "mobile"
      ],
      "lessFor": [
        "dense admin",
        "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/fensi",
  "markdownUrl": "https://mian.ro/ai/noodles/fensi.md",
  "stylesheet": "https://mian.ro/dist/noodles/fensi.css",
  "usage": "<html data-noodle=\"fensi\">",
  "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": "999px",
    "box": "28px",
    "badge": "999px"
  },
  "shadow": "soft",
  "density": "comfortable",
  "glass": true,
  "light": {
    "bg": "#eaf1f8",
    "surface": "#ffffff",
    "surface2": "#dde7f1",
    "fg": "#0b1524",
    "muted": "#46566b",
    "border": "#d4dfeb",
    "input": "#b8c7d8",
    "primary": "#0b6e99",
    "primaryFg": "#ffffff",
    "secondary": "#dde7f1",
    "secondaryFg": "#0b1524",
    "accent": "#b4391f",
    "accentFg": "#ffffff",
    "ring": "#0b6e99",
    "success": "#15803d",
    "successFg": "#ffffff",
    "warning": "#b45309",
    "warningFg": "#ffffff",
    "danger": "#dc2626",
    "dangerFg": "#ffffff",
    "info": "#0369a1",
    "infoFg": "#ffffff",
    "primaryText": "#0b6e99",
    "secondaryText": "#636d7a",
    "accentText": "#b4391f",
    "successText": "#14773b",
    "warningText": "#aa4f0b",
    "dangerText": "#c72426",
    "infoText": "#0369a1",
    "link": "#0b6e99"
  },
  "dark": {
    "bg": "#060b14",
    "surface": "#101826",
    "surface2": "#1a2436",
    "fg": "#eaf2fb",
    "muted": "#94a4ba",
    "border": "#263349",
    "input": "#3a4a64",
    "primary": "#5ccfff",
    "primaryFg": "#03202e",
    "secondary": "#1a2436",
    "secondaryFg": "#eaf2fb",
    "accent": "#ffa98c",
    "accentFg": "#2e0a02",
    "ring": "#5ccfff",
    "success": "#4ade80",
    "successFg": "#052e16",
    "warning": "#fbbf24",
    "warningFg": "#1f1300",
    "danger": "#f87171",
    "dangerFg": "#210505",
    "info": "#38bdf8",
    "infoFg": "#03202d",
    "primaryText": "#5ccfff",
    "secondaryText": "#7a8391",
    "accentText": "#ffa98c",
    "successText": "#4ade80",
    "warningText": "#fbbf24",
    "dangerText": "#f87171",
    "infoText": "#38bdf8",
    "link": "#5ccfff"
  },
  "css": "[data-noodle=\"fensi\"] {\n  --mn-bg: light-dark(#eaf1f8, #060b14);\n  --mn-surface: light-dark(#ffffff, #101826);\n  --mn-surface-2: light-dark(#dde7f1, #1a2436);\n  --mn-fg: light-dark(#0b1524, #eaf2fb);\n  --mn-muted: light-dark(#46566b, #94a4ba);\n  --mn-border: light-dark(#d4dfeb, #263349);\n  --mn-input: light-dark(#b8c7d8, #3a4a64);\n  --mn-primary: light-dark(#0b6e99, #5ccfff);\n  --mn-primary-fg: light-dark(#ffffff, #03202e);\n  --mn-secondary: light-dark(#dde7f1, #1a2436);\n  --mn-secondary-fg: light-dark(#0b1524, #eaf2fb);\n  --mn-accent: light-dark(#b4391f, #ffa98c);\n  --mn-accent-fg: light-dark(#ffffff, #2e0a02);\n  --mn-ring: light-dark(#0b6e99, #5ccfff);\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(#0b6e99, #5ccfff);\n  --mn-secondary-text: light-dark(#636d7a, #7a8391);\n  --mn-accent-text: light-dark(#b4391f, #ffa98c);\n  --mn-success-text: light-dark(#14773b, #4ade80);\n  --mn-warning-text: light-dark(#aa4f0b, #fbbf24);\n  --mn-danger-text: light-dark(#c72426, #f87171);\n  --mn-info-text: light-dark(#0369a1, #38bdf8);\n  --mn-link: light-dark(#0b6e99, #5ccfff);\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: 999px;\n  --mn-radius-box: 28px;\n  --mn-radius-badge: 999px;\n  --mn-shadow-sm: 0 1px 3px rgb(0 0 0 / .08);\n  --mn-shadow-md: 0 4px 14px -4px rgb(0 0 0 / .12), 0 2px 4px -2px rgb(0 0 0 / .06);\n  --mn-shadow-lg: 0 20px 48px -12px rgb(0 0 0 / .25), 0 8px 16px -8px rgb(0 0 0 / .10);\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(700px 500px at 0% 0%, light-dark(#b7e3ff, #06395a) 0%, transparent 60%), radial-gradient(600px 500px at 100% 20%, light-dark(#ffdcc4, #56270f) 0%, transparent 60%), radial-gradient(700px 500px at 50% 110%, light-dark(#c5f7e1, #07423a) 0%, transparent 60%);\n}\n"
}