{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "hakata",
  "name": "Hakata",
  "family": "Linear",
  "origin": "Japan · Fukuoka",
  "tagline": "Thin, straight, fast.",
  "description": "Hakata ramen uses ultra-thin straight noodles, boiled for seconds and ordered by firmness, with a refill (kaedama) called for the moment the bowl runs low. Hakata is a fast, horizontal system: pinstripe speed lines, everything aligned to straight rules, compact density, oblique headings and motion measured in tens of milliseconds.",
  "inspiration": [
    "Thin, perfectly straight strands → horizontal pinstripes and long straight rules",
    "Boiled for seconds → the fastest motion of any noodle (90ms), sliding in along the line",
    "Ordered by firmness at the counter → compact, dense controls built for speed",
    "Milky pork broth and red pickled ginger → milk-white surfaces with a ginger-red accent"
  ],
  "traits": {
    "mood": [
      "fast",
      "thin",
      "efficient",
      "technical",
      "dense"
    ],
    "intensity": 2,
    "contrast": "medium",
    "geometry": "thin lines, compact",
    "type": "narrow sans",
    "surface": "flat",
    "motion": "fast",
    "goodFor": [
      "dashboards",
      "fitness and tracking apps",
      "data-heavy tools",
      "trading"
    ],
    "lessFor": [
      "editorial storytelling"
    ],
    "density": "compact"
  },
  "license": "LicenseRef-MIAN-1.0",
  "designLanguage": {
    "essence": "Hakata is speed along straight lines. Its noodles are ultra-thin and perfectly straight, cooked in seconds, and ordered at a counter where everything happens fast. The interface is compact and horizontal: fields sit on a rule, surfaces carry pinstripe speed lines, headings lean forward (oblique), and motion is the fastest in MIAN, things slide in along the line in about 100ms.",
    "principles": [
      "Everything on a straight horizontal rule: fields are filled strips with a 2px bottom rule, cards are ruled top and bottom only.",
      "Pinstripes (--hk-pin: 1px every 4px) mark headers and active surfaces.",
      "Compact density; uppercase, tracked labels.",
      "Forward lean: oblique headings (font-style: oblique 10deg).",
      "Fast: 90–110ms, ease-out, horizontal slides."
    ],
    "aspects": {
      "Shape": "3px fields, 4px containers, 2px badges; long low switches with a bar knob.",
      "Surface": "Milk-white with pinstriped header bands; no side borders on cards.",
      "Colour": "Ink primary, pickled-ginger red accent for focus, current items and highlights.",
      "Type": "Sans at 700–800; oblique headings; uppercase, tracked buttons and tabs.",
      "Motion": "hakata-in: 10px slide from the left, 110ms. Progress and spinners run with moving stripes.",
      "Data": "Tight bars (3px gap), square line caps, a denser grid (8 rows)."
    },
    "extend": [
      "Put the component on a rule: border-width: 0 0 2px or 1px top/bottom only.",
      "Use var(--hk-pin) as the background of headers or hovered rows.",
      "Selected = a 2–3px ginger-red line (inset box-shadow) at the leading edge or underneath.",
      "Keep it compact (var(--mn-size-sm) heights) and uppercase the labels."
    ],
    "avoid": [
      "Rounded pills and large radii",
      "Vertical emphasis",
      "Slow or bouncy motion",
      "Side borders"
    ],
    "recipe": "[data-noodle=\"hakata\"] .tile {\n  padding: 8px 12px; border: 0; border-bottom: 2px solid var(--mn-border); border-radius: 0;\n  background: var(--mn-surface-2); font-weight: 700; text-transform: uppercase; letter-spacing: .06em;\n  transition: box-shadow 90ms cubic-bezier(0, 0, .2, 1);\n}\n[data-noodle=\"hakata\"] .tile:hover { background-image: var(--hk-pin); }\n[data-noodle=\"hakata\"] .tile[aria-selected=\"true\"] { box-shadow: inset 3px 0 0 var(--mn-accent); border-bottom-color: var(--mn-fg); }"
  },
  "psychology": {
    "temperature": "neutral",
    "colours": [
      {
        "role": "Primary",
        "hex": "#111111",
        "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": "#d61f4f",
        "family": "Magenta and pink",
        "depth": "mid, saturated",
        "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": "#f7f7f5",
        "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": 800,
      "summary": "One voice throughout: neutral sans. Headings are heavy, which reads as loud and direct."
    },
    "personality": {
      "reads": [
        "fast",
        "thin",
        "efficient",
        "technical",
        "dense"
      ],
      "intensity": 2,
      "dimensions": [],
      "suits": [
        "dashboards",
        "fitness and tracking apps",
        "data-heavy tools",
        "trading"
      ],
      "lessFor": [
        "editorial storytelling"
      ],
      "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. Use a heavy wordmark; a thin one would vanish beside these headings."
  },
  "url": "https://mian.ro/noodles/hakata",
  "markdownUrl": "https://mian.ro/ai/noodles/hakata.md",
  "stylesheet": "https://mian.ro/dist/noodles/hakata.css",
  "usage": "<html data-noodle=\"hakata\">",
  "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": 800,
  "radius": {
    "field": "3px",
    "box": "4px",
    "badge": "2px"
  },
  "shadow": "none",
  "density": "compact",
  "glass": false,
  "light": {
    "bg": "#f7f7f5",
    "surface": "#ffffff",
    "surface2": "#efefec",
    "fg": "#111111",
    "muted": "#5a5a5a",
    "border": "#e2e2de",
    "input": "#c4c4bf",
    "primary": "#111111",
    "primaryFg": "#ffffff",
    "secondary": "#efefec",
    "secondaryFg": "#111111",
    "accent": "#d61f4f",
    "accentFg": "#ffffff",
    "ring": "#d61f4f",
    "success": "#15803d",
    "successFg": "#ffffff",
    "warning": "#b45309",
    "warningFg": "#ffffff",
    "danger": "#dc2626",
    "dangerFg": "#ffffff",
    "info": "#0369a1",
    "infoFg": "#ffffff",
    "primaryText": "#111111",
    "secondaryText": "#6e6e6d",
    "accentText": "#c61e4a",
    "successText": "#15793a",
    "warningText": "#aa4f09",
    "dangerText": "#c82424",
    "infoText": "#0369a1",
    "link": "#111111"
  },
  "dark": {
    "bg": "#0c0c0c",
    "surface": "#141414",
    "surface2": "#1e1e1e",
    "fg": "#f0f0ee",
    "muted": "#a0a09c",
    "border": "#2a2a2a",
    "input": "#444444",
    "primary": "#f0f0ee",
    "primaryFg": "#111111",
    "secondary": "#1e1e1e",
    "secondaryFg": "#f0f0ee",
    "accent": "#ff5c85",
    "accentFg": "#2a0510",
    "ring": "#ff5c85",
    "success": "#4ade80",
    "successFg": "#052e16",
    "warning": "#fbbf24",
    "warningFg": "#1f1300",
    "danger": "#f87171",
    "dangerFg": "#210505",
    "info": "#38bdf8",
    "infoFg": "#03202d",
    "primaryText": "#f0f0ee",
    "secondaryText": "#7f7f7e",
    "accentText": "#ff5c85",
    "successText": "#4ade80",
    "warningText": "#fbbf24",
    "dangerText": "#f87171",
    "infoText": "#38bdf8",
    "link": "#f0f0ee"
  },
  "css": "[data-noodle=\"hakata\"] {\n  --mn-bg: light-dark(#f7f7f5, #0c0c0c);\n  --mn-surface: light-dark(#ffffff, #141414);\n  --mn-surface-2: light-dark(#efefec, #1e1e1e);\n  --mn-fg: light-dark(#111111, #f0f0ee);\n  --mn-muted: light-dark(#5a5a5a, #a0a09c);\n  --mn-border: light-dark(#e2e2de, #2a2a2a);\n  --mn-input: light-dark(#c4c4bf, #444444);\n  --mn-primary: light-dark(#111111, #f0f0ee);\n  --mn-primary-fg: light-dark(#ffffff, #111111);\n  --mn-secondary: light-dark(#efefec, #1e1e1e);\n  --mn-secondary-fg: light-dark(#111111, #f0f0ee);\n  --mn-accent: light-dark(#d61f4f, #ff5c85);\n  --mn-accent-fg: light-dark(#ffffff, #2a0510);\n  --mn-ring: light-dark(#d61f4f, #ff5c85);\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(#111111, #f0f0ee);\n  --mn-secondary-text: light-dark(#6e6e6d, #7f7f7e);\n  --mn-accent-text: light-dark(#c61e4a, #ff5c85);\n  --mn-success-text: light-dark(#15793a, #4ade80);\n  --mn-warning-text: light-dark(#aa4f09, #fbbf24);\n  --mn-danger-text: light-dark(#c82424, #f87171);\n  --mn-info-text: light-dark(#0369a1, #38bdf8);\n  --mn-link: light-dark(#111111, #f0f0ee);\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: 800;\n  --mn-radius-field: 3px;\n  --mn-radius-box: 4px;\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"
}