{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "kishimen",
  "name": "Kishimen",
  "family": "Linear",
  "origin": "Nagoya · flat noodles",
  "tagline": "Wide, flat, glossy, with dancing flakes.",
  "description": "Broad, paper-thin flat noodles from Nagoya, topped with bonito flakes that dance in the steam. Kishimen is a wide, low, flat system: ribbon-shaped controls, full-width bands, and small flakes that flutter on interaction.",
  "inspiration": [
    "Wide and flat → low, broad controls and ribbon tabs",
    "Glossy surface → a single sheen line along the top edge",
    "Dancing bonito flakes → flake accents that flutter on hover and focus",
    "Folded ribbons → cards and tabs with folded corner notches"
  ],
  "traits": {
    "mood": [
      "wide",
      "glossy",
      "low",
      "calm",
      "modern"
    ],
    "intensity": 2,
    "contrast": "medium",
    "geometry": "wide low ribbons",
    "type": "sans",
    "surface": "glossy flat",
    "motion": "flakes that dance on hover",
    "goodFor": [
      "media apps",
      "dashboards",
      "consumer tools"
    ],
    "lessFor": [
      "print-like editorial"
    ],
    "density": "compact"
  },
  "license": "LicenseRef-MIAN-1.0",
  "designLanguage": {
    "essence": "Kishimen is Nagoya’s wide, paper-thin flat noodle, folded over in the bowl and topped with bonito flakes that dance in the steam. The language is low and wide: flat broad controls with a glossy top edge, folded corners on cards and tabs, touching flat bars, and little flakes that flutter on hover.",
    "principles": [
      "Low and wide: compact heights, generous widths, flat fills.",
      "The fold: a triangular folded corner (var(--k-fold), 12px) on cards and selected tabs.",
      "Glossy top: inset 0 1px 0 rgb(255 255 255/.45).",
      "Flakes: small rotated slivers that flutter on hover and form the spinner."
    ],
    "aspects": {
      "Shape": "3px fields, 5px containers, folded corners.",
      "Surface": "Warm paper-white, flat fills with a glossy top edge, no shadows.",
      "Colour": "Bonito salmon-brown primary, scallion green accent.",
      "Type": "Clean sans, uppercase small labels.",
      "Motion": "kishimen-drop: short drop and settle, 200ms. Flakes flutter continuously on hover.",
      "Data": "Flat bars that touch, wide and low."
    },
    "extend": [
      "Keep the component low (compact density) and wide; flat fill with the glossy top edge.",
      "Fold the top-right corner with a linear-gradient triangle of size var(--k-fold).",
      "Use a flake (a small rotated rounded sliver) as the decorative accent."
    ],
    "avoid": [
      "Tall, narrow controls",
      "Soft drop shadows",
      "Round pills"
    ],
    "recipe": "[data-noodle=\"kishimen\"] .tile {\n  padding: 8px 16px; border: 0; border-radius: 3px;\n  background: linear-gradient(225deg, var(--mn-bg) 0 var(--k-fold), var(--mn-surface-2) 0);\n  box-shadow: var(--k-sheen);\n}\n[data-noodle=\"kishimen\"] .tile[aria-selected=\"true\"] { background: linear-gradient(225deg, var(--mn-bg) 0 var(--k-fold), var(--mn-primary) 0); color: var(--mn-primary-fg); }"
  },
  "psychology": {
    "temperature": "warm",
    "colours": [
      {
        "role": "Primary",
        "hex": "#9a4a3c",
        "family": "Red",
        "depth": "mid",
        "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": "#3f7d3a",
        "family": "Green",
        "depth": "mid",
        "says": "Growth, health, permission, money. The easiest colour to look at for a long time.",
        "use": "Finance, health, food, sustainability, and “go” or success states.",
        "risk": "Success messages are green too: a green brand needs a success state that is clearly a status (icon, words). Claims of sustainability made with green alone read as greenwashing."
      },
      {
        "role": "Page",
        "hex": "#fbfaf6",
        "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": "Red with green: a contrasting pair that needs one of the two to dominate.",
    "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": 650,
      "summary": "One voice throughout: neutral sans. Headings are semibold, which reads as confident without shouting."
    },
    "personality": {
      "reads": [
        "wide",
        "glossy",
        "low",
        "calm",
        "modern"
      ],
      "intensity": 2,
      "dimensions": [],
      "suits": [
        "media apps",
        "dashboards",
        "consumer tools"
      ],
      "lessFor": [
        "print-like editorial"
      ],
      "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/kishimen",
  "markdownUrl": "https://mian.ro/ai/noodles/kishimen.md",
  "stylesheet": "https://mian.ro/dist/noodles/kishimen.css",
  "usage": "<html data-noodle=\"kishimen\">",
  "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": 650,
  "radius": {
    "field": "3px",
    "box": "5px",
    "badge": "2px"
  },
  "shadow": "none",
  "density": "compact",
  "glass": false,
  "light": {
    "bg": "#fbfaf6",
    "surface": "#ffffff",
    "surface2": "#f3f0e8",
    "fg": "#221d17",
    "muted": "#625a4e",
    "border": "#e7e1d4",
    "input": "#d3cbba",
    "primary": "#9a4a3c",
    "primaryFg": "#ffffff",
    "secondary": "#f3e7e1",
    "secondaryFg": "#6b2e24",
    "accent": "#3f7d3a",
    "accentFg": "#ffffff",
    "ring": "#9a4a3c",
    "success": "#15803d",
    "successFg": "#ffffff",
    "warning": "#b45309",
    "warningFg": "#ffffff",
    "danger": "#dc2626",
    "dangerFg": "#ffffff",
    "info": "#0369a1",
    "infoFg": "#ffffff",
    "primaryText": "#9a4a3c",
    "secondaryText": "#7a726c",
    "accentText": "#3d7537",
    "successText": "#16783a",
    "warningText": "#a84f0a",
    "dangerText": "#c62524",
    "infoText": "#0369a1",
    "link": "#9a4a3c"
  },
  "dark": {
    "bg": "#15120e",
    "surface": "#1c1813",
    "surface2": "#26211a",
    "fg": "#f3eee5",
    "muted": "#aca290",
    "border": "#342d24",
    "input": "#483f33",
    "primary": "#f0a594",
    "primaryFg": "#2a0e08",
    "secondary": "#26211a",
    "secondaryFg": "#f3eee5",
    "accent": "#86c77e",
    "accentFg": "#0b2408",
    "ring": "#f0a594",
    "success": "#4ade80",
    "successFg": "#052e16",
    "warning": "#fbbf24",
    "warningFg": "#1f1300",
    "danger": "#f87171",
    "dangerFg": "#210505",
    "info": "#38bdf8",
    "infoFg": "#03202d",
    "primaryText": "#f0a594",
    "secondaryText": "#88837b",
    "accentText": "#86c77e",
    "successText": "#4ade80",
    "warningText": "#fbbf24",
    "dangerText": "#f87171",
    "infoText": "#38bdf8",
    "link": "#f0a594"
  },
  "css": "[data-noodle=\"kishimen\"] {\n  --mn-bg: light-dark(#fbfaf6, #15120e);\n  --mn-surface: light-dark(#ffffff, #1c1813);\n  --mn-surface-2: light-dark(#f3f0e8, #26211a);\n  --mn-fg: light-dark(#221d17, #f3eee5);\n  --mn-muted: light-dark(#625a4e, #aca290);\n  --mn-border: light-dark(#e7e1d4, #342d24);\n  --mn-input: light-dark(#d3cbba, #483f33);\n  --mn-primary: light-dark(#9a4a3c, #f0a594);\n  --mn-primary-fg: light-dark(#ffffff, #2a0e08);\n  --mn-secondary: light-dark(#f3e7e1, #26211a);\n  --mn-secondary-fg: light-dark(#6b2e24, #f3eee5);\n  --mn-accent: light-dark(#3f7d3a, #86c77e);\n  --mn-accent-fg: light-dark(#ffffff, #0b2408);\n  --mn-ring: light-dark(#9a4a3c, #f0a594);\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(#9a4a3c, #f0a594);\n  --mn-secondary-text: light-dark(#7a726c, #88837b);\n  --mn-accent-text: light-dark(#3d7537, #86c77e);\n  --mn-success-text: light-dark(#16783a, #4ade80);\n  --mn-warning-text: light-dark(#a84f0a, #fbbf24);\n  --mn-danger-text: light-dark(#c62524, #f87171);\n  --mn-info-text: light-dark(#0369a1, #38bdf8);\n  --mn-link: light-dark(#9a4a3c, #f0a594);\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: 650;\n  --mn-radius-field: 3px;\n  --mn-radius-box: 5px;\n  --mn-radius-badge: 2px;\n  --mn-shadow-sm: none;\n  --mn-shadow-md: none;\n  --mn-shadow-lg: none;\n  --mn-size-xs: 24px;\n  --mn-size-sm: 28px;\n  --mn-size-md: 34px;\n  --mn-size-lg: 42px;\n  --mn-text-sm: 13px;\n  --mn-surface-alpha: 100%;\n  --mn-backdrop: none;\n  --mn-bg-image: none;\n}\n"
}