{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "misua",
  "name": "Misua",
  "family": "Thin",
  "origin": "China · Fujian",
  "tagline": "Finest thread, never cut.",
  "description": "Misua (mee sua) is one of the finest wheat noodles there is, stretched by hand into threads and eaten on birthdays as longevity noodles, the longer and more unbroken, the better. Misua is a thread-thin system in which long, unbroken lines run through and between components, drawn slowly, with a red longevity thread for what matters.",
  "inspiration": [
    "Threads finer than a hair → 1px lines and light type throughout",
    "Longevity: never cut → lines continue from one element to the next: list items, steps and tabs are strung on one thread",
    "Stretched slowly by hand → lines draw themselves from start to end",
    "A red thread for birthdays → a thin red thread marks progress, selection and focus"
  ],
  "traits": {
    "mood": [
      "fine",
      "continuous",
      "celebratory",
      "gentle",
      "thread-like"
    ],
    "intensity": 2,
    "contrast": "medium",
    "geometry": "one continuous thread",
    "type": "light sans",
    "surface": "thread lines, a red accent",
    "motion": "drawn lines",
    "goodFor": [
      "events",
      "weddings",
      "cultural sites",
      "timelines"
    ],
    "lessFor": [
      "dense admin"
    ],
    "density": "default"
  },
  "license": "LicenseRef-MIAN-1.0",
  "designLanguage": {
    "essence": "Misua is the finest thread, and it must never be cut: it is eaten for long life, and the longer the strand, the better. The interface is drawn in 1px threads that run on from one thing to the next, list items strung on a vertical thread, steps on a horizontal one, tabs on a shared line, and draw themselves slowly. A red longevity thread marks progress, selection and focus.",
    "principles": [
      "1px threads and light (300–400) type.",
      "Continuity: connect related elements with one unbroken thread instead of separate borders.",
      "The red thread marks what matters: focus, selection, progress, highlights.",
      "Beads on threads: knobs, points and markers are small circles on a line.",
      "Slow drawing: lines grow over 400–900ms (scaleX/scaleY from the start)."
    ],
    "aspects": {
      "Shape": "4px fields, 6px containers, round beads for knobs and markers.",
      "Surface": "Warm paper with thread-coloured (fg at 22%) 1px edges; no shadows.",
      "Colour": "Ink and paper; a red thread accent.",
      "Type": "Book serif headings at 400; light sans body; tracked uppercase table headers.",
      "Motion": "misua-in: slow fade 500ms; threads draw with misua-draw / misua-draw-y.",
      "Data": "Each bar is a single thread topped with a bead; 1px lines with small points; a 3px donut ring."
    },
    "extend": [
      "Separate and connect with 1px var(--ms-thread); if two items belong together, let one line run through both.",
      "Mark the current item with a 1px red thread (inset box-shadow or ::after) and draw it in with scaleX.",
      "Use a 6–7px bead (circle) as the knob or marker on any thread."
    ],
    "avoid": [
      "Lines thicker than 1px",
      "Broken, dashed or segmented lines",
      "Filled blocks of colour",
      "Quick snaps"
    ],
    "recipe": "[data-noodle=\"misua\"] .tile { position: relative; padding: 12px 0 12px 28px; border: 0; background: none; font-weight: 400; }\n[data-noodle=\"misua\"] .tile::before { content: \"\"; position: absolute; left: 12px; top: 0; bottom: 0; width: 1px; background: var(--ms-thread); }\n[data-noodle=\"misua\"] .tile::after { content: \"\"; position: absolute; left: 9.5px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--mn-bg); box-shadow: inset 0 0 0 1px var(--mn-fg); }\n[data-noodle=\"misua\"] .tile[aria-selected=\"true\"]::after { background: var(--mn-accent); box-shadow: none; }"
  },
  "psychology": {
    "temperature": "warm",
    "colours": [
      {
        "role": "Primary",
        "hex": "#1f1b16",
        "family": "Brown and terracotta",
        "depth": "deep, muted",
        "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": "#b3261e",
        "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": "Page",
        "hex": "#fbf9f5",
        "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 with its neighbour red: an analogous pair, harmonious and natural.",
    "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": 400,
      "summary": "Two voices: book serif (old-style and transitional) for headings, neutral sans for the interface. Headings are light to regular, which reads as delicate and unhurried."
    },
    "personality": {
      "reads": [
        "fine",
        "continuous",
        "celebratory",
        "gentle",
        "thread-like"
      ],
      "intensity": 2,
      "dimensions": [],
      "suits": [
        "events",
        "weddings",
        "cultural sites",
        "timelines"
      ],
      "lessFor": [
        "dense admin"
      ],
      "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/misua",
  "markdownUrl": "https://mian.ro/ai/noodles/misua.md",
  "stylesheet": "https://mian.ro/dist/noodles/misua.css",
  "usage": "<html data-noodle=\"misua\">",
  "fonts": {
    "sans": "ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
    "heading": "\"Iowan Old Style\", \"Palatino Linotype\", Palatino, \"Book Antiqua\", ui-serif, Georgia, serif",
    "mono": "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace"
  },
  "headingWeight": 400,
  "radius": {
    "field": "4px",
    "box": "6px",
    "badge": "999px"
  },
  "shadow": "none",
  "density": "default",
  "glass": false,
  "light": {
    "bg": "#fbf9f5",
    "surface": "#ffffff",
    "surface2": "#f3efe7",
    "fg": "#1f1b16",
    "muted": "#6a6258",
    "border": "#e6dfd3",
    "input": "#c9bfae",
    "primary": "#1f1b16",
    "primaryFg": "#fbf9f5",
    "secondary": "#f3efe7",
    "secondaryFg": "#1f1b16",
    "accent": "#b3261e",
    "accentFg": "#ffffff",
    "ring": "#b3261e",
    "success": "#15803d",
    "successFg": "#ffffff",
    "warning": "#b45309",
    "warningFg": "#ffffff",
    "danger": "#dc2626",
    "dangerFg": "#ffffff",
    "info": "#0369a1",
    "infoFg": "#ffffff",
    "primaryText": "#1f1b16",
    "secondaryText": "#74706a",
    "accentText": "#b3261e",
    "successText": "#16783a",
    "warningText": "#a84f0a",
    "dangerText": "#c52524",
    "infoText": "#0369a1",
    "link": "#1f1b16"
  },
  "dark": {
    "bg": "#12100d",
    "surface": "#191612",
    "surface2": "#231f1a",
    "fg": "#f1ece3",
    "muted": "#a99f91",
    "border": "#302a23",
    "input": "#4a4238",
    "primary": "#f1ece3",
    "primaryFg": "#1f1b16",
    "secondary": "#231f1a",
    "secondaryFg": "#f1ece3",
    "accent": "#ff7b6e",
    "accentFg": "#2a0603",
    "ring": "#ff7b6e",
    "success": "#4ade80",
    "successFg": "#052e16",
    "warning": "#fbbf24",
    "warningFg": "#1f1300",
    "danger": "#f87171",
    "dangerFg": "#210505",
    "info": "#38bdf8",
    "infoFg": "#03202d",
    "primaryText": "#f1ece3",
    "secondaryText": "#86817a",
    "accentText": "#ff7b6e",
    "successText": "#4ade80",
    "warningText": "#fbbf24",
    "dangerText": "#f87171",
    "infoText": "#38bdf8",
    "link": "#f1ece3"
  },
  "css": "[data-noodle=\"misua\"] {\n  --mn-bg: light-dark(#fbf9f5, #12100d);\n  --mn-surface: light-dark(#ffffff, #191612);\n  --mn-surface-2: light-dark(#f3efe7, #231f1a);\n  --mn-fg: light-dark(#1f1b16, #f1ece3);\n  --mn-muted: light-dark(#6a6258, #a99f91);\n  --mn-border: light-dark(#e6dfd3, #302a23);\n  --mn-input: light-dark(#c9bfae, #4a4238);\n  --mn-primary: light-dark(#1f1b16, #f1ece3);\n  --mn-primary-fg: light-dark(#fbf9f5, #1f1b16);\n  --mn-secondary: light-dark(#f3efe7, #231f1a);\n  --mn-secondary-fg: light-dark(#1f1b16, #f1ece3);\n  --mn-accent: light-dark(#b3261e, #ff7b6e);\n  --mn-accent-fg: light-dark(#ffffff, #2a0603);\n  --mn-ring: light-dark(#b3261e, #ff7b6e);\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(#1f1b16, #f1ece3);\n  --mn-secondary-text: light-dark(#74706a, #86817a);\n  --mn-accent-text: light-dark(#b3261e, #ff7b6e);\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(#1f1b16, #f1ece3);\n  --mn-font: ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n  --mn-font-heading: \"Iowan Old Style\", \"Palatino Linotype\", Palatino, \"Book Antiqua\", ui-serif, Georgia, serif;\n  --mn-font-mono: ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace;\n  --mn-heading-weight: 400;\n  --mn-radius-field: 4px;\n  --mn-radius-box: 6px;\n  --mn-radius-badge: 999px;\n  --mn-shadow-sm: none;\n  --mn-shadow-md: none;\n  --mn-shadow-lg: none;\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"
}