{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "udon",
  "name": "Udon",
  "family": "Rounded",
  "origin": "Japan",
  "tagline": "Thick, soft, warm.",
  "description": "Cream surfaces, generous rounding and a terracotta primary. Comfortable density and soft depth for friendly, tactile products.",
  "inspiration": [
    "Thick and chewy → controls with a visible 5px \"thickness\" edge that compresses when pressed",
    "Soft and springy → squash-and-stretch press and release",
    "Glossy in broth → a soft top highlight on every raised surface",
    "Chunky → fat bars, fat rings, fat switch knobs, generous rounding"
  ],
  "traits": {
    "mood": [
      "warm",
      "friendly",
      "soft",
      "tactile",
      "cosy"
    ],
    "intensity": 2,
    "contrast": "medium",
    "geometry": "generous rounding",
    "type": "rounded sans",
    "surface": "cream, soft depth",
    "motion": "soft",
    "goodFor": [
      "consumer products",
      "food",
      "home",
      "onboarding"
    ],
    "lessFor": [
      "enterprise data",
      "legal"
    ],
    "density": "comfortable"
  },
  "license": "LicenseRef-MIAN-1.0",
  "designLanguage": {
    "essence": "Udon is thick, soft and chewy, glossy in hot broth. The language is tactile: raised controls have a visible thickness that compresses when pressed and springs back, everything is plump and generously rounded, and data is drawn with fat, friendly marks. It should feel good to press.",
    "principles": [
      "Thickness is real: raised elements carry a 5px darker bottom edge (--_edge) that shrinks when pressed.",
      "Squash and stretch: presses squish, releases spring back with overshoot.",
      "Plump over thin: fat rings, fat bars, pillow knobs, chunky separated table rows.",
      "Warm and glossy: cream surfaces and a soft highlight on the top of raised things."
    ],
    "aspects": {
      "Shape": "12px fields, 18px containers, pill badges. Knobs and thumbs are large pillows.",
      "Surface": "Cream page, white raised surfaces with the thickness edge and an inset top highlight (rgb(255 255 255/.28)).",
      "Colour": "Terracotta primary, teal accent, warm browns and creams.",
      "Type": "Rounded sans, bold headings.",
      "Motion": "udon-squish entrance with overshoot (cubic-bezier(.34,1.4,.64,1)), 320ms; knobs squish on toggle.",
      "Data": "Pill-ended bars with 10px gaps, 7px lines with points, thick donuts."
    },
    "extend": [
      "Raise the component: box-shadow 0 5px 0 var(--_edge) where --_edge is the fill mixed 25% with black; translate it up 3px on hover and down 4px on press while the edge shrinks.",
      "Use the rounded font and radius 12–18px.",
      "Selected = filled with the primary and its edge; unselected = white with a border-coloured edge."
    ],
    "avoid": [
      "Hairlines",
      "Sharp corners",
      "Flat, weightless presses",
      "Thin chart marks"
    ],
    "recipe": "[data-noodle=\"udon\"] .tile {\n  --_edge: color-mix(in oklab, var(--mn-border), #000 12%);\n  padding: 14px 16px; border-radius: 16px; background: var(--mn-surface);\n  box-shadow: 0 5px 0 var(--_edge), inset 0 2px 0 rgb(255 255 255 / .28);\n  transition: translate 180ms cubic-bezier(.34, 1.56, .64, 1), box-shadow 180ms;\n}\n[data-noodle=\"udon\"] .tile:hover { translate: 0 -3px; box-shadow: 0 8px 0 var(--_edge); }\n[data-noodle=\"udon\"] .tile:active { translate: 0 4px; box-shadow: 0 1px 0 var(--_edge); }"
  },
  "psychology": {
    "temperature": "warm",
    "colours": [
      {
        "role": "Primary",
        "hex": "#c2410c",
        "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": "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": "#faf7f2",
        "family": "White and paper",
        "depth": "pale",
        "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": "Brown and terracotta against teal and cyan, 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": [
        "warm",
        "friendly",
        "soft",
        "tactile",
        "cosy"
      ],
      "intensity": 2,
      "dimensions": [
        "Sincerity"
      ],
      "suits": [
        "consumer products",
        "food",
        "home",
        "onboarding"
      ],
      "lessFor": [
        "enterprise data",
        "legal"
      ],
      "tone": "Calm and clear. Short sentences, one idea each, a friendly but not chatty register."
    },
    "logo": "A simple geometric mark with slightly softened corners fits; avoid both hard spikes and full circles."
  },
  "url": "https://mian.ro/noodles/udon",
  "markdownUrl": "https://mian.ro/ai/noodles/udon.md",
  "stylesheet": "https://mian.ro/dist/noodles/udon.css",
  "usage": "<html data-noodle=\"udon\">",
  "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": "12px",
    "box": "18px",
    "badge": "999px"
  },
  "shadow": "soft",
  "density": "comfortable",
  "glass": false,
  "light": {
    "bg": "#faf7f2",
    "surface": "#ffffff",
    "surface2": "#f1ebe1",
    "fg": "#2b2520",
    "muted": "#6c6257",
    "border": "#e8e0d4",
    "input": "#d6cbbb",
    "primary": "#c2410c",
    "primaryFg": "#ffffff",
    "secondary": "#f1ebe1",
    "secondaryFg": "#2b2520",
    "accent": "#0f766e",
    "accentFg": "#ffffff",
    "ring": "#c2410c",
    "success": "#15803d",
    "successFg": "#ffffff",
    "warning": "#b45309",
    "warningFg": "#ffffff",
    "danger": "#dc2626",
    "dangerFg": "#ffffff",
    "info": "#0369a1",
    "infoFg": "#ffffff",
    "primaryText": "#b93f0d",
    "secondaryText": "#767069",
    "accentText": "#0f766e",
    "successText": "#17793b",
    "warningText": "#a94f0b",
    "dangerText": "#c72625",
    "infoText": "#0369a1",
    "link": "#c2410c"
  },
  "dark": {
    "bg": "#1a1612",
    "surface": "#221d18",
    "surface2": "#2d2620",
    "fg": "#f5efe6",
    "muted": "#b3a795",
    "border": "#3a322a",
    "input": "#4d4338",
    "primary": "#fb923c",
    "primaryFg": "#1a0d03",
    "secondary": "#2d2620",
    "secondaryFg": "#f5efe6",
    "accent": "#2dd4bf",
    "accentFg": "#042f2c",
    "ring": "#fb923c",
    "success": "#4ade80",
    "successFg": "#052e16",
    "warning": "#fbbf24",
    "warningFg": "#1f1300",
    "danger": "#f87171",
    "dangerFg": "#210505",
    "info": "#38bdf8",
    "infoFg": "#03202d",
    "primaryText": "#fb923c",
    "secondaryText": "#8d867f",
    "accentText": "#2dd4bf",
    "successText": "#4ade80",
    "warningText": "#fbbf24",
    "dangerText": "#f87171",
    "infoText": "#38bdf8",
    "link": "#fb923c"
  },
  "css": "[data-noodle=\"udon\"] {\n  --mn-bg: light-dark(#faf7f2, #1a1612);\n  --mn-surface: light-dark(#ffffff, #221d18);\n  --mn-surface-2: light-dark(#f1ebe1, #2d2620);\n  --mn-fg: light-dark(#2b2520, #f5efe6);\n  --mn-muted: light-dark(#6c6257, #b3a795);\n  --mn-border: light-dark(#e8e0d4, #3a322a);\n  --mn-input: light-dark(#d6cbbb, #4d4338);\n  --mn-primary: light-dark(#c2410c, #fb923c);\n  --mn-primary-fg: light-dark(#ffffff, #1a0d03);\n  --mn-secondary: light-dark(#f1ebe1, #2d2620);\n  --mn-secondary-fg: light-dark(#2b2520, #f5efe6);\n  --mn-accent: light-dark(#0f766e, #2dd4bf);\n  --mn-accent-fg: light-dark(#ffffff, #042f2c);\n  --mn-ring: light-dark(#c2410c, #fb923c);\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(#b93f0d, #fb923c);\n  --mn-secondary-text: light-dark(#767069, #8d867f);\n  --mn-accent-text: light-dark(#0f766e, #2dd4bf);\n  --mn-success-text: light-dark(#17793b, #4ade80);\n  --mn-warning-text: light-dark(#a94f0b, #fbbf24);\n  --mn-danger-text: light-dark(#c72625, #f87171);\n  --mn-info-text: light-dark(#0369a1, #38bdf8);\n  --mn-link: light-dark(#c2410c, #fb923c);\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: 12px;\n  --mn-radius-box: 18px;\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"
}