# Yinzhen: a MIAN design language

Silver needles. A system made of dots. 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.

- Family: Pixel · Origin: China · Guangdong · License: MIAN License (free to use)
- Traits: dotted, digital, hardware, minimal, technical · intensity 3/5 · contrast high · density default. Good for: hardware products, gadgets, developer tools, music tech. Less for: traditional brands, wellness.
- Use: `<html data-noodle="yinzhen">` (or on any element to scope it). Add `data-mode="dark"` or `"light"` to force a mode.
- Everything: https://mian.ro/dist/mian.css · Only this noodle: https://mian.ro/dist/mian-core.css + https://mian.ro/dist/noodles/yinzhen.css
- Page: https://mian.ro/noodles/yinzhen

## Design philosophy

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.

## The language

- **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.

## Colour, type and brand

- **Primary** #0d0d0d: black and ink (deep, muted). Authority, precision, luxury. It makes everything next to it look more deliberate.
- **Accent** #c8102e: red (mid, saturated). Urgency, energy, appetite, danger. It raises attention faster than any other hue and reads as the most forceful.
- **Page** #f4f4f2: white and paper (pale, muted). Space, honesty, simplicity. Warm whites feel human, cool whites feel clinical.
- **Scheme.** A neutral primary with one red accent: the accent means “look here” precisely because nothing else is coloured. The page is neutral.
- **Type.** Two voices: monospace for headings, neutral sans for the interface. Headings are medium, which reads as calm and assured. Technical, exact, raw, honest. The voice of code, receipts and instruments.
- **Reads as** dotted, digital, hardware, minimal, technical.
- **Tone of voice.** 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.
- To keep this noodle’s shape with your own brand colours: POST https://mian.ro/api/v1/noodles/create or the MCP tool `create_noodle` (base: "yinzhen").

## Inspired by the noodle

- 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

## Designing new components in Yinzhen

Build new components from `--mn-*` tokens, scoped with `[data-noodle="yinzhen"]`, and follow these rules. Any `--x-*` variables named below are defined by this noodle's skin and can be used inside its scope.

- 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: a selectable tile in this language:

```css
[data-noodle="yinzhen"] .tile {
  padding: 14px 18px; border: 2px dotted var(--mn-input); border-radius: 20px; background: var(--mn-surface);
  font: 500 .75rem/1.2 var(--mn-font-mono); text-transform: uppercase; letter-spacing: .06em;
}
[data-noodle="yinzhen"] .tile[aria-selected="true"] { border-style: solid; border-color: var(--mn-fg); }
[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); }
```

## Tokens

- Fonts: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
- Heading font: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace
- Radius: field 999px, box 20px, badge 999px
- Density: default · Shadows: none

| token | light | dark |
|---|---|---|
| bg | #f4f4f2 | #000000 |
| surface | #ffffff | #0f0f0f |
| surface2 | #ebebe8 | #1a1a1a |
| fg | #0d0d0d | #f2f2f2 |
| muted | #5c5c5a | #9e9e9e |
| border | #dcdcd8 | #262626 |
| input | #b3b3ad | #4a4a4a |
| primary | #0d0d0d | #f2f2f2 |
| primaryFg | #ffffff | #000000 |
| secondary | #ebebe8 | #1a1a1a |
| secondaryFg | #0d0d0d | #f2f2f2 |
| accent | #c8102e | #ff4545 |
| accentFg | #ffffff | #000000 |
| ring | #c8102e | #ff4545 |
| success | #15803d | #4ade80 |
| successFg | #ffffff | #052e16 |
| warning | #b45309 | #fbbf24 |
| warningFg | #ffffff | #1f1300 |
| danger | #dc2626 | #f87171 |
| dangerFg | #ffffff | #210505 |
| info | #0369a1 | #38bdf8 |
| infoFg | #ffffff | #03202d |
| primaryText | #0d0d0d | #f2f2f2 |
| secondaryText | #6f6f6d | #7d7d7d |
| accentText | #c8102e | #ff4545 |
| successText | #15793a | #4ade80 |
| warningText | #aa4f09 | #fbbf24 |
| dangerText | #c72424 | #f87171 |
| infoText | #0369a1 | #38bdf8 |
| link | #0d0d0d | #f2f2f2 |