Yinzhen

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.

PixelChina · Guangdongradius 999px / 20pxdefault densitynone shadows

Use Yinzhen Design language (Markdown)Tokens JSON

Design language

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.

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.

Designing new components in Yinzhen

MIAN does not ship every component you will need. To make a new one that belongs in Yinzhen, build it from --mn-* tokens inside [data-noodle="yinzhen"] and follow these rules.

Do

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

[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); }

The same guide, for AI tools: /ai/noodles/yinzhen.md · MCP tool get_design_language.

Colour, type and brand

What Yinzhen says before anyone reads a word, and what kind of brand it suits. Tendencies, not laws: see the guides on colour, type, branding and logos.

Primary · Black and ink

#0d0d0d · deep, muted

Authority, precision, luxury. It makes everything next to it look more deliberate.

Watch for: Pure #000 on pure #fff is harsh on long text. Soften one of the two slightly, or warm both.

Accent · Red

#c8102e · mid, saturated

Urgency, energy, appetite, danger. It raises attention faster than any other hue and reads as the most forceful.

Watch for: 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).

Page · White and paper

#f4f4f2 · pale, muted

Space, honesty, simplicity. Warm whites feel human, cool whites feel clinical.

Watch for: Empty is not the same as calm: white space needs a grid behind it.

A neutral primary with one red accent: the accent means “look here” precisely because nothing else is coloured. The page itself 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.

Personality

Reads as dotted, digital, hardware, minimal, technical. Intensity 3 of 5.

Suits

hardware products, gadgets, developer tools, music tech. Less suited to traditional brands, wellness.

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.

Inspired by the noodle

Tapered to a pointthe dot is the unit: outlines, dividers, progress and bars are drawn as rows of dots
Rolled one at a timedot-matrix numbers and LED rows, as if each point were placed by hand
Short strands in a pilemonochrome black and white, a single red dot marks the current thing
A quick toss in the wokcomponents switch on like LEDs, with a brief flicker

Specimen

The same markup as every other noodle. Press, hover, open the menu and the dialog: shape, depth, texture and motion all change.

Try your brand colour

Your own

Open in the studio

Light

Buttons

Fields

Name

Choices

Check Radio

Status

NewPaidPendingDraftTag

Tabs

Overview panel.

Activity panel.

Settings panel.

Bars

Line & donut

45%

Table

Invoice	Status	Amount
INV-001	Paid	€250.00
INV-002	Pending	€150.00
INV-003	Overdue	€350.00

Feedback & motion

Deployed

Your site is live.

Cart
Pay
Done

Dark

Buttons

Fields

Name

Choices

Check Radio

Status

NewPaidPendingDraftTag

Tabs

Overview panel.

Activity panel.

Settings panel.

Bars

Line & donut

45%

Table

Invoice	Status	Amount
INV-001	Paid	€250.00
INV-002	Pending	€150.00
INV-003	Overdue	€350.00

Feedback & motion

Deployed

Your site is live.

Cart
Pay
Done

Use it

<!-- everything -->
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<html data-noodle="yinzhen">

<!-- or only this noodle -->
<link rel="stylesheet" href="https://mian.ro/dist/mian-core.css">
<link rel="stylesheet" href="https://mian.ro/dist/noodles/yinzhen.css">

<!-- or scope it to one element -->
<section data-noodle="yinzhen" data-mode="dark">…</section>

Palette

Left half light, right half dark. Every text pair is verified for WCAG AA contrast when the site is built.

Background#f4f4f2

Surface#ffffff

Muted surface#ebebe8

Foreground#0d0d0d

Muted text#5c5c5a

Border#dcdcd8

Input border#b3b3ad

Primary#0d0d0d

On primary#ffffff

Secondary#ebebe8

Accent#c8102e

Success#15803d

Warning#b45309

Danger#dc2626

Info#0369a1

Focus ring#c8102e

Typography & shape

--mn-font	ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
--mn-font-heading	ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace
--mn-radius-field / box / badge	999px · 20px · 999px
density	default
shadows	none