{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "bucatini",
  "name": "Bucatini",
  "family": "Minimal",
  "origin": "Italy · Rome",
  "tagline": "A strand with a hole through it.",
  "description": "Bucatini look like thick spaghetti, but each one is a tube with a hole running through the middle. Bucatini is a hollow system: everything is drawn in outline, tube-shaped pill buttons, ring switches, hollow checkboxes and outlined charts, and fills only when you press or choose.",
  "inspiration": [
    "A tube, not a rod → every control is an outline; the inside stays empty until it is chosen",
    "Round in section → pill buttons and fields, ring switches with a hollow knob",
    "Amatriciana on the side → ink outlines with one sauce red for the accent",
    "Sucking up the sauce → hover fills the tube from the inside"
  ],
  "traits": {
    "mood": [
      "hollow",
      "outlined",
      "crafted",
      "minimal",
      "precise"
    ],
    "intensity": 2,
    "contrast": "high",
    "geometry": "double outlines with a gap",
    "type": "clean sans",
    "surface": "outlined, inset rings",
    "motion": "short",
    "goodFor": [
      "design tools",
      "studios",
      "architecture",
      "portfolios"
    ],
    "lessFor": [
      "data-dense admin"
    ],
    "density": "default"
  },
  "license": "LicenseRef-MIAN-1.0",
  "designLanguage": {
    "essence": "Bucatini is hollow. Each strand is a tube with a hole through the middle, so every control is drawn as an outline: pill-shaped tubes, ring switches with a hollow knob, hollow checkboxes, outlined cards and charts, and fills from the inside only when you press, hover or choose it. Emptiness is the default state.",
    "principles": [
      "Outline first: 1.5px ink strokes define everything; fills mean “chosen” or “pressed”.",
      "Tubes: buttons, fields, tabs and badges are pills; containers have 18px corners.",
      "The primary button is a filled tube with a thin inner gap, like the hole in the pasta.",
      "One amatriciana red accent; everything else is ink and paper."
    ],
    "aspects": {
      "Shape": "999px pills for controls, 18px containers; checkboxes are circles.",
      "Surface": "Transparent surfaces with a 1.5px ink outline; floating panels add a second, detached outline ring.",
      "Colour": "Ink and paper with a sauce-red accent.",
      "Type": "Clean sans, 600 for headings and controls.",
      "Motion": "bucatini-in: a 3% scale-up in 200ms; hovers fill from the inside (inset shadow grows).",
      "Data": "Hollow capsule columns and a hollow progress tube with an inset fill; the highlight fills solid."
    },
    "extend": [
      "border: 1.5px solid var(--mn-fg); background: transparent; border-radius: 999px (controls) or 18px (containers).",
      "Selected / pressed: background var(--mn-fg); color var(--mn-bg).",
      "Filled accents keep a 2.5px inner gap: box-shadow: inset 0 0 0 2.5px var(--mn-bg), inset 0 0 0 40px <colour>."
    ],
    "avoid": [
      "Solid filled surfaces at rest",
      "Square corners",
      "Drop shadows"
    ],
    "recipe": "[data-noodle=\"bucatini\"] .tile { padding: 10px 18px; border: 1.5px solid var(--mn-fg); border-radius: 999px; background: transparent; }\n[data-noodle=\"bucatini\"] .tile:hover { box-shadow: inset 0 0 0 1px var(--mn-fg); }\n[data-noodle=\"bucatini\"] .tile[aria-selected=\"true\"] { background: var(--mn-fg); color: var(--mn-bg); box-shadow: inset 0 0 0 2.5px var(--mn-bg); }"
  },
  "psychology": {
    "temperature": "neutral",
    "colours": [
      {
        "role": "Primary",
        "hex": "#151515",
        "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": "#b3261e",
        "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": "#fcfcfb",
        "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": "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": 600,
      "summary": "One voice throughout: neutral sans. Headings are semibold, which reads as confident without shouting."
    },
    "personality": {
      "reads": [
        "hollow",
        "outlined",
        "crafted",
        "minimal",
        "precise"
      ],
      "intensity": 2,
      "dimensions": [],
      "suits": [
        "design tools",
        "studios",
        "architecture",
        "portfolios"
      ],
      "lessFor": [
        "data-dense admin"
      ],
      "tone": "Calm and clear. Short sentences, one idea each, a friendly but not chatty register."
    },
    "logo": "Round marks fit: a circular symbol or a soft, lowercase wordmark."
  },
  "url": "https://mian.ro/noodles/bucatini",
  "markdownUrl": "https://mian.ro/ai/noodles/bucatini.md",
  "stylesheet": "https://mian.ro/dist/noodles/bucatini.css",
  "usage": "<html data-noodle=\"bucatini\">",
  "fonts": {
    "sans": "ui-sans-serif, system-ui, -apple-system, \"Segoe UI Variable Text\", \"Segoe UI\", \"Helvetica Neue\", Helvetica, Arial, sans-serif",
    "heading": "ui-sans-serif, system-ui, -apple-system, \"Segoe UI Variable Text\", \"Segoe UI\", \"Helvetica Neue\", Helvetica, Arial, sans-serif",
    "mono": "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace"
  },
  "headingWeight": 600,
  "radius": {
    "field": "999px",
    "box": "18px",
    "badge": "999px"
  },
  "shadow": "none",
  "density": "default",
  "glass": false,
  "light": {
    "bg": "#fcfcfb",
    "surface": "#fcfcfb",
    "surface2": "#f2f2f0",
    "fg": "#151515",
    "muted": "#5e5e5e",
    "border": "#d9d9d6",
    "input": "#8a8a86",
    "primary": "#151515",
    "primaryFg": "#fcfcfb",
    "secondary": "#f2f2f0",
    "secondaryFg": "#151515",
    "accent": "#b3261e",
    "accentFg": "#ffffff",
    "ring": "#151515",
    "success": "#15803d",
    "successFg": "#ffffff",
    "warning": "#b45309",
    "warningFg": "#ffffff",
    "danger": "#dc2626",
    "dangerFg": "#ffffff",
    "info": "#0369a1",
    "infoFg": "#ffffff",
    "primaryText": "#151515",
    "secondaryText": "#727271",
    "accentText": "#b3261e",
    "successText": "#15773a",
    "warningText": "#a74e0a",
    "dangerText": "#c42424",
    "infoText": "#0369a1",
    "link": "#151515"
  },
  "dark": {
    "bg": "#111111",
    "surface": "#111111",
    "surface2": "#1b1b1b",
    "fg": "#f0f0ee",
    "muted": "#a0a09c",
    "border": "#2c2c2c",
    "input": "#6b6b67",
    "primary": "#f0f0ee",
    "primaryFg": "#111111",
    "secondary": "#1b1b1b",
    "secondaryFg": "#f0f0ee",
    "accent": "#f47c6c",
    "accentFg": "#2a0500",
    "ring": "#f0f0ee",
    "success": "#4ade80",
    "successFg": "#052e16",
    "warning": "#fbbf24",
    "warningFg": "#1f1300",
    "danger": "#f87171",
    "dangerFg": "#210505",
    "info": "#38bdf8",
    "infoFg": "#03202d",
    "primaryText": "#f0f0ee",
    "secondaryText": "#7d7d7c",
    "accentText": "#f47c6c",
    "successText": "#4ade80",
    "warningText": "#fbbf24",
    "dangerText": "#f87171",
    "infoText": "#38bdf8",
    "link": "#f0f0ee"
  },
  "css": "[data-noodle=\"bucatini\"] {\n  --mn-bg: light-dark(#fcfcfb, #111111);\n  --mn-surface: light-dark(#fcfcfb, #111111);\n  --mn-surface-2: light-dark(#f2f2f0, #1b1b1b);\n  --mn-fg: light-dark(#151515, #f0f0ee);\n  --mn-muted: light-dark(#5e5e5e, #a0a09c);\n  --mn-border: light-dark(#d9d9d6, #2c2c2c);\n  --mn-input: light-dark(#8a8a86, #6b6b67);\n  --mn-primary: light-dark(#151515, #f0f0ee);\n  --mn-primary-fg: light-dark(#fcfcfb, #111111);\n  --mn-secondary: light-dark(#f2f2f0, #1b1b1b);\n  --mn-secondary-fg: light-dark(#151515, #f0f0ee);\n  --mn-accent: light-dark(#b3261e, #f47c6c);\n  --mn-accent-fg: light-dark(#ffffff, #2a0500);\n  --mn-ring: light-dark(#151515, #f0f0ee);\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(#151515, #f0f0ee);\n  --mn-secondary-text: light-dark(#727271, #7d7d7c);\n  --mn-accent-text: light-dark(#b3261e, #f47c6c);\n  --mn-success-text: light-dark(#15773a, #4ade80);\n  --mn-warning-text: light-dark(#a74e0a, #fbbf24);\n  --mn-danger-text: light-dark(#c42424, #f87171);\n  --mn-info-text: light-dark(#0369a1, #38bdf8);\n  --mn-link: light-dark(#151515, #f0f0ee);\n  --mn-font: ui-sans-serif, system-ui, -apple-system, \"Segoe UI Variable Text\", \"Segoe UI\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n  --mn-font-heading: ui-sans-serif, system-ui, -apple-system, \"Segoe UI Variable Text\", \"Segoe UI\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n  --mn-font-mono: ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace;\n  --mn-heading-weight: 600;\n  --mn-radius-field: 999px;\n  --mn-radius-box: 18px;\n  --mn-radius-badge: 999px;\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"
}