{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "spaghetti",
  "name": "Spaghetti",
  "family": "Minimal",
  "origin": "Italy · Naples",
  "tagline": "Pasta, tomato, a poster.",
  "description": "Spaghetti al pomodoro is the whole of Italian cooking in one plate: few ingredients, nothing to hide. Spaghetti is Italian poster minimalism: a heavy grotesk, strict left alignment, thick black rules instead of boxes, flat black and one tomato red.",
  "inspiration": [
    "Three ingredients on a white plate → white, black and one tomato red, nothing else",
    "Long straight strands → strict horizontal rules: a 3px black rule tops every card, table and section",
    "Printed on a trattoria menu → heavy grotesk headlines at 800, tight tracking, flush left",
    "Al dente → firm, fast motion; everything snaps into place"
  ],
  "traits": {
    "mood": [
      "italian",
      "poster",
      "confident",
      "minimal",
      "graphic",
      "european"
    ],
    "intensity": 3,
    "contrast": "high",
    "geometry": "square, heavy rules",
    "type": "grotesk display, poster-like",
    "surface": "flat paper, one red",
    "motion": "direct",
    "goodFor": [
      "creative studios",
      "agencies",
      "restaurants",
      "design portfolios",
      "cultural events"
    ],
    "lessFor": [
      "soft consumer apps",
      "children"
    ],
    "density": "default"
  },
  "license": "LicenseRef-MIAN-1.0",
  "designLanguage": {
    "essence": "Spaghetti is Italian poster minimalism: three ingredients on a white plate. A heavy grotesk set flush left, thick black rules on top of things instead of boxes around them, flat black and one tomato red that marks the single most important thing on screen. Firm and fast, al dente.",
    "principles": [
      "Rules, not boxes: a 3px black rule tops cards, tables, alerts and sections; nothing is enclosed.",
      "One red thing per view: the primary hover, the focus ring, the chosen tab, the highlighted bar.",
      "Type does the work: 800-weight grotesk headlines with −0.045em tracking, uppercase micro-labels.",
      "No shadows, no radius beyond 2px, no gradients."
    ],
    "aspects": {
      "Shape": "2px corners; fields are a single 2px baseline; switches and checkboxes are squares.",
      "Surface": "White page, transparent surfaces topped by a 3px ink rule; floating panels get a flat offset shadow at 12% ink.",
      "Colour": "Ink black and tomato red (#c8001a); red appears once per view.",
      "Type": "Helvetica-class grotesk, 800 for headings, 700 for controls, uppercase 11px badges.",
      "Motion": "spaghetti-in: a 10px slide from the left in 160ms; hovers are instant colour swaps.",
      "Data": "Black square columns; the highlighted column and the progress fill are red; 3px lines, no area."
    },
    "extend": [
      "border: 0; border-top: 3px solid var(--mn-fg); border-radius: 0; background: transparent.",
      "Hover and selection swap to var(--mn-accent) (tomato), never add a second colour.",
      "Headings: font-weight 800; letter-spacing: -.045em; line-height: .98.",
      "Labels and badges: uppercase, 800, .6875rem, letter-spacing .02em."
    ],
    "avoid": [
      "Rounded corners or pills",
      "Soft shadows and gradients",
      "More than one accent colour",
      "Centred layouts"
    ],
    "recipe": "[data-noodle=\"spaghetti\"] .tile { padding: 12px 0 14px; border: 0; border-top: 3px solid var(--mn-fg); border-radius: 0; background: transparent; font-weight: 700; }\n[data-noodle=\"spaghetti\"] .tile:hover { color: var(--mn-accent); }\n[data-noodle=\"spaghetti\"] .tile[aria-selected=\"true\"] { border-top-color: var(--mn-accent); }"
  },
  "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": "#c8001a",
        "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": "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": "A neutral primary with one red accent: the accent means “look here” precisely because nothing else is coloured.",
    "type": {
      "body": {
        "class": "grotesque",
        "name": "Grotesque sans",
        "says": "Confident, graphic, European. A poster voice with a little warmth and irregularity.",
        "use": "Agencies, culture, campaigns, strong headlines.",
        "risk": "Heavy weights at large sizes need generous space and short lines."
      },
      "heading": {
        "class": "grotesque",
        "name": "Grotesque sans",
        "says": "Confident, graphic, European. A poster voice with a little warmth and irregularity.",
        "use": "Agencies, culture, campaigns, strong headlines.",
        "risk": "Heavy weights at large sizes need generous space and short lines."
      },
      "weight": 800,
      "summary": "One voice throughout: grotesque sans. Headings are heavy, which reads as loud and direct."
    },
    "personality": {
      "reads": [
        "italian",
        "poster",
        "confident",
        "minimal",
        "graphic"
      ],
      "intensity": 3,
      "dimensions": [],
      "suits": [
        "creative studios",
        "agencies",
        "restaurants",
        "design portfolios",
        "cultural events"
      ],
      "lessFor": [
        "soft consumer apps",
        "children"
      ],
      "tone": "Lively. A point of view in the headline, concrete verbs, a little humour where it is true."
    },
    "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/spaghetti",
  "markdownUrl": "https://mian.ro/ai/noodles/spaghetti.md",
  "stylesheet": "https://mian.ro/dist/noodles/spaghetti.css",
  "usage": "<html data-noodle=\"spaghetti\">",
  "fonts": {
    "sans": "\"Helvetica Neue\", Helvetica, \"Nimbus Sans\", Arial, ui-sans-serif, system-ui, sans-serif",
    "heading": "\"Helvetica Neue\", Helvetica, \"Nimbus Sans\", Arial, ui-sans-serif, system-ui, sans-serif",
    "mono": "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace"
  },
  "headingWeight": 800,
  "radius": {
    "field": "2px",
    "box": "2px",
    "badge": "2px"
  },
  "shadow": "none",
  "density": "default",
  "glass": false,
  "light": {
    "bg": "#ffffff",
    "surface": "#ffffff",
    "surface2": "#f4f4f2",
    "fg": "#111111",
    "muted": "#5c5c5c",
    "border": "#e4e4e1",
    "input": "#cfcfcb",
    "primary": "#111111",
    "primaryFg": "#ffffff",
    "secondary": "#f4f4f2",
    "secondaryFg": "#111111",
    "accent": "#c8001a",
    "accentFg": "#ffffff",
    "ring": "#c8001a",
    "success": "#15803d",
    "successFg": "#ffffff",
    "warning": "#b45309",
    "warningFg": "#ffffff",
    "danger": "#dc2626",
    "dangerFg": "#ffffff",
    "info": "#0369a1",
    "infoFg": "#ffffff",
    "primaryText": "#111111",
    "secondaryText": "#757574",
    "accentText": "#c8001a",
    "successText": "#15793a",
    "warningText": "#aa4f09",
    "dangerText": "#c82424",
    "infoText": "#0369a1",
    "link": "#111111"
  },
  "dark": {
    "bg": "#0c0c0c",
    "surface": "#141414",
    "surface2": "#1d1d1d",
    "fg": "#f2f2f0",
    "muted": "#a3a3a0",
    "border": "#2a2a2a",
    "input": "#444444",
    "primary": "#f2f2f0",
    "primaryFg": "#111111",
    "secondary": "#1d1d1d",
    "secondaryFg": "#f2f2f0",
    "accent": "#ff5a67",
    "accentFg": "#1a0003",
    "ring": "#ff5a67",
    "success": "#4ade80",
    "successFg": "#052e16",
    "warning": "#fbbf24",
    "warningFg": "#1f1300",
    "danger": "#f87171",
    "dangerFg": "#210505",
    "info": "#38bdf8",
    "infoFg": "#03202d",
    "primaryText": "#f2f2f0",
    "secondaryText": "#7f7f7e",
    "accentText": "#ff5a67",
    "successText": "#4ade80",
    "warningText": "#fbbf24",
    "dangerText": "#f87171",
    "infoText": "#38bdf8",
    "link": "#f2f2f0"
  },
  "css": "[data-noodle=\"spaghetti\"] {\n  --mn-bg: light-dark(#ffffff, #0c0c0c);\n  --mn-surface: light-dark(#ffffff, #141414);\n  --mn-surface-2: light-dark(#f4f4f2, #1d1d1d);\n  --mn-fg: light-dark(#111111, #f2f2f0);\n  --mn-muted: light-dark(#5c5c5c, #a3a3a0);\n  --mn-border: light-dark(#e4e4e1, #2a2a2a);\n  --mn-input: light-dark(#cfcfcb, #444444);\n  --mn-primary: light-dark(#111111, #f2f2f0);\n  --mn-primary-fg: light-dark(#ffffff, #111111);\n  --mn-secondary: light-dark(#f4f4f2, #1d1d1d);\n  --mn-secondary-fg: light-dark(#111111, #f2f2f0);\n  --mn-accent: light-dark(#c8001a, #ff5a67);\n  --mn-accent-fg: light-dark(#ffffff, #1a0003);\n  --mn-ring: light-dark(#c8001a, #ff5a67);\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, #f2f2f0);\n  --mn-secondary-text: light-dark(#757574, #7f7f7e);\n  --mn-accent-text: light-dark(#c8001a, #ff5a67);\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, #f2f2f0);\n  --mn-font: \"Helvetica Neue\", Helvetica, \"Nimbus Sans\", Arial, ui-sans-serif, system-ui, sans-serif;\n  --mn-font-heading: \"Helvetica Neue\", Helvetica, \"Nimbus Sans\", Arial, ui-sans-serif, system-ui, 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: 2px;\n  --mn-radius-box: 2px;\n  --mn-radius-badge: 2px;\n  --mn-shadow-sm: none;\n  --mn-shadow-md: none;\n  --mn-shadow-lg: none;\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"
}