Mian

The noodle itself. Black, white, nothing else. Miàn (面) means noodle, and also face, surface. Before any sauce, shape or region, a noodle is flour, water and a pair of hands. Mian is that base: black on white, one-pixel lines, clear type and quick, quiet motion. Every other noodle is a variation of it.

MinimalChina · 面radius 6px / 10pxdefault densitysubtle shadows

Use Mian Design language (Markdown)Tokens JSON

Design language

Mian is the noodle before any recipe, flour, water and a pair of hands, and the interface before any style. It is black on white, drawn with one-pixel edges and clear type, with a soft shadow only when something floats above the page. Every other noodle in MIAN starts here and changes one thing at a time: the material, the shape, the weight, the motion. When in doubt, Mian does the obvious thing, precisely.

Principles

Two colours: ink and paper. Greys are the only in-between; colour is reserved for status (success, warning, danger, info).
Edges, not boxes: a 1px border in var(--mn-border) separates things; depth appears only when something floats (menus, dialogs, hovered cards).
Clear type: one clean sans in two weights (400 and 600), headings tracked tight (−0.035em).
Quiet and quick: 150–160ms, a 3px rise on entry, no bounce, no decoration.
Obvious states: hover changes tone, focus draws a clear ring, selected is solid ink.

Shape

6px fields and buttons, 10px containers, pill badges. Nothing is rounder or sharper than it needs to be.

Surface

White page and white surfaces separated by 1px #eaeaea edges (dark: #262626). The one shadow, --m-float, is a 1px ring plus a soft two-step drop, used for menus, dialogs, toasts and hovered cards.

Colour

Primary is ink (#0a0a0a / #ededed). Accent is a mid grey. Status colours are the only hues.

Type

The system UI font; controls at 500, titles at 600; numbers tabular.

Motion

mian-in: 3px rise and fade in 160ms, cubic-bezier(.2,0,0,1). Buttons scale to .98 while pressed.

Data

The highlighted bar is solid ink, the rest are 12% ink; lines are 2px ink with a 6% area; the donut is ink and grey.

Designing new components in Mian

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

Do

Start from the plain structure: var(--mn-surface), 1px solid var(--mn-border), radius var(--mn-radius-box) (10px), padding 16–20px.
Hover: change the background to var(--mn-surface-2) or deepen the border to var(--mn-input). Never move things on hover.
Selected / on: solid var(--mn-fg) with var(--mn-bg) text, or a 2px ink underline.
If it floats, give it --m-float and drop the border colour; if it does not float, it has no shadow.
Use colour only to say something (success, warning, danger, info).

Avoid

Gradients, textures and glass
Coloured primary buttons
Shadows on resting cards
Bouncy or slow motion
Heavy (700+) type outside headings

Recipe: a selectable tile

[data-noodle="mian"] .tile {
  padding: 16px; border: 1px solid var(--mn-border); border-radius: 10px;
  background: var(--mn-surface); color: var(--mn-fg);
  transition: background-color 150ms cubic-bezier(.2, 0, 0, 1), border-color 150ms;
}
[data-noodle="mian"] .tile:hover { background: var(--mn-surface-2); border-color: var(--mn-input); }
[data-noodle="mian"] .tile[aria-selected="true"] { background: var(--mn-fg); color: var(--mn-bg); border-color: var(--mn-fg); }

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

Colour, type and brand

What Mian 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

#0a0a0a · 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 · Grey

#525252 · mid, muted

Neutrality, technology, restraint.

Watch for: A grey with no hue at all looks unfinished beside a coloured accent. Tint the neutrals toward the brand hue by two or three percent.

Page · White and paper

#ffffff · 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 monochrome scheme: no hue competes with the content, so status colours and images carry all the colour. The page itself is neutral.

Type

One voice throughout: neutral sans. Headings are semibold, which reads as confident without shouting. Clear, modern, impartial. The voice of software and signage.

Personality

Reads as neutral, precise, calm, timeless, serious. Intensity 1 of 5. Brand dimension: competence.

Suits

saas, developer tools, documentation, dashboards, studios. Less suited to children, festive campaigns.

Tone of voice

Quiet. Plain statements in sentence case, no exclamation marks, numbers with their units. Let space do the persuading.

Logo

A simple geometric mark with slightly softened corners fits; avoid both hard spikes and full circles.

Inspired by the noodle

Flour and wateronly two colours, black and white, with greys in between
The plain strand before any recipea neutral base every other noodle builds on
面 is also “surface”surfaces carry the design: a clean 1px edge, a soft shadow only when something floats
Made every dayfast, predictable motion and controls that never surprise

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="mian">

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

<!-- or scope it to one element -->
<section data-noodle="mian" 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#ffffff

Surface#ffffff

Muted surface#f5f5f5

Foreground#0a0a0a

Muted text#666666

Border#eaeaea

Input border#d4d4d4

Primary#0a0a0a

On primary#ffffff

Secondary#f5f5f5

Accent#525252

Success#15803d

Warning#b45309

Danger#dc2626

Info#0369a1

Focus ring#0a0a0a

Typography & shape

--mn-font	ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif
--mn-font-heading	ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif
--mn-radius-field / box / badge	6px · 10px · 999px
density	default
shadows	subtle