{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "biangbiang",
  "name": "Biangbiang",
  "family": "Bold",
  "origin": "China · Shaanxi",
  "tagline": "Belt-wide, slapped, loud.",
  "description": "Biangbiang noodles are hand-pulled into belts as wide as a hand and slapped against the counter as they are stretched, the sound gives them their name, written with one of the most complicated characters in Chinese. Biangbiang is a heavyweight system: belt-wide blocks, very heavy type, thick borders, flat colour and a slap of motion.",
  "inspiration": [
    "Belts as wide as a hand → wide, flat, blocky controls and full-width colour bands",
    "One of the most complicated characters → the heaviest type in MIAN (900), set tight and large",
    "Slapped on the counter → things land with a quick impact and a small rebound",
    "Chilli oil poured hot over the top → chilli orange on black and cream"
  ],
  "traits": {
    "mood": [
      "loud",
      "brutal",
      "energetic",
      "unusual",
      "raw",
      "expressive"
    ],
    "intensity": 5,
    "contrast": "high",
    "geometry": "thick outlines, hard offset shadows",
    "type": "heavy display",
    "surface": "belt-wide bands, thick ink",
    "motion": "slapped, bouncy",
    "goodFor": [
      "creative agencies",
      "festivals",
      "events",
      "youth brands",
      "indie products"
    ],
    "lessFor": [
      "finance",
      "legal",
      "healthcare",
      "dense admin"
    ],
    "density": "comfortable"
  },
  "license": "LicenseRef-MIAN-1.0",
  "designLanguage": {
    "essence": "Biangbiang is loud and wide. The noodles are hand-wide belts slapped on the counter, named after the sound and written with one of the most complicated characters there is. The interface uses the heaviest type in MIAN, belt-wide blocks with 3px ink borders, full-width colour bands across card tops, flat colour with no shadows at all, and a slap of motion: things land with an impact and a small rebound.",
    "principles": [
      "Weight: 900 headings, uppercase 900 buttons, labels and tabs.",
      "Belts: wide padding, full-width colour bands, 8px tab underlines.",
      "3px ink borders on everything (--mn-border-w: 3px).",
      "Flat: no shadows, no gradients, only ink, cream and chilli orange.",
      "Slap: land from above with a squash and a rebound (biangbiang-in)."
    ],
    "aspects": {
      "Shape": "4px fields, 6px panels, 3px badges; blocky switch and slider.",
      "Surface": "Cream with 3px ink edges; card headers are solid chilli bands.",
      "Colour": "Chilli orange primary with black text, scallion green accent, ink and cream.",
      "Type": "Sans at 900, tight (−0.05em) and large.",
      "Motion": "biangbiang-in: −14px drop, squash, rebound, 300ms.",
      "Data": "Fat flat bars with an ink edge, a very thick donut."
    },
    "extend": [
      "border: 3px solid var(--mn-fg); border-radius: 4–6px; no box-shadow.",
      "Make it wide and loud: uppercase 900 text, generous horizontal padding.",
      "Selected = solid primary band with an ink edge."
    ],
    "avoid": [
      "Shadows and gradients",
      "Thin lines or light weights",
      "Subtle hover states"
    ],
    "recipe": "[data-noodle=\"biangbiang\"] .tile {\n  padding: 14px 20px; border: 3px solid var(--mn-fg); border-radius: 6px; background: var(--mn-surface);\n  font-weight: 900; text-transform: uppercase; letter-spacing: .02em;\n}\n[data-noodle=\"biangbiang\"] .tile[aria-selected=\"true\"] { background: var(--mn-primary); color: var(--mn-primary-fg); }\n[data-noodle=\"biangbiang\"] .tile:active { transform: scaleY(.9); }"
  },
  "psychology": {
    "temperature": "warm",
    "colours": [
      {
        "role": "Primary",
        "hex": "#ea580c",
        "family": "Orange",
        "depth": "mid, saturated",
        "says": "Warmth, friendliness, appetite, affordability. Active like red, without the alarm.",
        "use": "Consumer products, food, community, calls to action on a neutral page.",
        "risk": "Can read as cheap when saturated across large areas; text on orange rarely passes contrast, so use it for fills with dark text or for accents."
      },
      {
        "role": "Accent",
        "hex": "#166534",
        "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": "#fff7ed",
        "family": "White and paper",
        "depth": "pale, saturated",
        "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": "Orange 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": 900,
      "summary": "One voice throughout: neutral sans. Headings are heavy, which reads as loud and direct."
    },
    "personality": {
      "reads": [
        "loud",
        "brutal",
        "energetic",
        "unusual",
        "raw"
      ],
      "intensity": 5,
      "dimensions": [
        "Excitement"
      ],
      "suits": [
        "creative agencies",
        "festivals",
        "events",
        "youth brands",
        "indie products"
      ],
      "lessFor": [
        "finance",
        "legal",
        "healthcare"
      ],
      "tone": "Loud. Imperatives, one- and two-word lines, contrast in everything. Use it only if the product can keep the promise."
    },
    "logo": "A simple geometric mark with slightly softened corners fits; avoid both hard spikes and full circles. Use a heavy wordmark; a thin one would vanish beside these headings."
  },
  "url": "https://mian.ro/noodles/biangbiang",
  "markdownUrl": "https://mian.ro/ai/noodles/biangbiang.md",
  "stylesheet": "https://mian.ro/dist/noodles/biangbiang.css",
  "usage": "<html data-noodle=\"biangbiang\">",
  "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": 900,
  "radius": {
    "field": "4px",
    "box": "6px",
    "badge": "3px"
  },
  "shadow": "none",
  "density": "comfortable",
  "glass": false,
  "light": {
    "bg": "#fff7ed",
    "surface": "#ffffff",
    "surface2": "#fde9d4",
    "fg": "#0a0a0a",
    "muted": "#5c4a3c",
    "border": "#0a0a0a",
    "input": "#0a0a0a",
    "primary": "#ea580c",
    "primaryFg": "#0a0a0a",
    "secondary": "#0a0a0a",
    "secondaryFg": "#fff7ed",
    "accent": "#166534",
    "accentFg": "#ffffff",
    "ring": "#0a0a0a",
    "success": "#15803d",
    "successFg": "#ffffff",
    "warning": "#b45309",
    "warningFg": "#ffffff",
    "danger": "#dc2626",
    "dangerFg": "#ffffff",
    "info": "#0369a1",
    "infoFg": "#ffffff",
    "primaryText": "#b4450c",
    "secondaryText": "#0a0a0a",
    "accentText": "#166534",
    "successText": "#14793a",
    "warningText": "#aa4f09",
    "dangerText": "#c72323",
    "infoText": "#0369a1",
    "link": "#166534"
  },
  "dark": {
    "bg": "#0c0a09",
    "surface": "#171412",
    "surface2": "#24201c",
    "fg": "#fff7ed",
    "muted": "#b8a898",
    "border": "#fff7ed",
    "input": "#fff7ed",
    "primary": "#fb923c",
    "primaryFg": "#0a0a0a",
    "secondary": "#fff7ed",
    "secondaryFg": "#0c0a09",
    "accent": "#4ade80",
    "accentFg": "#052e16",
    "ring": "#fb923c",
    "success": "#4ade80",
    "successFg": "#052e16",
    "warning": "#fbbf24",
    "warningFg": "#1f1300",
    "danger": "#f87171",
    "dangerFg": "#210505",
    "info": "#38bdf8",
    "infoFg": "#03202d",
    "primaryText": "#fb923c",
    "secondaryText": "#fff7ed",
    "accentText": "#4ade80",
    "successText": "#4ade80",
    "warningText": "#fbbf24",
    "dangerText": "#f87171",
    "infoText": "#38bdf8",
    "link": "#fb923c"
  },
  "css": "[data-noodle=\"biangbiang\"] {\n  --mn-bg: light-dark(#fff7ed, #0c0a09);\n  --mn-surface: light-dark(#ffffff, #171412);\n  --mn-surface-2: light-dark(#fde9d4, #24201c);\n  --mn-fg: light-dark(#0a0a0a, #fff7ed);\n  --mn-muted: light-dark(#5c4a3c, #b8a898);\n  --mn-border: light-dark(#0a0a0a, #fff7ed);\n  --mn-input: light-dark(#0a0a0a, #fff7ed);\n  --mn-primary: light-dark(#ea580c, #fb923c);\n  --mn-primary-fg: light-dark(#0a0a0a, #0a0a0a);\n  --mn-secondary: light-dark(#0a0a0a, #fff7ed);\n  --mn-secondary-fg: light-dark(#fff7ed, #0c0a09);\n  --mn-accent: light-dark(#166534, #4ade80);\n  --mn-accent-fg: light-dark(#ffffff, #052e16);\n  --mn-ring: light-dark(#0a0a0a, #fb923c);\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(#b4450c, #fb923c);\n  --mn-secondary-text: light-dark(#0a0a0a, #fff7ed);\n  --mn-accent-text: light-dark(#166534, #4ade80);\n  --mn-success-text: light-dark(#14793a, #4ade80);\n  --mn-warning-text: light-dark(#aa4f09, #fbbf24);\n  --mn-danger-text: light-dark(#c72323, #f87171);\n  --mn-info-text: light-dark(#0369a1, #38bdf8);\n  --mn-link: light-dark(#166534, #fb923c);\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: 900;\n  --mn-radius-field: 4px;\n  --mn-radius-box: 6px;\n  --mn-radius-badge: 3px;\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: 100%;\n  --mn-backdrop: none;\n  --mn-bg-image: none;\n}\n"
}