{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "yinzhen",
  "name": "Yinzhen",
  "family": "Pixel",
  "origin": "China · Guangdong",
  "tagline": "Silver needles. A system made of dots.",
  "description": "Yinzhen fen, “silver needle noodles”, are rolled by hand one at a time into short strands tapered to a point at each end, a noodle that is almost a dot. Yinzhen is a dot-matrix system: dotted outlines that join into lines on focus, LED-dot progress and bars, dotted chart lines, big numbers drawn in dots and a single red indicator dot.",
  "inspiration": [
    "Tapered to a point → the dot is the unit: outlines, dividers, progress and bars are drawn as rows of dots",
    "Rolled one at a time → dot-matrix numbers and LED rows, as if each point were placed by hand",
    "Short strands in a pile → monochrome black and white, a single red dot marks the current thing",
    "A quick toss in the wok → components switch on like LEDs, with a brief flicker"
  ],
  "traits": {
    "mood": [
      "dotted",
      "digital",
      "hardware",
      "minimal",
      "technical"
    ],
    "intensity": 3,
    "contrast": "high",
    "geometry": "dot matrix, pills",
    "type": "mono and dot type",
    "surface": "black and silver, dotted",
    "motion": "stepped",
    "goodFor": [
      "hardware products",
      "gadgets",
      "developer tools",
      "music tech"
    ],
    "lessFor": [
      "traditional brands",
      "wellness"
    ],
    "density": "default"
  },
  "license": "LicenseRef-MIAN-1.0",
  "designLanguage": {
    "essence": "Yinzhen is a system drawn in points. Its noodle is almost a dot, so the dot is the unit of everything: outlines are dotted and join into a solid line when focused, progress and sliders are rows of LEDs, bars are dot-matrix columns, chart lines are dotted, and big numbers are drawn in dots. It is monochrome, with a single red dot marking the current thing.",
    "principles": [
      "The dot is the unit: 2px dotted borders, LED rows at a 7px pitch, dot-matrix bars at 8px.",
      "Dotted means idle, solid means active: focus and selection turn dots into a line or a filled pill.",
      "Monochrome plus one red dot for the current state (tab, slider thumb, highlighted bar, default action).",
      "Machine type: mono for labels, tabs and numbers, uppercase with 0.06–0.08em tracking.",
      "Switch on like an LED: a short flicker (yinzhen-on) instead of a slide."
    ],
    "aspects": {
      "Shape": "Pills (999px) for controls, 20px containers, circles for checkboxes and switch knobs.",
      "Surface": "Paper grey page, white surfaces, 1px borders on cards; dotted borders on controls.",
      "Colour": "Black and white; red (#c8102e / #ff4545) for the one current thing.",
      "Type": "Mono headings and labels; large numbers filled with a dot pattern (background-clip: text).",
      "Motion": "yinzhen-on: opacity flicker 280ms linear; the spinner steps through eight dots.",
      "Data": "Dot-matrix bars (radial-gradient dots at 8px), the highlight lit red; dotted lines (stroke-dasharray: 0 7, round caps); segmented dotted donut."
    },
    "extend": [
      "Outline new controls with 2px dotted var(--mn-input); on focus/selection switch border-style to solid and colour to var(--mn-fg).",
      "Draw quantities as rows of dots: radial-gradient(circle, transparent 0 2.2px, var(--y-base) 2.8px) 0 50% / 7px 7px over a solid fill punches LED holes; keep --y-base equal to the surface behind.",
      "Mark the current item with a 6px red dot, not a colour fill.",
      "Label in uppercase mono at 11px."
    ],
    "avoid": [
      "Solid lines for idle states",
      "More than one red element",
      "Gradients and shadows",
      "Rounded-rectangle shapes between pill and square"
    ],
    "recipe": "[data-noodle=\"yinzhen\"] .tile {\n  padding: 14px 18px; border: 2px dotted var(--mn-input); border-radius: 20px; background: var(--mn-surface);\n  font: 500 .75rem/1.2 var(--mn-font-mono); text-transform: uppercase; letter-spacing: .06em;\n}\n[data-noodle=\"yinzhen\"] .tile[aria-selected=\"true\"] { border-style: solid; border-color: var(--mn-fg); }\n[data-noodle=\"yinzhen\"] .tile[aria-selected=\"true\"]::before { content: \"\"; display: inline-block; width: 6px; height: 6px; margin-inline-end: 8px; border-radius: 50%; background: var(--mn-accent); }"
  },
  "psychology": {
    "temperature": "neutral",
    "colours": [
      {
        "role": "Primary",
        "hex": "#0d0d0d",
        "family": "Black and ink",
        "depth": "deep, muted",
        "says": "Authority, precision, luxury. It makes everything next to it look more deliberate.",
        "use": "Fashion, editorial, developer tools, any brand that will let its content be the colour.",
        "risk": "Pure #000 on pure #fff is harsh on long text. Soften one of the two slightly, or warm both."
      },
      {
        "role": "Accent",
        "hex": "#c8102e",
        "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": "#f4f4f2",
        "family": "White and paper",
        "depth": "pale, muted",
        "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": "A neutral primary with one red accent: the accent means “look here” precisely because nothing else is coloured.",
    "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": "mono",
        "name": "Monospace",
        "says": "Technical, exact, raw, honest. The voice of code, receipts and instruments.",
        "use": "Developer tools, data, labels, numbers that must align.",
        "risk": "Tiring for long paragraphs; reads as a costume when the product is not technical."
      },
      "weight": 500,
      "summary": "Two voices: monospace for headings, neutral sans for the interface. Headings are medium, which reads as calm and assured."
    },
    "personality": {
      "reads": [
        "dotted",
        "digital",
        "hardware",
        "minimal",
        "technical"
      ],
      "intensity": 3,
      "dimensions": [],
      "suits": [
        "hardware products",
        "gadgets",
        "developer tools",
        "music tech"
      ],
      "lessFor": [
        "traditional brands",
        "wellness"
      ],
      "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. A monospaced wordmark matches the headings."
  },
  "url": "https://mian.ro/noodles/yinzhen",
  "markdownUrl": "https://mian.ro/ai/noodles/yinzhen.md",
  "stylesheet": "https://mian.ro/dist/noodles/yinzhen.css",
  "usage": "<html data-noodle=\"yinzhen\">",
  "fonts": {
    "sans": "ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
    "heading": "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace",
    "mono": "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace"
  },
  "headingWeight": 500,
  "radius": {
    "field": "999px",
    "box": "20px",
    "badge": "999px"
  },
  "shadow": "none",
  "density": "default",
  "glass": false,
  "light": {
    "bg": "#f4f4f2",
    "surface": "#ffffff",
    "surface2": "#ebebe8",
    "fg": "#0d0d0d",
    "muted": "#5c5c5a",
    "border": "#dcdcd8",
    "input": "#b3b3ad",
    "primary": "#0d0d0d",
    "primaryFg": "#ffffff",
    "secondary": "#ebebe8",
    "secondaryFg": "#0d0d0d",
    "accent": "#c8102e",
    "accentFg": "#ffffff",
    "ring": "#c8102e",
    "success": "#15803d",
    "successFg": "#ffffff",
    "warning": "#b45309",
    "warningFg": "#ffffff",
    "danger": "#dc2626",
    "dangerFg": "#ffffff",
    "info": "#0369a1",
    "infoFg": "#ffffff",
    "primaryText": "#0d0d0d",
    "secondaryText": "#6f6f6d",
    "accentText": "#c8102e",
    "successText": "#15793a",
    "warningText": "#aa4f09",
    "dangerText": "#c72424",
    "infoText": "#0369a1",
    "link": "#0d0d0d"
  },
  "dark": {
    "bg": "#000000",
    "surface": "#0f0f0f",
    "surface2": "#1a1a1a",
    "fg": "#f2f2f2",
    "muted": "#9e9e9e",
    "border": "#262626",
    "input": "#4a4a4a",
    "primary": "#f2f2f2",
    "primaryFg": "#000000",
    "secondary": "#1a1a1a",
    "secondaryFg": "#f2f2f2",
    "accent": "#ff4545",
    "accentFg": "#000000",
    "ring": "#ff4545",
    "success": "#4ade80",
    "successFg": "#052e16",
    "warning": "#fbbf24",
    "warningFg": "#1f1300",
    "danger": "#f87171",
    "dangerFg": "#210505",
    "info": "#38bdf8",
    "infoFg": "#03202d",
    "primaryText": "#f2f2f2",
    "secondaryText": "#7d7d7d",
    "accentText": "#ff4545",
    "successText": "#4ade80",
    "warningText": "#fbbf24",
    "dangerText": "#f87171",
    "infoText": "#38bdf8",
    "link": "#f2f2f2"
  },
  "css": "[data-noodle=\"yinzhen\"] {\n  --mn-bg: light-dark(#f4f4f2, #000000);\n  --mn-surface: light-dark(#ffffff, #0f0f0f);\n  --mn-surface-2: light-dark(#ebebe8, #1a1a1a);\n  --mn-fg: light-dark(#0d0d0d, #f2f2f2);\n  --mn-muted: light-dark(#5c5c5a, #9e9e9e);\n  --mn-border: light-dark(#dcdcd8, #262626);\n  --mn-input: light-dark(#b3b3ad, #4a4a4a);\n  --mn-primary: light-dark(#0d0d0d, #f2f2f2);\n  --mn-primary-fg: light-dark(#ffffff, #000000);\n  --mn-secondary: light-dark(#ebebe8, #1a1a1a);\n  --mn-secondary-fg: light-dark(#0d0d0d, #f2f2f2);\n  --mn-accent: light-dark(#c8102e, #ff4545);\n  --mn-accent-fg: light-dark(#ffffff, #000000);\n  --mn-ring: light-dark(#c8102e, #ff4545);\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(#0d0d0d, #f2f2f2);\n  --mn-secondary-text: light-dark(#6f6f6d, #7d7d7d);\n  --mn-accent-text: light-dark(#c8102e, #ff4545);\n  --mn-success-text: light-dark(#15793a, #4ade80);\n  --mn-warning-text: light-dark(#aa4f09, #fbbf24);\n  --mn-danger-text: light-dark(#c72424, #f87171);\n  --mn-info-text: light-dark(#0369a1, #38bdf8);\n  --mn-link: light-dark(#0d0d0d, #f2f2f2);\n  --mn-font: ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n  --mn-font-heading: ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace;\n  --mn-font-mono: ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace;\n  --mn-heading-weight: 500;\n  --mn-radius-field: 999px;\n  --mn-radius-box: 20px;\n  --mn-radius-badge: 999px;\n  --mn-shadow-sm: none;\n  --mn-shadow-md: none;\n  --mn-shadow-lg: none;\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: 100%;\n  --mn-backdrop: none;\n  --mn-bg-image: none;\n}\n"
}