{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "liangfen",
  "name": "Liangfen",
  "family": "Glass",
  "origin": "China · mung-bean jelly",
  "tagline": "Thick glass bricks. Cool, chunky, clear.",
  "description": "Liangfen is mung-bean jelly cut into thick, translucent strips and served cold with chilli oil and black vinegar. Liangfen is a glass-brick system: translucent blocks with visible thickness, a tinted glass edge below and to the side, that press down into the page when clicked, with a chilli-red accent.",
  "inspiration": [
    "Thick, translucent strips → glass blocks with a visible, tinted thickness on their lower edge",
    "Firm jelly → presses sink the block into its own thickness",
    "Chilli oil and black vinegar → chilli-red primary, vinegar-brown accent",
    "Served cold → a cool jade-tinted page under the glass"
  ],
  "traits": {
    "mood": [
      "chunky",
      "glass",
      "cool",
      "solid",
      "bold"
    ],
    "intensity": 3,
    "contrast": "medium",
    "geometry": "thick glass bricks",
    "type": "sans, heavy",
    "surface": "translucent bricks",
    "motion": "solid",
    "goodFor": [
      "consumer apps",
      "games",
      "food"
    ],
    "lessFor": [
      "quiet luxury"
    ],
    "density": "default"
  },
  "license": "LicenseRef-MIAN-1.0",
  "designLanguage": {
    "essence": "Liangfen is glass bricks. Mung-bean jelly is cut into thick, translucent strips, so every surface is a translucent block with a visible, tinted thickness along its lower edge and a bright top face; selections are raised bricks in a sunken slot, and presses sink a block into its own thickness. It is cool and jade-tinted underneath, with a chilli-red accent.",
    "principles": [
      "Thickness: every raised block shows a 4–6px tinted glass edge below (--lf-tint), plus a bright top face (--lf-face).",
      "Presses sink: translateY(3px) while the edge shrinks to 1px.",
      "Slots and bricks: containers are sunken (inset tint); the chosen item is a raised white brick.",
      "Cool jade page, chilli-red primary, vinegar-brown accent."
    ],
    "aspects": {
      "Shape": "8px fields, 14px surfaces, 8px badges; brick-shaped knobs.",
      "Surface": "Translucent glass (66%) with a tinted lower edge and a soft drop.",
      "Colour": "Chilli red, vinegar brown, jade neutrals.",
      "Type": "Sans at 650–700.",
      "Motion": "liangfen-in: drops in with a 1px settle (300ms); a tumbling jelly-cube spinner.",
      "Data": "Glass-brick columns with a side thickness."
    },
    "extend": [
      "Raised: background-color: var(--lf-glass); box-shadow: var(--lf-face), 0 4px 0 var(--lf-tint).",
      "Pressed: transform: translateY(3px); box-shadow: var(--lf-face), 0 1px 0 var(--lf-tint).",
      "Sunken containers: box-shadow: inset 0 3px 0 var(--lf-tint)."
    ],
    "avoid": [
      "Flat, thickness-free panels",
      "Hairline-only styling",
      "Warm heavy shadows"
    ],
    "recipe": "[data-noodle=\"liangfen\"] .tile {\n  padding: 14px 16px; border: 0; border-radius: 14px; background-color: var(--lf-glass);\n  -webkit-backdrop-filter: var(--lf-blur); backdrop-filter: var(--lf-blur);\n  box-shadow: var(--lf-face), 0 4px 0 var(--lf-tint); transition: transform 120ms, box-shadow 120ms;\n}\n[data-noodle=\"liangfen\"] .tile:active { transform: translateY(3px); box-shadow: var(--lf-face), 0 1px 0 var(--lf-tint); }"
  },
  "psychology": {
    "temperature": "neutral",
    "colours": [
      {
        "role": "Primary",
        "hex": "#b42318",
        "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": "Accent",
        "hex": "#4a3322",
        "family": "Brown and terracotta",
        "depth": "deep",
        "says": "Earth, craft, reliability, age. Feels made by hand and unhurried.",
        "use": "Food, coffee, leather, ceramics, heritage brands, anything artisanal.",
        "risk": "Looks dull on screens unless the neutrals around it are warm too."
      },
      {
        "role": "Page",
        "hex": "#e9f1eb",
        "family": "Green",
        "depth": "pale, muted",
        "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."
      }
    ],
    "relation": "Red with its neighbour brown and terracotta: an analogous pair, harmonious and natural.",
    "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": 700,
      "summary": "One voice throughout: neutral sans. Headings are semibold, which reads as confident without shouting."
    },
    "personality": {
      "reads": [
        "chunky",
        "glass",
        "cool",
        "solid",
        "bold"
      ],
      "intensity": 3,
      "dimensions": [],
      "suits": [
        "consumer apps",
        "games",
        "food"
      ],
      "lessFor": [
        "quiet luxury"
      ],
      "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/liangfen",
  "markdownUrl": "https://mian.ro/ai/noodles/liangfen.md",
  "stylesheet": "https://mian.ro/dist/noodles/liangfen.css",
  "usage": "<html data-noodle=\"liangfen\">",
  "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": 700,
  "radius": {
    "field": "8px",
    "box": "14px",
    "badge": "8px"
  },
  "shadow": "soft",
  "density": "default",
  "glass": true,
  "light": {
    "bg": "#e9f1eb",
    "surface": "#ffffff",
    "surface2": "#dde8e0",
    "fg": "#101a13",
    "muted": "#4b5d51",
    "border": "#cfdcd2",
    "input": "#a4b7a9",
    "primary": "#b42318",
    "primaryFg": "#ffffff",
    "secondary": "#dde8e0",
    "secondaryFg": "#101a13",
    "accent": "#4a3322",
    "accentFg": "#ffffff",
    "ring": "#b42318",
    "success": "#15803d",
    "successFg": "#ffffff",
    "warning": "#b45309",
    "warningFg": "#ffffff",
    "danger": "#dc2626",
    "dangerFg": "#ffffff",
    "info": "#0369a1",
    "infoFg": "#ffffff",
    "primaryText": "#b42318",
    "secondaryText": "#626c65",
    "accentText": "#4a3322",
    "successText": "#15783a",
    "warningText": "#a74e0a",
    "dangerText": "#c82524",
    "infoText": "#0369a1",
    "link": "#b42318"
  },
  "dark": {
    "bg": "#08100b",
    "surface": "#0f1a13",
    "surface2": "#17241b",
    "fg": "#e8f2eb",
    "muted": "#93a89a",
    "border": "#223328",
    "input": "#3d5344",
    "primary": "#ff8a7a",
    "primaryFg": "#2a0505",
    "secondary": "#17241b",
    "secondaryFg": "#e8f2eb",
    "accent": "#d6b79c",
    "accentFg": "#1c1109",
    "ring": "#ff8a7a",
    "success": "#4ade80",
    "successFg": "#052e16",
    "warning": "#fbbf24",
    "warningFg": "#1f1300",
    "danger": "#f87171",
    "dangerFg": "#210505",
    "info": "#38bdf8",
    "infoFg": "#03202d",
    "primaryText": "#ff8a7a",
    "secondaryText": "#7b877f",
    "accentText": "#d6b79c",
    "successText": "#4ade80",
    "warningText": "#fbbf24",
    "dangerText": "#f87171",
    "infoText": "#38bdf8",
    "link": "#ff8a7a"
  },
  "css": "[data-noodle=\"liangfen\"] {\n  --mn-bg: light-dark(#e9f1eb, #08100b);\n  --mn-surface: light-dark(#ffffff, #0f1a13);\n  --mn-surface-2: light-dark(#dde8e0, #17241b);\n  --mn-fg: light-dark(#101a13, #e8f2eb);\n  --mn-muted: light-dark(#4b5d51, #93a89a);\n  --mn-border: light-dark(#cfdcd2, #223328);\n  --mn-input: light-dark(#a4b7a9, #3d5344);\n  --mn-primary: light-dark(#b42318, #ff8a7a);\n  --mn-primary-fg: light-dark(#ffffff, #2a0505);\n  --mn-secondary: light-dark(#dde8e0, #17241b);\n  --mn-secondary-fg: light-dark(#101a13, #e8f2eb);\n  --mn-accent: light-dark(#4a3322, #d6b79c);\n  --mn-accent-fg: light-dark(#ffffff, #1c1109);\n  --mn-ring: light-dark(#b42318, #ff8a7a);\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(#b42318, #ff8a7a);\n  --mn-secondary-text: light-dark(#626c65, #7b877f);\n  --mn-accent-text: light-dark(#4a3322, #d6b79c);\n  --mn-success-text: light-dark(#15783a, #4ade80);\n  --mn-warning-text: light-dark(#a74e0a, #fbbf24);\n  --mn-danger-text: light-dark(#c82524, #f87171);\n  --mn-info-text: light-dark(#0369a1, #38bdf8);\n  --mn-link: light-dark(#b42318, #ff8a7a);\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: 700;\n  --mn-radius-field: 8px;\n  --mn-radius-box: 14px;\n  --mn-radius-badge: 8px;\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: 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: radial-gradient(800px 500px at 0% 0%, light-dark(#d6e9da, #0f2416) 0%, transparent 60%), radial-gradient(700px 500px at 100% 100%, light-dark(#e3ecdf, #141f10) 0%, transparent 60%);\n}\n"
}