{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "ramen",
  "name": "Ramen",
  "family": "Bold",
  "origin": "Japan",
  "tagline": "Bold, loud, high contrast.",
  "description": "Pure black and white with a chilli-red primary and amber accent. Heavier type, crisp shadows. For products that want to be noticed.",
  "inspiration": [
    "Curly, wavy alkaline noodles → wavy underlines, wavy dividers and wave-topped bars",
    "A loud, rich bowl → heavy outlines and hard offset shadows",
    "Steam → components rise into place when they appear",
    "Toppings on top → header bands and bold labels"
  ],
  "traits": {
    "mood": [
      "bold",
      "loud",
      "energetic",
      "confident",
      "noticeable"
    ],
    "intensity": 4,
    "contrast": "high",
    "geometry": "crisp, medium radius",
    "type": "heavy sans",
    "surface": "black, white and chilli red, crisp shadows",
    "motion": "snappy",
    "goodFor": [
      "campaigns",
      "product launches",
      "agencies",
      "sport",
      "youth brands"
    ],
    "lessFor": [
      "quiet luxury",
      "healthcare"
    ],
    "density": "default"
  },
  "license": "LicenseRef-MIAN-1.0",
  "designLanguage": {
    "essence": "Ramen is curly alkaline noodles in a loud, rich bowl, loaded with toppings and steam. The language is bold: heavy ink outlines, hard offset shadows like printed stickers, wavy lines wherever a straight one would be expected, and things that rise into place like steam.",
    "principles": [
      "Ink first: 2px outlines in the foreground colour around every raised thing.",
      "Hard shadows, never blurred: offset 3–5px in ink.",
      "Curly, not straight: underlines, dividers and bar tops are waves.",
      "Toppings on top: stickers and bands, slightly rotated.",
      "High contrast, high energy."
    ],
    "aspects": {
      "Shape": "8px fields, 12px containers, badges as rotated stickers.",
      "Surface": "Pure white/black with ink outlines and hard offset shadows (var(--r-ink)).",
      "Colour": "Chilli red primary, amber accent, black and white.",
      "Type": "Heavy (800) headings, uppercase bold labels.",
      "Motion": "ramen-steam: rise and settle with a slight overshoot, 260ms. Hover lifts and grows the shadow; press flattens it.",
      "Data": "Wave-topped bars, bold outlined charts, wavy dividers (var(--r-wave))."
    },
    "extend": [
      "Outline with 2px var(--r-ink) and add box-shadow 4px 4px 0 var(--r-ink).",
      "On hover translate(-1px,-1px) and grow the shadow; on press translate(3px,3px) with no shadow.",
      "Replace straight rules with the wave pattern (var(--r-wave) as a mask or background).",
      "Small labels: uppercase, weight 900, rotated ±2°."
    ],
    "avoid": [
      "Blurred shadows",
      "Hairlines",
      "Pastel palettes",
      "Subtle states"
    ],
    "recipe": "[data-noodle=\"ramen\"] .tile {\n  padding: 12px 14px; border: 2px solid var(--r-ink); border-radius: 12px;\n  background: var(--mn-surface); box-shadow: 4px 4px 0 var(--r-ink);\n  transition: transform 140ms, box-shadow 140ms;\n}\n[data-noodle=\"ramen\"] .tile:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--r-ink); }\n[data-noodle=\"ramen\"] .tile:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--r-ink); }"
  },
  "psychology": {
    "temperature": "neutral",
    "colours": [
      {
        "role": "Primary",
        "hex": "#dc2626",
        "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": "#f59e0b",
        "family": "Orange",
        "depth": "mid, saturated",
        "says": "Warmth, friendliness, appetite, affordability. Active like red, without the alarm.",
        "use": "Consumer products, food, community, calls to action on a neutral page.",
        "risk": "Can read as cheap when saturated across large areas; text on orange rarely passes contrast, so use it for fills with dark text or for accents."
      },
      {
        "role": "Page",
        "hex": "#ffffff",
        "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": "Red with its neighbour orange: 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": "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": [
        "bold",
        "loud",
        "energetic",
        "confident",
        "noticeable"
      ],
      "intensity": 4,
      "dimensions": [
        "Excitement"
      ],
      "suits": [
        "campaigns",
        "product launches",
        "agencies",
        "sport",
        "youth brands"
      ],
      "lessFor": [
        "quiet luxury",
        "healthcare"
      ],
      "tone": "Bold. Short claims, strong verbs, big numbers. Say one thing per screen and say it loudly."
    },
    "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/ramen",
  "markdownUrl": "https://mian.ro/ai/noodles/ramen.md",
  "stylesheet": "https://mian.ro/dist/noodles/ramen.css",
  "usage": "<html data-noodle=\"ramen\">",
  "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": "8px",
    "box": "12px",
    "badge": "6px"
  },
  "shadow": "soft",
  "density": "default",
  "glass": false,
  "light": {
    "bg": "#ffffff",
    "surface": "#ffffff",
    "surface2": "#f5f5f4",
    "fg": "#0c0a09",
    "muted": "#66615d",
    "border": "#e7e5e4",
    "input": "#d6d3d1",
    "primary": "#dc2626",
    "primaryFg": "#ffffff",
    "secondary": "#0c0a09",
    "secondaryFg": "#ffffff",
    "accent": "#f59e0b",
    "accentFg": "#1c1002",
    "ring": "#dc2626",
    "success": "#15803d",
    "successFg": "#ffffff",
    "warning": "#b45309",
    "warningFg": "#ffffff",
    "danger": "#dc2626",
    "dangerFg": "#ffffff",
    "info": "#0369a1",
    "infoFg": "#ffffff",
    "primaryText": "#c72323",
    "secondaryText": "#0c0a09",
    "accentText": "#98630a",
    "successText": "#14793a",
    "warningText": "#aa4f09",
    "dangerText": "#c72323",
    "infoText": "#0369a1",
    "link": "#dc2626"
  },
  "dark": {
    "bg": "#0c0a09",
    "surface": "#151211",
    "surface2": "#1f1b19",
    "fg": "#fafaf9",
    "muted": "#a8a29e",
    "border": "#2b2523",
    "input": "#443b37",
    "primary": "#dc2626",
    "primaryFg": "#ffffff",
    "secondary": "#fafaf9",
    "secondaryFg": "#0c0a09",
    "accent": "#fbbf24",
    "accentFg": "#1c1002",
    "ring": "#f87171",
    "success": "#4ade80",
    "successFg": "#052e16",
    "warning": "#fbbf24",
    "warningFg": "#1f1300",
    "danger": "#f87171",
    "dangerFg": "#210505",
    "info": "#38bdf8",
    "infoFg": "#03202d",
    "primaryText": "#e35554",
    "secondaryText": "#fafaf9",
    "accentText": "#fbbf24",
    "successText": "#4ade80",
    "warningText": "#fbbf24",
    "dangerText": "#f87171",
    "infoText": "#38bdf8",
    "link": "#fbbf24"
  },
  "css": "[data-noodle=\"ramen\"] {\n  --mn-bg: light-dark(#ffffff, #0c0a09);\n  --mn-surface: light-dark(#ffffff, #151211);\n  --mn-surface-2: light-dark(#f5f5f4, #1f1b19);\n  --mn-fg: light-dark(#0c0a09, #fafaf9);\n  --mn-muted: light-dark(#66615d, #a8a29e);\n  --mn-border: light-dark(#e7e5e4, #2b2523);\n  --mn-input: light-dark(#d6d3d1, #443b37);\n  --mn-primary: light-dark(#dc2626, #dc2626);\n  --mn-primary-fg: light-dark(#ffffff, #ffffff);\n  --mn-secondary: light-dark(#0c0a09, #fafaf9);\n  --mn-secondary-fg: light-dark(#ffffff, #0c0a09);\n  --mn-accent: light-dark(#f59e0b, #fbbf24);\n  --mn-accent-fg: light-dark(#1c1002, #1c1002);\n  --mn-ring: light-dark(#dc2626, #f87171);\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(#c72323, #e35554);\n  --mn-secondary-text: light-dark(#0c0a09, #fafaf9);\n  --mn-accent-text: light-dark(#98630a, #fbbf24);\n  --mn-success-text: light-dark(#14793a, #4ade80);\n  --mn-warning-text: light-dark(#aa4f09, #fbbf24);\n  --mn-danger-text: light-dark(#c72323, #f87171);\n  --mn-info-text: light-dark(#0369a1, #38bdf8);\n  --mn-link: light-dark(#dc2626, #fbbf24);\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: 8px;\n  --mn-radius-box: 12px;\n  --mn-radius-badge: 6px;\n  --mn-shadow-sm: 0 1px 3px rgb(0 0 0 / .08);\n  --mn-shadow-md: 0 4px 14px -4px rgb(0 0 0 / .12), 0 2px 4px -2px rgb(0 0 0 / .06);\n  --mn-shadow-lg: 0 20px 48px -12px rgb(0 0 0 / .25), 0 8px 16px -8px rgb(0 0 0 / .10);\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"
}