{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "hiyamugi",
  "name": "Hiyamugi",
  "family": "Minimal",
  "origin": "Japan",
  "tagline": "White, cold, one coloured strand.",
  "description": "Hiyamugi are white wheat noodles served cold, a bundle at a time; a few pink and green strands are mixed into every bundle. Hiyamugi is a quiet white system in which exactly one coloured strand marks what matters.",
  "inspiration": [
    "A bundle of white strands → a calm white-and-grey interface with generous space",
    "One pink strand in the bundle → a single 2px coloured line marks the active, focused or important thing, never more than one per component",
    "Pink and green strands → the pink strand for action, the green for success and a second series",
    "Served cold and still → slow, gentle motion; strands are laid across from the left"
  ],
  "traits": {
    "mood": [
      "quiet",
      "white",
      "fresh",
      "delicate",
      "japanese",
      "minimal"
    ],
    "intensity": 1,
    "contrast": "medium",
    "geometry": "small radius, lots of white",
    "type": "clean sans",
    "surface": "white with one coloured strand",
    "motion": "subtle",
    "goodFor": [
      "studios",
      "product sites",
      "portfolios",
      "minimal shops"
    ],
    "lessFor": [
      "loud campaigns"
    ],
    "density": "comfortable"
  },
  "license": "LicenseRef-MIAN-1.0",
  "designLanguage": {
    "essence": "Hiyamugi is a quiet white bundle with one coloured strand in it. The interface is almost entirely white, grey and charcoal; in each component, exactly one thin coloured line, the strand, marks what matters: the focused field, the active tab, the primary action, the current value. The restraint is the design: if everything had a strand, nothing would.",
    "principles": [
      "One strand per component: a 2px line in the accent (pink), or green for success and a second series.",
      "Everything else is neutral: white surfaces, 1px light borders, charcoal type.",
      "Space over structure: comfortable density, generous padding, few lines.",
      "Strands are laid, not faded: they draw in from the left (scaleX) over ~300–600ms."
    ],
    "aspects": {
      "Shape": "8px fields, 12px containers, 6px badges. Thin bars (≤10px wide) in charts.",
      "Surface": "White with 1px #e8e8e6 borders; a short strand (2.5rem × 2px) lies across the top edge of each card.",
      "Colour": "Charcoal primary, a pink strand (accent), a green strand (success). Nothing else is coloured.",
      "Type": "Clean sans, headings at 500 with slight negative tracking.",
      "Motion": "hiyamugi-in: 4px rise and fade, 320ms; hiyamugi-lay draws strands from the left.",
      "Data": "Grey strand-thin bars with a pink highlight; 1.5px lines; thin donut rings."
    },
    "extend": [
      "Build the component in white and grey first. Then decide which single element matters and give only it the strand: box-shadow: inset 0 -2px 0 var(--mn-accent) (or a 2px ::before line).",
      "On hover, quiet elements may show the strand temporarily.",
      "Use the green strand (var(--mn-success)) only for success or a second data series."
    ],
    "avoid": [
      "More than one strand in a component",
      "Coloured fills",
      "Heavy borders or shadows",
      "Dense layouts"
    ],
    "recipe": "[data-noodle=\"hiyamugi\"] .tile {\n  padding: 16px 18px; border: 1px solid var(--mn-border); border-radius: 12px; background: var(--mn-surface);\n  transition: box-shadow 300ms cubic-bezier(.25, .1, .25, 1);\n}\n[data-noodle=\"hiyamugi\"] .tile:hover,\n[data-noodle=\"hiyamugi\"] .tile[aria-selected=\"true\"] { box-shadow: inset 0 -2px 0 var(--mn-accent); }"
  },
  "psychology": {
    "temperature": "neutral",
    "colours": [
      {
        "role": "Primary",
        "hex": "#1b1b1d",
        "family": "Black and ink",
        "depth": "deep, muted",
        "says": "Authority, precision, luxury. It makes everything next to it look more deliberate.",
        "use": "Fashion, editorial, developer tools, any brand that will let its content be the colour.",
        "risk": "Pure #000 on pure #fff is harsh on long text. Soften one of the two slightly, or warm both."
      },
      {
        "role": "Accent",
        "hex": "#c92a63",
        "family": "Magenta and pink",
        "depth": "mid",
        "says": "Play, tenderness, boldness. Pale pinks are gentle; hot magenta is loud and modern.",
        "use": "Beauty, fashion, confectionery, youth brands, a single loud accent.",
        "risk": "Heavily gendered in some markets; test with the real audience instead of assuming."
      },
      {
        "role": "Page",
        "hex": "#fbfbfa",
        "family": "White and paper",
        "depth": "pale, muted",
        "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": "A neutral primary with one magenta and pink accent: the accent means “look here” precisely because nothing else is coloured.",
    "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": "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."
      },
      "weight": 500,
      "summary": "One voice throughout: neutral sans. Headings are medium, which reads as calm and assured."
    },
    "personality": {
      "reads": [
        "quiet",
        "white",
        "fresh",
        "delicate",
        "japanese"
      ],
      "intensity": 1,
      "dimensions": [],
      "suits": [
        "studios",
        "product sites",
        "portfolios",
        "minimal shops"
      ],
      "lessFor": [
        "loud campaigns"
      ],
      "tone": "Quiet. Plain statements in sentence case, no exclamation marks, numbers with their units. Let space do the persuading."
    },
    "logo": "A simple geometric mark with slightly softened corners fits; avoid both hard spikes and full circles."
  },
  "url": "https://mian.ro/noodles/hiyamugi",
  "markdownUrl": "https://mian.ro/ai/noodles/hiyamugi.md",
  "stylesheet": "https://mian.ro/dist/noodles/hiyamugi.css",
  "usage": "<html data-noodle=\"hiyamugi\">",
  "fonts": {
    "sans": "ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
    "heading": "ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
    "mono": "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace"
  },
  "headingWeight": 500,
  "radius": {
    "field": "8px",
    "box": "12px",
    "badge": "6px"
  },
  "shadow": "subtle",
  "density": "comfortable",
  "glass": false,
  "light": {
    "bg": "#fbfbfa",
    "surface": "#ffffff",
    "surface2": "#f3f3f2",
    "fg": "#1b1b1d",
    "muted": "#616166",
    "border": "#e8e8e6",
    "input": "#d3d3d1",
    "primary": "#1b1b1d",
    "primaryFg": "#ffffff",
    "secondary": "#f3f3f2",
    "secondaryFg": "#1b1b1d",
    "accent": "#c92a63",
    "accentFg": "#ffffff",
    "ring": "#c92a63",
    "success": "#15803d",
    "successFg": "#ffffff",
    "warning": "#b45309",
    "warningFg": "#ffffff",
    "danger": "#dc2626",
    "dangerFg": "#ffffff",
    "info": "#0369a1",
    "infoFg": "#ffffff",
    "primaryText": "#1b1b1d",
    "secondaryText": "#717172",
    "accentText": "#bf295f",
    "successText": "#15783a",
    "warningText": "#a84f0b",
    "dangerText": "#c52525",
    "infoText": "#0369a1",
    "link": "#1b1b1d"
  },
  "dark": {
    "bg": "#0e0e10",
    "surface": "#161618",
    "surface2": "#1f1f22",
    "fg": "#f4f4f5",
    "muted": "#a1a1a8",
    "border": "#2a2a2e",
    "input": "#44444a",
    "primary": "#f4f4f5",
    "primaryFg": "#1b1b1d",
    "secondary": "#1f1f22",
    "secondaryFg": "#f4f4f5",
    "accent": "#f27aa6",
    "accentFg": "#2a0715",
    "ring": "#f27aa6",
    "success": "#4ade80",
    "successFg": "#052e16",
    "warning": "#fbbf24",
    "warningFg": "#1f1300",
    "danger": "#f87171",
    "dangerFg": "#210505",
    "info": "#38bdf8",
    "infoFg": "#03202d",
    "primaryText": "#f4f4f5",
    "secondaryText": "#818183",
    "accentText": "#f27aa6",
    "successText": "#4ade80",
    "warningText": "#fbbf24",
    "dangerText": "#f87171",
    "infoText": "#38bdf8",
    "link": "#f4f4f5"
  },
  "css": "[data-noodle=\"hiyamugi\"] {\n  --mn-bg: light-dark(#fbfbfa, #0e0e10);\n  --mn-surface: light-dark(#ffffff, #161618);\n  --mn-surface-2: light-dark(#f3f3f2, #1f1f22);\n  --mn-fg: light-dark(#1b1b1d, #f4f4f5);\n  --mn-muted: light-dark(#616166, #a1a1a8);\n  --mn-border: light-dark(#e8e8e6, #2a2a2e);\n  --mn-input: light-dark(#d3d3d1, #44444a);\n  --mn-primary: light-dark(#1b1b1d, #f4f4f5);\n  --mn-primary-fg: light-dark(#ffffff, #1b1b1d);\n  --mn-secondary: light-dark(#f3f3f2, #1f1f22);\n  --mn-secondary-fg: light-dark(#1b1b1d, #f4f4f5);\n  --mn-accent: light-dark(#c92a63, #f27aa6);\n  --mn-accent-fg: light-dark(#ffffff, #2a0715);\n  --mn-ring: light-dark(#c92a63, #f27aa6);\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(#1b1b1d, #f4f4f5);\n  --mn-secondary-text: light-dark(#717172, #818183);\n  --mn-accent-text: light-dark(#bf295f, #f27aa6);\n  --mn-success-text: light-dark(#15783a, #4ade80);\n  --mn-warning-text: light-dark(#a84f0b, #fbbf24);\n  --mn-danger-text: light-dark(#c52525, #f87171);\n  --mn-info-text: light-dark(#0369a1, #38bdf8);\n  --mn-link: light-dark(#1b1b1d, #f4f4f5);\n  --mn-font: ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n  --mn-font-heading: ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n  --mn-font-mono: ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace;\n  --mn-heading-weight: 500;\n  --mn-radius-field: 8px;\n  --mn-radius-box: 12px;\n  --mn-radius-badge: 6px;\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: 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"
}