{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "jjajang",
  "name": "Jjajang",
  "family": "Bold",
  "origin": "Korea",
  "tagline": "Glossy black, bold and rich.",
  "description": "Jjajangmyeon comes under a thick, glossy black-bean sauce with diced onion and a crisp tangle of cucumber on top. Jjajang is a bold, lacquered-black system: heavy glossy black surfaces with a wet highlight, bright cucumber-green and onion-cream accents, and rich, heavy type.",
  "inspiration": [
    "A thick, glossy black sauce → deep black fills with a wet highlight across the top",
    "Stirred through until every strand is coated → bold filled controls rather than outlines",
    "Cucumber on top → a crisp green accent; diced onion → warm cream text on black",
    "Rich and heavy → large, heavy type and generous, rounded shapes"
  ],
  "traits": {
    "mood": [
      "glossy",
      "rich",
      "dark",
      "bold",
      "premium"
    ],
    "intensity": 4,
    "contrast": "high",
    "geometry": "lacquered, rounded",
    "type": "bold sans",
    "surface": "lacquered black",
    "motion": "glossy",
    "goodFor": [
      "nightlife",
      "music",
      "gaming",
      "premium brands"
    ],
    "lessFor": [
      "public services",
      "children"
    ],
    "density": "comfortable"
  },
  "license": "LicenseRef-MIAN-1.0",
  "designLanguage": {
    "essence": "Jjajang is glossy black sauce. The noodles are coated in a thick, shining black-bean sauce and topped with crisp cucumber, so the interface is bold and filled: heavy glossy black controls with a wet highlight across the top, cucumber-green accents, onion-cream text on black, rich heavy type and generous round shapes.",
    "principles": [
      "Filled, not outlined: selected and primary things are glossy black (--jj-sauce with --jj-gloss).",
      "Wet highlight: a bright band across the top half of black fills (--jj-wet).",
      "Cucumber green for focus, on-states and highlights.",
      "Heavy, rounded, generous: 800–900 type, 14–20px radii, comfortable density."
    ],
    "aspects": {
      "Shape": "14px fields, 20px panels, pills for badges and tabs.",
      "Surface": "Warm white with deep soft shadows; black glossy fills for emphasis.",
      "Colour": "Sauce black primary, cucumber green accent, onion cream on black.",
      "Type": "Sans at 800–900.",
      "Motion": "jjajang-in: rise with a light overshoot, 300ms; hover brightens the gloss.",
      "Data": "Glossy black bars with a green highlight; thick lines."
    },
    "extend": [
      "Emphasis = background: var(--jj-sauce) var(--jj-gloss); color: #f6f0e6; box-shadow: var(--jj-wet).",
      "Use var(--mn-accent) (cucumber) for the single focus or on-state.",
      "Round and heavy: radius ≥14px, weight ≥750."
    ],
    "avoid": [
      "Thin outlines as the main style",
      "Pale pastels",
      "Light type weights"
    ],
    "recipe": "[data-noodle=\"jjajang\"] .tile {\n  padding: 14px 18px; border: 0; border-radius: 20px; background: var(--mn-surface-2); font-weight: 750;\n}\n[data-noodle=\"jjajang\"] .tile[aria-selected=\"true\"] { background: var(--jj-sauce) var(--jj-gloss); color: #f6f0e6; box-shadow: var(--jj-wet); }"
  },
  "psychology": {
    "temperature": "warm",
    "colours": [
      {
        "role": "Primary",
        "hex": "#15110d",
        "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": "#3f7d1f",
        "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": "#f6f3ee",
        "family": "Brown and terracotta",
        "depth": "pale, 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."
      }
    ],
    "relation": "A neutral primary with one green 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": 850,
      "summary": "One voice throughout: neutral sans. Headings are heavy, which reads as loud and direct."
    },
    "personality": {
      "reads": [
        "glossy",
        "rich",
        "dark",
        "bold",
        "premium"
      ],
      "intensity": 4,
      "dimensions": [],
      "suits": [
        "nightlife",
        "music",
        "gaming",
        "premium brands"
      ],
      "lessFor": [
        "public services",
        "children"
      ],
      "tone": "Bold. Short claims, strong verbs, big numbers. Say one thing per screen and say it loudly."
    },
    "logo": "Round marks fit: a circular symbol or a soft, lowercase wordmark. Use a heavy wordmark; a thin one would vanish beside these headings."
  },
  "url": "https://mian.ro/noodles/jjajang",
  "markdownUrl": "https://mian.ro/ai/noodles/jjajang.md",
  "stylesheet": "https://mian.ro/dist/noodles/jjajang.css",
  "usage": "<html data-noodle=\"jjajang\">",
  "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": 850,
  "radius": {
    "field": "14px",
    "box": "20px",
    "badge": "999px"
  },
  "shadow": "soft",
  "density": "comfortable",
  "glass": false,
  "light": {
    "bg": "#f6f3ee",
    "surface": "#ffffff",
    "surface2": "#ebe6de",
    "fg": "#15110d",
    "muted": "#5f554a",
    "border": "#ddd5ca",
    "input": "#bcb0a1",
    "primary": "#15110d",
    "primaryFg": "#f6f3ee",
    "secondary": "#ebe6de",
    "secondaryFg": "#15110d",
    "accent": "#3f7d1f",
    "accentFg": "#ffffff",
    "ring": "#3f7d1f",
    "success": "#15803d",
    "successFg": "#ffffff",
    "warning": "#b45309",
    "warningFg": "#ffffff",
    "danger": "#dc2626",
    "dangerFg": "#ffffff",
    "info": "#0369a1",
    "infoFg": "#ffffff",
    "primaryText": "#15110d",
    "secondaryText": "#736f69",
    "accentText": "#3c771e",
    "successText": "#15793a",
    "warningText": "#aa4f09",
    "dangerText": "#c82424",
    "infoText": "#0369a1",
    "link": "#15110d"
  },
  "dark": {
    "bg": "#050403",
    "surface": "#110e0b",
    "surface2": "#1c1814",
    "fg": "#f6f0e6",
    "muted": "#ac9f8e",
    "border": "#2c2620",
    "input": "#4a4138",
    "primary": "#f6f0e6",
    "primaryFg": "#110e0b",
    "secondary": "#1c1814",
    "secondaryFg": "#f6f0e6",
    "accent": "#9bdc62",
    "accentFg": "#132503",
    "ring": "#9bdc62",
    "success": "#4ade80",
    "successFg": "#052e16",
    "warning": "#fbbf24",
    "warningFg": "#1f1300",
    "danger": "#f87171",
    "dangerFg": "#210505",
    "info": "#38bdf8",
    "infoFg": "#03202d",
    "primaryText": "#f6f0e6",
    "secondaryText": "#807b75",
    "accentText": "#9bdc62",
    "successText": "#4ade80",
    "warningText": "#fbbf24",
    "dangerText": "#f87171",
    "infoText": "#38bdf8",
    "link": "#f6f0e6"
  },
  "css": "[data-noodle=\"jjajang\"] {\n  --mn-bg: light-dark(#f6f3ee, #050403);\n  --mn-surface: light-dark(#ffffff, #110e0b);\n  --mn-surface-2: light-dark(#ebe6de, #1c1814);\n  --mn-fg: light-dark(#15110d, #f6f0e6);\n  --mn-muted: light-dark(#5f554a, #ac9f8e);\n  --mn-border: light-dark(#ddd5ca, #2c2620);\n  --mn-input: light-dark(#bcb0a1, #4a4138);\n  --mn-primary: light-dark(#15110d, #f6f0e6);\n  --mn-primary-fg: light-dark(#f6f3ee, #110e0b);\n  --mn-secondary: light-dark(#ebe6de, #1c1814);\n  --mn-secondary-fg: light-dark(#15110d, #f6f0e6);\n  --mn-accent: light-dark(#3f7d1f, #9bdc62);\n  --mn-accent-fg: light-dark(#ffffff, #132503);\n  --mn-ring: light-dark(#3f7d1f, #9bdc62);\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(#15110d, #f6f0e6);\n  --mn-secondary-text: light-dark(#736f69, #807b75);\n  --mn-accent-text: light-dark(#3c771e, #9bdc62);\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(#15110d, #f6f0e6);\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: 850;\n  --mn-radius-field: 14px;\n  --mn-radius-box: 20px;\n  --mn-radius-badge: 999px;\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: 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"
}