{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "mee",
  "name": "Mee",
  "family": "Rounded",
  "origin": "Malaysia · egg noodles",
  "tagline": "Golden, round, cheerful.",
  "description": "Egg-yolk yellow, pill-shaped controls, rounded type and big friendly corners. Consumer apps, kids, onboarding.",
  "inspiration": [
    "Yellow egg noodles → golden gradient fills",
    "Wok-fried → a toasted, charred bottom edge on raised controls",
    "Round and springy → pill shapes and round charts",
    "Sizzle → a quick wiggle when things are pressed or appear"
  ],
  "traits": {
    "mood": [
      "cheerful",
      "golden",
      "playful",
      "bright",
      "kid-friendly"
    ],
    "intensity": 3,
    "contrast": "medium",
    "geometry": "pills and big corners",
    "type": "rounded sans",
    "surface": "egg-yolk yellow",
    "motion": "bouncy",
    "goodFor": [
      "kids",
      "education",
      "consumer apps",
      "onboarding"
    ],
    "lessFor": [
      "finance",
      "luxury"
    ],
    "density": "comfortable"
  },
  "license": "LicenseRef-MIAN-1.0",
  "designLanguage": {
    "essence": "Mee is yellow egg noodles tossed in a hot wok. The language is golden and cheerful: rich gradient fills, a toasted, charred bottom edge on raised things, fully round pills and pies, and a quick sizzle wiggle when something is pressed or appears.",
    "principles": [
      "Golden gradients on primary surfaces (lighter at the top).",
      "A toasted edge: inset 0 -3px 0 var(--m-char) on raised controls.",
      "Round everything: pill buttons, pill tables rows, full pie charts.",
      "Sizzle: a quick wiggle on hover and on entry."
    ],
    "aspects": {
      "Shape": "999px fields and badges, 22px containers.",
      "Surface": "Warm cream with golden fills and charred edges.",
      "Colour": "Egg-yolk yellow primary, teal accent, warm neutrals.",
      "Type": "Rounded sans, bold.",
      "Motion": "mee-pop: pop in with overshoot, 300ms; mee-sizzle wiggle on hover.",
      "Data": "Pill bars, 4px lines with a warm area, a full pie instead of a ring."
    },
    "extend": [
      "Fill with linear-gradient(180deg, color-mix(in oklab, var(--mn-primary), #fff 20%), var(--mn-primary)) and add the charred inset edge.",
      "Use radius 999px for anything under 48px tall.",
      "Hover: animation mee-sizzle 360ms."
    ],
    "avoid": [
      "Cold greys",
      "Square corners",
      "Flat single-colour fills on primary elements"
    ],
    "recipe": "[data-noodle=\"mee\"] .tile {\n  padding: 12px 20px; border: 0; border-radius: 999px;\n  background: var(--mn-surface); box-shadow: inset 0 -3px 0 var(--m-char);\n}\n[data-noodle=\"mee\"] .tile[aria-selected=\"true\"] { background: linear-gradient(180deg, color-mix(in oklab, var(--mn-primary), #fff 20%), var(--mn-primary)); color: var(--mn-primary-fg); }\n[data-noodle=\"mee\"] .tile:hover { animation: mee-sizzle 360ms ease-in-out; }"
  },
  "psychology": {
    "temperature": "warm",
    "colours": [
      {
        "role": "Primary",
        "hex": "#eab308",
        "family": "Yellow and gold",
        "depth": "mid, saturated",
        "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."
      },
      {
        "role": "Accent",
        "hex": "#0f766e",
        "family": "Teal and cyan",
        "depth": "deep, saturated",
        "says": "Clarity, cleanliness, calm technology. Cooler than green, softer than blue.",
        "use": "Health tech, wellness, productivity tools, water and travel.",
        "risk": "Very common in medical and SaaS products, so it needs a distinctive neutral or typeface to be remembered."
      },
      {
        "role": "Page",
        "hex": "#fffdf5",
        "family": "White and paper",
        "depth": "pale, saturated",
        "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": "Yellow and gold with teal and cyan: a contrasting pair that needs one of the two to dominate.",
    "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": [
        "cheerful",
        "golden",
        "playful",
        "bright",
        "kid-friendly"
      ],
      "intensity": 3,
      "dimensions": [],
      "suits": [
        "kids",
        "education",
        "consumer apps",
        "onboarding"
      ],
      "lessFor": [
        "finance",
        "luxury"
      ],
      "tone": "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."
  },
  "url": "https://mian.ro/noodles/mee",
  "markdownUrl": "https://mian.ro/ai/noodles/mee.md",
  "stylesheet": "https://mian.ro/dist/noodles/mee.css",
  "usage": "<html data-noodle=\"mee\">",
  "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": "22px",
    "badge": "999px"
  },
  "shadow": "soft",
  "density": "comfortable",
  "glass": false,
  "light": {
    "bg": "#fffdf5",
    "surface": "#ffffff",
    "surface2": "#fbf3dc",
    "fg": "#231c05",
    "muted": "#6b6030",
    "border": "#efe4c4",
    "input": "#dccb95",
    "primary": "#eab308",
    "primaryFg": "#231c05",
    "secondary": "#231c05",
    "secondaryFg": "#fffdf5",
    "accent": "#0f766e",
    "accentFg": "#ffffff",
    "ring": "#a16207",
    "success": "#15803d",
    "successFg": "#ffffff",
    "warning": "#b45309",
    "warningFg": "#ffffff",
    "danger": "#dc2626",
    "dangerFg": "#ffffff",
    "info": "#0369a1",
    "infoFg": "#ffffff",
    "primaryText": "#8a6b07",
    "secondaryText": "#231c05",
    "accentText": "#0f766e",
    "successText": "#167839",
    "warningText": "#a84f09",
    "dangerText": "#c62522",
    "infoText": "#0369a1",
    "link": "#0f766e"
  },
  "dark": {
    "bg": "#14110a",
    "surface": "#1c180e",
    "surface2": "#272114",
    "fg": "#fbf3dc",
    "muted": "#b8aa7c",
    "border": "#342c1a",
    "input": "#4d4226",
    "primary": "#facc15",
    "primaryFg": "#1c1600",
    "secondary": "#fbf3dc",
    "secondaryFg": "#14110a",
    "accent": "#2dd4bf",
    "accentFg": "#042f2c",
    "ring": "#facc15",
    "success": "#4ade80",
    "successFg": "#052e16",
    "warning": "#fbbf24",
    "warningFg": "#1f1300",
    "danger": "#f87171",
    "dangerFg": "#210505",
    "info": "#38bdf8",
    "infoFg": "#03202d",
    "primaryText": "#facc15",
    "secondaryText": "#fbf3dc",
    "accentText": "#2dd4bf",
    "successText": "#4ade80",
    "warningText": "#fbbf24",
    "dangerText": "#f87171",
    "infoText": "#38bdf8",
    "link": "#facc15"
  },
  "css": "[data-noodle=\"mee\"] {\n  --mn-bg: light-dark(#fffdf5, #14110a);\n  --mn-surface: light-dark(#ffffff, #1c180e);\n  --mn-surface-2: light-dark(#fbf3dc, #272114);\n  --mn-fg: light-dark(#231c05, #fbf3dc);\n  --mn-muted: light-dark(#6b6030, #b8aa7c);\n  --mn-border: light-dark(#efe4c4, #342c1a);\n  --mn-input: light-dark(#dccb95, #4d4226);\n  --mn-primary: light-dark(#eab308, #facc15);\n  --mn-primary-fg: light-dark(#231c05, #1c1600);\n  --mn-secondary: light-dark(#231c05, #fbf3dc);\n  --mn-secondary-fg: light-dark(#fffdf5, #14110a);\n  --mn-accent: light-dark(#0f766e, #2dd4bf);\n  --mn-accent-fg: light-dark(#ffffff, #042f2c);\n  --mn-ring: light-dark(#a16207, #facc15);\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(#8a6b07, #facc15);\n  --mn-secondary-text: light-dark(#231c05, #fbf3dc);\n  --mn-accent-text: light-dark(#0f766e, #2dd4bf);\n  --mn-success-text: light-dark(#167839, #4ade80);\n  --mn-warning-text: light-dark(#a84f09, #fbbf24);\n  --mn-danger-text: light-dark(#c62522, #f87171);\n  --mn-info-text: light-dark(#0369a1, #38bdf8);\n  --mn-link: light-dark(#0f766e, #facc15);\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: 22px;\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"
}