{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "bun",
  "name": "Bún",
  "family": "Thin",
  "origin": "Vietnam · rice vermicelli",
  "tagline": "Delicate, rosy, light.",
  "description": "Rice vermicelli. Rose primary on blush white, teal accent, rounded but refined. Lifestyle, beauty, events.",
  "inspiration": [
    "Thread-thin rice vermicelli → fine double-thread outlines",
    "Served in little nests → concentric rings on focus, avatars and spinners",
    "Tangled → dashed, looping thread dividers",
    "Delicate → light, airy spacing and small, precise motion"
  ],
  "traits": {
    "mood": [
      "rosy",
      "delicate",
      "light",
      "friendly",
      "lifestyle"
    ],
    "intensity": 2,
    "contrast": "low",
    "geometry": "rounded but refined",
    "type": "sans",
    "surface": "blush white",
    "motion": "gentle",
    "goodFor": [
      "beauty",
      "lifestyle",
      "events",
      "salons"
    ],
    "lessFor": [
      "finance",
      "engineering"
    ],
    "density": "default"
  },
  "license": "LicenseRef-MIAN-1.0",
  "designLanguage": {
    "essence": "Bún is thread-thin rice vermicelli, served in small, lightly tangled nests. The language is fine and concentric: double-thread outlines, rings within rings on focus and on avatars, beads on threads for progress and switches, dotted and dashed thread dividers, and nested spinners turning opposite ways.",
    "principles": [
      "Two threads: outlines are a 1px line, a gap, and a second 1px line (layered box-shadows).",
      "Nests: focus and emphasis add concentric rings.",
      "Beads on threads: progress, switches and chart bars are thin threads ending in a bead.",
      "Delicate: thin strokes, rosy light colours."
    ],
    "aspects": {
      "Shape": "Pills and circles; 10px fields, 16px containers.",
      "Surface": "Rosy white, surfaces ringed by a double thread (var(--b-thread)).",
      "Colour": "Rose primary, teal accent.",
      "Type": "Delicate serif-like headings, light body.",
      "Motion": "bun-in: a slight twist and scale, 220ms; focus rings expand outward (bun-nest).",
      "Data": "Thread bars topped with a nest ring, beaded progress, doubled line shadows, ringed donuts."
    },
    "extend": [
      "Outline with box-shadow: 0 0 0 1px var(--mn-border), 0 0 0 4px var(--mn-bg), 0 0 0 5px var(--mn-border).",
      "Emphasise with an extra outer ring in the primary at 45%.",
      "Show quantities as a 1.5–2px thread with a round bead at the end."
    ],
    "avoid": [
      "Thick fills",
      "Heavy shadows",
      "Square corners"
    ],
    "recipe": "[data-noodle=\"bun\"] .tile {\n  padding: 12px 16px; border: 1px solid var(--mn-border); border-radius: 16px; background: var(--mn-surface);\n  box-shadow: 0 0 0 4px var(--mn-bg), 0 0 0 5px var(--mn-border);\n}\n[data-noodle=\"bun\"] .tile[aria-selected=\"true\"] { box-shadow: 0 0 0 2px var(--mn-bg), 0 0 0 3px var(--mn-primary), 0 0 0 5px var(--mn-bg), 0 0 0 6px color-mix(in oklab, var(--mn-primary) 45%, transparent); }"
  },
  "psychology": {
    "temperature": "warm",
    "colours": [
      {
        "role": "Primary",
        "hex": "#e11d48",
        "family": "Red",
        "depth": "mid, saturated",
        "says": "Urgency, energy, appetite, danger. It raises attention faster than any other hue and reads as the most forceful.",
        "use": "One action that must be seen, sale and limited-time states, food, sport, entertainment.",
        "risk": "It is also the colour of errors. A red primary button next to a red error message makes both ambiguous, so pair a red brand with a distinct danger treatment (icon and words)."
      },
      {
        "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": "#fffafa",
        "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": "Red against teal and cyan, close to complementary: strong contrast, so the accent must stay rare.",
    "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": "serif",
        "name": "Book serif (old-style and transitional)",
        "says": "Considered, literate, established. The voice of books and long reading.",
        "use": "Editorial, publishing, research, thoughtful products, quotations.",
        "risk": "Needs size and good line spacing on screens; small serif text on low-resolution displays gets muddy."
      },
      "weight": 650,
      "summary": "Two voices: book serif (old-style and transitional) for headings, neutral sans for the interface. Headings are semibold, which reads as confident without shouting."
    },
    "personality": {
      "reads": [
        "rosy",
        "delicate",
        "light",
        "friendly",
        "lifestyle"
      ],
      "intensity": 2,
      "dimensions": [],
      "suits": [
        "beauty",
        "lifestyle",
        "events",
        "salons"
      ],
      "lessFor": [
        "finance",
        "engineering"
      ],
      "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. Set the wordmark in a serif to match the headings."
  },
  "url": "https://mian.ro/noodles/bun",
  "markdownUrl": "https://mian.ro/ai/noodles/bun.md",
  "stylesheet": "https://mian.ro/dist/noodles/bun.css",
  "usage": "<html data-noodle=\"bun\">",
  "fonts": {
    "sans": "ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
    "heading": "ui-serif, \"New York\", \"Iowan Old Style\", \"Palatino Linotype\", Georgia, serif",
    "mono": "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace"
  },
  "headingWeight": 650,
  "radius": {
    "field": "10px",
    "box": "16px",
    "badge": "999px"
  },
  "shadow": "subtle",
  "density": "default",
  "glass": false,
  "light": {
    "bg": "#fffafa",
    "surface": "#ffffff",
    "surface2": "#fcefef",
    "fg": "#2a1215",
    "muted": "#6e5156",
    "border": "#f3dfe1",
    "input": "#e3c2c7",
    "primary": "#e11d48",
    "primaryFg": "#ffffff",
    "secondary": "#fde8ea",
    "secondaryFg": "#881337",
    "accent": "#0f766e",
    "accentFg": "#ffffff",
    "ring": "#e11d48",
    "success": "#15803d",
    "successFg": "#ffffff",
    "warning": "#b45309",
    "warningFg": "#ffffff",
    "danger": "#dc2626",
    "dangerFg": "#ffffff",
    "info": "#0369a1",
    "infoFg": "#ffffff",
    "primaryText": "#c71b41",
    "secondaryText": "#836c6e",
    "accentText": "#0f766e",
    "successText": "#16793b",
    "warningText": "#a94e0a",
    "dangerText": "#c72424",
    "infoText": "#0369a1",
    "link": "#e11d48"
  },
  "dark": {
    "bg": "#170b0d",
    "surface": "#1f0f12",
    "surface2": "#2b161a",
    "fg": "#fcecee",
    "muted": "#c09aa0",
    "border": "#3a1f24",
    "input": "#55303a",
    "primary": "#fb7185",
    "primaryFg": "#2a0610",
    "secondary": "#2b161a",
    "secondaryFg": "#fcecee",
    "accent": "#2dd4bf",
    "accentFg": "#042f2c",
    "ring": "#fb7185",
    "success": "#4ade80",
    "successFg": "#052e16",
    "warning": "#fbbf24",
    "warningFg": "#1f1300",
    "danger": "#f87171",
    "dangerFg": "#210505",
    "info": "#38bdf8",
    "infoFg": "#03202d",
    "primaryText": "#fb7185",
    "secondaryText": "#8f7d80",
    "accentText": "#2dd4bf",
    "successText": "#4ade80",
    "warningText": "#fbbf24",
    "dangerText": "#f87171",
    "infoText": "#38bdf8",
    "link": "#fb7185"
  },
  "css": "[data-noodle=\"bun\"] {\n  --mn-bg: light-dark(#fffafa, #170b0d);\n  --mn-surface: light-dark(#ffffff, #1f0f12);\n  --mn-surface-2: light-dark(#fcefef, #2b161a);\n  --mn-fg: light-dark(#2a1215, #fcecee);\n  --mn-muted: light-dark(#6e5156, #c09aa0);\n  --mn-border: light-dark(#f3dfe1, #3a1f24);\n  --mn-input: light-dark(#e3c2c7, #55303a);\n  --mn-primary: light-dark(#e11d48, #fb7185);\n  --mn-primary-fg: light-dark(#ffffff, #2a0610);\n  --mn-secondary: light-dark(#fde8ea, #2b161a);\n  --mn-secondary-fg: light-dark(#881337, #fcecee);\n  --mn-accent: light-dark(#0f766e, #2dd4bf);\n  --mn-accent-fg: light-dark(#ffffff, #042f2c);\n  --mn-ring: light-dark(#e11d48, #fb7185);\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(#c71b41, #fb7185);\n  --mn-secondary-text: light-dark(#836c6e, #8f7d80);\n  --mn-accent-text: light-dark(#0f766e, #2dd4bf);\n  --mn-success-text: light-dark(#16793b, #4ade80);\n  --mn-warning-text: light-dark(#a94e0a, #fbbf24);\n  --mn-danger-text: light-dark(#c72424, #f87171);\n  --mn-info-text: light-dark(#0369a1, #38bdf8);\n  --mn-link: light-dark(#e11d48, #fb7185);\n  --mn-font: ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n  --mn-font-heading: ui-serif, \"New York\", \"Iowan Old Style\", \"Palatino Linotype\", Georgia, 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: 10px;\n  --mn-radius-box: 16px;\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"
}