{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "mian",
  "name": "Mian",
  "family": "Minimal",
  "origin": "China · 面",
  "tagline": "The noodle itself. Black, white, nothing else.",
  "description": "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.",
  "inspiration": [
    "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"
  ],
  "traits": {
    "mood": [
      "neutral",
      "precise",
      "calm",
      "timeless",
      "serious",
      "minimal"
    ],
    "intensity": 1,
    "contrast": "high",
    "geometry": "small radius, hairline borders",
    "type": "clean sans, tight headings",
    "surface": "flat black and white",
    "motion": "short, subtle",
    "goodFor": [
      "saas",
      "developer tools",
      "documentation",
      "dashboards",
      "studios",
      "any brand that will add its own colour"
    ],
    "lessFor": [
      "children",
      "festive campaigns"
    ],
    "density": "default"
  },
  "license": "LicenseRef-MIAN-1.0",
  "designLanguage": {
    "essence": "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."
    ],
    "aspects": {
      "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."
    },
    "extend": [
      "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": "[data-noodle=\"mian\"] .tile {\n  padding: 16px; border: 1px solid var(--mn-border); border-radius: 10px;\n  background: var(--mn-surface); color: var(--mn-fg);\n  transition: background-color 150ms cubic-bezier(.2, 0, 0, 1), border-color 150ms;\n}\n[data-noodle=\"mian\"] .tile:hover { background: var(--mn-surface-2); border-color: var(--mn-input); }\n[data-noodle=\"mian\"] .tile[aria-selected=\"true\"] { background: var(--mn-fg); color: var(--mn-bg); border-color: var(--mn-fg); }"
  },
  "psychology": {
    "temperature": "neutral",
    "colours": [
      {
        "role": "Primary",
        "hex": "#0a0a0a",
        "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": "#525252",
        "family": "Grey",
        "depth": "mid, muted",
        "says": "Neutrality, technology, restraint.",
        "use": "Interfaces where data must stand out.",
        "risk": "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."
      },
      {
        "role": "Page",
        "hex": "#ffffff",
        "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 monochrome scheme: no hue competes with the content, so status colours and images carry all the colour.",
    "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": "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."
      },
      "weight": 600,
      "summary": "One voice throughout: neutral sans. Headings are semibold, which reads as confident without shouting."
    },
    "personality": {
      "reads": [
        "neutral",
        "precise",
        "calm",
        "timeless",
        "serious"
      ],
      "intensity": 1,
      "dimensions": [
        "Competence"
      ],
      "suits": [
        "saas",
        "developer tools",
        "documentation",
        "dashboards",
        "studios"
      ],
      "lessFor": [
        "children",
        "festive campaigns"
      ],
      "tone": "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."
  },
  "url": "https://mian.ro/noodles/mian",
  "markdownUrl": "https://mian.ro/ai/noodles/mian.md",
  "stylesheet": "https://mian.ro/dist/noodles/mian.css",
  "usage": "<html data-noodle=\"mian\">",
  "fonts": {
    "sans": "ui-sans-serif, system-ui, -apple-system, \"Segoe UI Variable Text\", \"Segoe UI\", \"Helvetica Neue\", Helvetica, Arial, sans-serif",
    "heading": "ui-sans-serif, system-ui, -apple-system, \"Segoe UI Variable Text\", \"Segoe UI\", \"Helvetica Neue\", Helvetica, Arial, sans-serif",
    "mono": "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace"
  },
  "headingWeight": 600,
  "radius": {
    "field": "6px",
    "box": "10px",
    "badge": "999px"
  },
  "shadow": "subtle",
  "density": "default",
  "glass": false,
  "light": {
    "bg": "#ffffff",
    "surface": "#ffffff",
    "surface2": "#f5f5f5",
    "fg": "#0a0a0a",
    "muted": "#666666",
    "border": "#eaeaea",
    "input": "#d4d4d4",
    "primary": "#0a0a0a",
    "primaryFg": "#ffffff",
    "secondary": "#f5f5f5",
    "secondaryFg": "#0a0a0a",
    "accent": "#525252",
    "accentFg": "#ffffff",
    "ring": "#0a0a0a",
    "success": "#15803d",
    "successFg": "#ffffff",
    "warning": "#b45309",
    "warningFg": "#ffffff",
    "danger": "#dc2626",
    "dangerFg": "#ffffff",
    "info": "#0369a1",
    "infoFg": "#ffffff",
    "primaryText": "#0a0a0a",
    "secondaryText": "#767676",
    "accentText": "#525252",
    "successText": "#14793a",
    "warningText": "#aa4f09",
    "dangerText": "#c72323",
    "infoText": "#0369a1",
    "link": "#0a0a0a"
  },
  "dark": {
    "bg": "#0a0a0a",
    "surface": "#111111",
    "surface2": "#1a1a1a",
    "fg": "#ededed",
    "muted": "#a1a1a1",
    "border": "#262626",
    "input": "#3f3f3f",
    "primary": "#ededed",
    "primaryFg": "#0a0a0a",
    "secondary": "#1a1a1a",
    "secondaryFg": "#ededed",
    "accent": "#a1a1a1",
    "accentFg": "#0a0a0a",
    "ring": "#ededed",
    "success": "#4ade80",
    "successFg": "#052e16",
    "warning": "#fbbf24",
    "warningFg": "#1f1300",
    "danger": "#f87171",
    "dangerFg": "#210505",
    "info": "#38bdf8",
    "infoFg": "#03202d",
    "primaryText": "#ededed",
    "secondaryText": "#7f7f7f",
    "accentText": "#a1a1a1",
    "successText": "#4ade80",
    "warningText": "#fbbf24",
    "dangerText": "#f87171",
    "infoText": "#38bdf8",
    "link": "#ededed"
  },
  "css": "[data-noodle=\"mian\"] {\n  --mn-bg: light-dark(#ffffff, #0a0a0a);\n  --mn-surface: light-dark(#ffffff, #111111);\n  --mn-surface-2: light-dark(#f5f5f5, #1a1a1a);\n  --mn-fg: light-dark(#0a0a0a, #ededed);\n  --mn-muted: light-dark(#666666, #a1a1a1);\n  --mn-border: light-dark(#eaeaea, #262626);\n  --mn-input: light-dark(#d4d4d4, #3f3f3f);\n  --mn-primary: light-dark(#0a0a0a, #ededed);\n  --mn-primary-fg: light-dark(#ffffff, #0a0a0a);\n  --mn-secondary: light-dark(#f5f5f5, #1a1a1a);\n  --mn-secondary-fg: light-dark(#0a0a0a, #ededed);\n  --mn-accent: light-dark(#525252, #a1a1a1);\n  --mn-accent-fg: light-dark(#ffffff, #0a0a0a);\n  --mn-ring: light-dark(#0a0a0a, #ededed);\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(#0a0a0a, #ededed);\n  --mn-secondary-text: light-dark(#767676, #7f7f7f);\n  --mn-accent-text: light-dark(#525252, #a1a1a1);\n  --mn-success-text: light-dark(#14793a, #4ade80);\n  --mn-warning-text: light-dark(#aa4f09, #fbbf24);\n  --mn-danger-text: light-dark(#c72323, #f87171);\n  --mn-info-text: light-dark(#0369a1, #38bdf8);\n  --mn-link: light-dark(#0a0a0a, #ededed);\n  --mn-font: ui-sans-serif, system-ui, -apple-system, \"Segoe UI Variable Text\", \"Segoe UI\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n  --mn-font-heading: ui-sans-serif, system-ui, -apple-system, \"Segoe UI Variable Text\", \"Segoe UI\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n  --mn-font-mono: ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace;\n  --mn-heading-weight: 600;\n  --mn-radius-field: 6px;\n  --mn-radius-box: 10px;\n  --mn-radius-badge: 999px;\n  --mn-shadow-sm: 0 1px 2px rgb(0 0 0 / .05);\n  --mn-shadow-md: 0 2px 6px -1px rgb(0 0 0 / .08), 0 1px 2px rgb(0 0 0 / .04);\n  --mn-shadow-lg: 0 12px 32px -8px rgb(0 0 0 / .18), 0 4px 8px -4px rgb(0 0 0 / .08);\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"
}