# Mian: a MIAN design language

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.

- Family: Minimal · Origin: China · 面 · License: MIAN License (free to use)
- Traits: neutral, precise, calm, timeless, serious, minimal · intensity 1/5 · contrast high · density default. Good for: saas, developer tools, documentation, dashboards, studios, any brand that will add its own colour. Less for: children, festive campaigns.
- Use: `<html data-noodle="mian">` (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/mian.css
- Page: https://mian.ro/noodles/mian

## Design philosophy

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.

## The language

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

## Colour, type and brand

- **Primary** #0a0a0a: black and ink (deep, muted). Authority, precision, luxury. It makes everything next to it look more deliberate.
- **Accent** #525252: grey (mid, muted). Neutrality, technology, restraint.
- **Page** #ffffff: white and paper (pale, muted). Space, honesty, simplicity. Warm whites feel human, cool whites feel clinical.
- **Scheme.** A monochrome scheme: no hue competes with the content, so status colours and images carry all the colour. The page 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.
- **Reads as** neutral, precise, calm, timeless, serious (brand dimension: competence).
- **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.
- 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: "mian").

## Inspired by the noodle

- Flour and water → only two colours, black and white, with greys in between
- The plain strand before any recipe → a 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 day → fast, predictable motion and controls that never surprise

## Designing new components in Mian

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

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

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

## Tokens

- Fonts: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif
- Heading font: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif
- Radius: field 6px, box 10px, badge 999px
- Density: default · Shadows: subtle

| token | light | dark |
|---|---|---|
| bg | #ffffff | #0a0a0a |
| surface | #ffffff | #111111 |
| surface2 | #f5f5f5 | #1a1a1a |
| fg | #0a0a0a | #ededed |
| muted | #666666 | #a1a1a1 |
| border | #eaeaea | #262626 |
| input | #d4d4d4 | #3f3f3f |
| primary | #0a0a0a | #ededed |
| primaryFg | #ffffff | #0a0a0a |
| secondary | #f5f5f5 | #1a1a1a |
| secondaryFg | #0a0a0a | #ededed |
| accent | #525252 | #a1a1a1 |
| accentFg | #ffffff | #0a0a0a |
| ring | #0a0a0a | #ededed |
| 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 | #0a0a0a | #ededed |
| secondaryText | #767676 | #7f7f7f |
| accentText | #525252 | #a1a1a1 |
| successText | #14793a | #4ade80 |
| warningText | #aa4f09 | #fbbf24 |
| dangerText | #c72323 | #f87171 |
| infoText | #0369a1 | #38bdf8 |
| link | #0a0a0a | #ededed |