{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "mixian",
  "name": "Mixian",
  "family": "Rounded",
  "origin": "China · Yunnan",
  "tagline": "Round, soft, served on small plates.",
  "description": "Mixian are Yunnan’s round rice noodles, smooth, white and springy. In crossing-the-bridge noodles they arrive with a bowl of very hot broth and a table of small plates, and each ingredient is slid into the bowl one at a time. Mixian is a small-plates system: everything round, every choice on its own separate plate, and things arriving one by one.",
  "inspiration": [
    "Round in cross-section → perfect circles and full pills everywhere",
    "A table of small plates → groups split into separate round plates with gaps (button groups, toggles, tabs, table rows, lists)",
    "Ingredients added one at a time → items arrive one after another in a short stagger",
    "Blue-and-white porcelain bowls → porcelain cobalt on warm white"
  ],
  "traits": {
    "mood": [
      "round",
      "soft",
      "tidy",
      "friendly",
      "modular"
    ],
    "intensity": 2,
    "contrast": "low",
    "geometry": "round, small plates",
    "type": "rounded sans",
    "surface": "white plates",
    "motion": "soft",
    "goodFor": [
      "food delivery",
      "menus",
      "modular dashboards",
      "consumer apps"
    ],
    "lessFor": [
      "editorial"
    ],
    "density": "comfortable"
  },
  "license": "LicenseRef-MIAN-1.0",
  "designLanguage": {
    "essence": "Mixian is a table of small plates. The round rice noodles arrive with hot broth and many small dishes that are slid in one at a time, so the interface is round and modular: every choice sits on its own separate round plate, buttons in a group, segments of a toggle, tabs, table rows, list items, stats and avatars are split apart with small gaps, and they arrive one after another.",
    "principles": [
      "Round: 999px controls and rows, circles for checkboxes, icons buttons and OTP boxes; 28px panels.",
      "Separate plates: never merge a group into one bar, gap 6–8px and a plate shadow on each.",
      "Arrive one by one: a 50ms stagger (mixian-in, scale .92 → 1).",
      "Porcelain: cobalt on warm white, soft plate shadows (--mx-plate)."
    ],
    "aspects": {
      "Shape": "Pills and circles; rows are pill-shaped plates.",
      "Surface": "White plates with --mx-plate on a warm page; no borders.",
      "Colour": "Porcelain cobalt primary, chilli-oil accent.",
      "Type": "Rounded sans at 600–650.",
      "Motion": "mixian-in with stagger; presses shrink to .95 with a gentle spring.",
      "Data": "Round bars with gaps and visible round points."
    },
    "extend": [
      "Split any group into separate items: display: flex/grid with gap: 6–8px; each item gets border-radius: 999px (or 20–28px) and box-shadow: var(--mx-plate).",
      "Stagger arrivals with animation: mixian-in 320ms both and 50ms per item.",
      "Selected = filled with var(--mn-primary)."
    ],
    "avoid": [
      "Joined segmented bars",
      "Square corners",
      "Borders instead of plates"
    ],
    "recipe": "[data-noodle=\"mixian\"] .tiles { display: flex; flex-wrap: wrap; gap: 8px; }\n[data-noodle=\"mixian\"] .tile {\n  padding: 10px 18px; border: 0; border-radius: 999px; background: var(--mn-surface); box-shadow: var(--mx-plate);\n  animation: mixian-in 320ms cubic-bezier(.3, 1.3, .5, 1) both;\n}\n[data-noodle=\"mixian\"] .tile:nth-child(2) { animation-delay: 50ms; }\n[data-noodle=\"mixian\"] .tile[aria-selected=\"true\"] { background: var(--mn-primary); color: var(--mn-primary-fg); }"
  },
  "psychology": {
    "temperature": "warm",
    "colours": [
      {
        "role": "Primary",
        "hex": "#1f3fa6",
        "family": "Blue",
        "depth": "mid",
        "says": "Trust, competence, calm, distance. The world’s most-liked colour and the default of banks, software and social networks.",
        "use": "Finance, enterprise, health, anything that must feel safe. Links are expected to be blue.",
        "risk": "The safest choice is also the least memorable. A blue brand is told apart by its typography, shape and tone of voice, not by its blue."
      },
      {
        "role": "Accent",
        "hex": "#b3541e",
        "family": "Brown and terracotta",
        "depth": "mid, saturated",
        "says": "Earth, craft, reliability, age. Feels made by hand and unhurried.",
        "use": "Food, coffee, leather, ceramics, heritage brands, anything artisanal.",
        "risk": "Looks dull on screens unless the neutrals around it are warm too."
      },
      {
        "role": "Page",
        "hex": "#f8f6f1",
        "family": "Yellow and gold",
        "depth": "pale, muted",
        "says": "Optimism, attention, caution. Gold tones add value and ceremony.",
        "use": "Highlights, warnings, playful consumer brands; gold for luxury and awards.",
        "risk": "The lightest hue: white text on yellow fails, so yellow always carries dark text. Large yellow areas tire the eye."
      }
    ],
    "relation": "Blue against brown and terracotta, close to complementary: strong contrast, so the accent must stay rare.",
    "type": {
      "body": {
        "class": "rounded",
        "name": "Rounded sans",
        "says": "Friendly, soft, safe, young.",
        "use": "Consumer apps, children, food, onboarding.",
        "risk": "Hard to take seriously for money, law or medicine."
      },
      "heading": {
        "class": "rounded",
        "name": "Rounded sans",
        "says": "Friendly, soft, safe, young.",
        "use": "Consumer apps, children, food, onboarding.",
        "risk": "Hard to take seriously for money, law or medicine."
      },
      "weight": 650,
      "summary": "One voice throughout: rounded sans. Headings are semibold, which reads as confident without shouting."
    },
    "personality": {
      "reads": [
        "round",
        "soft",
        "tidy",
        "friendly",
        "modular"
      ],
      "intensity": 2,
      "dimensions": [],
      "suits": [
        "food delivery",
        "menus",
        "modular dashboards",
        "consumer apps"
      ],
      "lessFor": [
        "editorial"
      ],
      "tone": "Calm and clear. Short sentences, one idea each, a friendly but not chatty register."
    },
    "logo": "Round marks fit: a circular symbol or a soft, lowercase wordmark."
  },
  "url": "https://mian.ro/noodles/mixian",
  "markdownUrl": "https://mian.ro/ai/noodles/mixian.md",
  "stylesheet": "https://mian.ro/dist/noodles/mixian.css",
  "usage": "<html data-noodle=\"mixian\">",
  "fonts": {
    "sans": "ui-rounded, \"SF Pro Rounded\", \"Nunito\", ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif",
    "heading": "ui-rounded, \"SF Pro Rounded\", \"Nunito\", ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif",
    "mono": "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace"
  },
  "headingWeight": 650,
  "radius": {
    "field": "999px",
    "box": "28px",
    "badge": "999px"
  },
  "shadow": "soft",
  "density": "comfortable",
  "glass": false,
  "light": {
    "bg": "#f8f6f1",
    "surface": "#ffffff",
    "surface2": "#efece5",
    "fg": "#1c1b19",
    "muted": "#625e57",
    "border": "#e6e1d8",
    "input": "#cfc8bc",
    "primary": "#1f3fa6",
    "primaryFg": "#ffffff",
    "secondary": "#efece5",
    "secondaryFg": "#1c1b19",
    "accent": "#b3541e",
    "accentFg": "#ffffff",
    "ring": "#1f3fa6",
    "success": "#15803d",
    "successFg": "#ffffff",
    "warning": "#b45309",
    "warningFg": "#ffffff",
    "danger": "#dc2626",
    "dangerFg": "#ffffff",
    "info": "#0369a1",
    "infoFg": "#ffffff",
    "primaryText": "#1f3fa6",
    "secondaryText": "#706f6b",
    "accentText": "#a74f1e",
    "successText": "#16783a",
    "warningText": "#a84f0a",
    "dangerText": "#c52524",
    "infoText": "#0369a1",
    "link": "#1f3fa6"
  },
  "dark": {
    "bg": "#12110f",
    "surface": "#1a1916",
    "surface2": "#24221e",
    "fg": "#f3f0ea",
    "muted": "#aaa398",
    "border": "#302d28",
    "input": "#48443c",
    "primary": "#8fa8f5",
    "primaryFg": "#0b1433",
    "secondary": "#24221e",
    "secondaryFg": "#f3f0ea",
    "accent": "#f0a070",
    "accentFg": "#2a1204",
    "ring": "#8fa8f5",
    "success": "#4ade80",
    "successFg": "#052e16",
    "warning": "#fbbf24",
    "warningFg": "#1f1300",
    "danger": "#f87171",
    "dangerFg": "#210505",
    "info": "#38bdf8",
    "infoFg": "#03202d",
    "primaryText": "#8fa8f5",
    "secondaryText": "#878580",
    "accentText": "#f0a070",
    "successText": "#4ade80",
    "warningText": "#fbbf24",
    "dangerText": "#f87171",
    "infoText": "#38bdf8",
    "link": "#8fa8f5"
  },
  "css": "[data-noodle=\"mixian\"] {\n  --mn-bg: light-dark(#f8f6f1, #12110f);\n  --mn-surface: light-dark(#ffffff, #1a1916);\n  --mn-surface-2: light-dark(#efece5, #24221e);\n  --mn-fg: light-dark(#1c1b19, #f3f0ea);\n  --mn-muted: light-dark(#625e57, #aaa398);\n  --mn-border: light-dark(#e6e1d8, #302d28);\n  --mn-input: light-dark(#cfc8bc, #48443c);\n  --mn-primary: light-dark(#1f3fa6, #8fa8f5);\n  --mn-primary-fg: light-dark(#ffffff, #0b1433);\n  --mn-secondary: light-dark(#efece5, #24221e);\n  --mn-secondary-fg: light-dark(#1c1b19, #f3f0ea);\n  --mn-accent: light-dark(#b3541e, #f0a070);\n  --mn-accent-fg: light-dark(#ffffff, #2a1204);\n  --mn-ring: light-dark(#1f3fa6, #8fa8f5);\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(#1f3fa6, #8fa8f5);\n  --mn-secondary-text: light-dark(#706f6b, #878580);\n  --mn-accent-text: light-dark(#a74f1e, #f0a070);\n  --mn-success-text: light-dark(#16783a, #4ade80);\n  --mn-warning-text: light-dark(#a84f0a, #fbbf24);\n  --mn-danger-text: light-dark(#c52524, #f87171);\n  --mn-info-text: light-dark(#0369a1, #38bdf8);\n  --mn-link: light-dark(#1f3fa6, #8fa8f5);\n  --mn-font: ui-rounded, \"SF Pro Rounded\", \"Nunito\", ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif;\n  --mn-font-heading: ui-rounded, \"SF Pro Rounded\", \"Nunito\", ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif;\n  --mn-font-mono: ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace;\n  --mn-heading-weight: 650;\n  --mn-radius-field: 999px;\n  --mn-radius-box: 28px;\n  --mn-radius-badge: 999px;\n  --mn-shadow-sm: 0 1px 3px rgb(0 0 0 / .08);\n  --mn-shadow-md: 0 4px 14px -4px rgb(0 0 0 / .12), 0 2px 4px -2px rgb(0 0 0 / .06);\n  --mn-shadow-lg: 0 20px 48px -12px rgb(0 0 0 / .25), 0 8px 16px -8px rgb(0 0 0 / .10);\n  --mn-size-xs: 28px;\n  --mn-size-sm: 34px;\n  --mn-size-md: 42px;\n  --mn-size-lg: 50px;\n  --mn-text-sm: 15px;\n  --mn-surface-alpha: 100%;\n  --mn-backdrop: none;\n  --mn-bg-image: none;\n}\n"
}