{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "maccheroni",
  "name": "Maccheroni",
  "family": "Bold",
  "origin": "Italy · Naples",
  "tagline": "Thick ink line, cut-out shadow, sweet colours.",
  "description": "Maccheroni are short elbows of pasta, the first shape a child draws. Maccheroni is a blunt, cheerful system: a thick ink line around everything, a solid shadow you could cut out with scissors, flat sweet colours and corners just rounded enough to be friendly. Pressing a button pushes it down onto its shadow.",
  "inspiration": [
    "The shape a child draws → a 2px ink outline around every element",
    "Short, sturdy elbows → solid offset shadows with no blur, like paper cut-outs",
    "Baked with cheese → butter yellow, mint and pink, flat, on cream",
    "Eaten with a spoon → big, obvious controls that move down onto their shadow when pressed"
  ],
  "traits": {
    "mood": [
      "brutal",
      "playful",
      "bold",
      "cheerful",
      "loud",
      "pastel",
      "honest",
      "indie"
    ],
    "intensity": 4,
    "contrast": "high",
    "geometry": "2px ink outlines, solid offset shadows, 8–12px corners",
    "type": "heavy grotesk",
    "surface": "flat sweet colours on cream",
    "motion": "physical: drops onto its shadow",
    "goodFor": [
      "indie products",
      "creator tools",
      "creative agencies",
      "education",
      "communities",
      "landing pages",
      "events"
    ],
    "lessFor": [
      "finance",
      "healthcare",
      "luxury",
      "dense admin"
    ],
    "density": "default"
  },
  "license": "LicenseRef-MIAN-1.0",
  "designLanguage": {
    "essence": "Maccheroni is blunt and cheerful. Everything has a 2px ink outline and a solid shadow offset 4px down and right, like shapes cut from coloured paper and stuck on a cream page. Colours are flat and sweet (butter yellow, mint, pink) and always carry ink text. A button rises a pixel when you point at it and drops onto its shadow when you press it. Nothing is subtle, so it needs space and few elements.",
    "principles": [
      "Ink outline on everything: 2px, the same colour as the text.",
      "Solid shadows, no blur: 2px for small things, 4px for controls and cards, 7px for overlays.",
      "Flat sweet fills with ink text. No gradients, no transparency.",
      "Press is physical: translate onto the shadow and remove it.",
      "Friendly corners: 8px and 12px, never zero, never pills for buttons."
    ],
    "aspects": {
      "Shape": "8px fields and buttons, 12px cards, 6px badges; tabs are outlined folders that fill when chosen.",
      "Surface": "Cream page, white surfaces, butter-yellow second surface. Nested cards lose the shadow.",
      "Colour": "Yellow primary, mint secondary, pink accent, all with #111 text. Dark mode keeps the same fills and turns the ink line cream.",
      "Type": "A grotesk at 800 for headings, 700 for controls and labels.",
      "Motion": "maccheroni-in: slides 4px from the top left in 160ms. Hover moves −1px, press moves +4px, both in 100ms.",
      "Data": "Outlined bars filled mint with the highlighted bar yellow; a 3px ink line with visible points."
    },
    "extend": [
      "Border: 2px solid var(--mn-border). Shadow: 4px 4px 0 var(--mn-border). Radius 12px.",
      "Fill with var(--mn-surface), or one of the three sweets (--mn-primary, --mn-secondary, --mn-accent) with var(--mn-fg) text.",
      "Hover: translate(-1px,-1px) and a 5px shadow. Active: translate(4px,4px) and no shadow.",
      "Selected: fill with var(--mn-primary); keep the outline.",
      "Inside a card, drop the shadow and keep only the outline.",
      "Remove the transforms under prefers-reduced-motion."
    ],
    "avoid": [
      "Soft or blurred shadows",
      "Gradients and glass",
      "Grey outlines",
      "Pill-shaped buttons",
      "Dense tables of small text"
    ],
    "recipe": "[data-noodle=\"maccheroni\"] .tile {\n  padding: 16px; border: 2px solid var(--mn-border); border-radius: 12px;\n  background: var(--mn-surface); color: var(--mn-fg);\n  box-shadow: 4px 4px 0 var(--mn-border);\n  transition: transform 100ms cubic-bezier(.2, 0, 0, 1), box-shadow 100ms;\n}\n[data-noodle=\"maccheroni\"] .tile:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--mn-border); }\n[data-noodle=\"maccheroni\"] .tile:active { transform: translate(4px, 4px); box-shadow: none; }\n[data-noodle=\"maccheroni\"] .tile[aria-selected=\"true\"] { background: var(--mn-primary); color: var(--mn-primary-fg); }\n@media (prefers-reduced-motion: reduce) { [data-noodle=\"maccheroni\"] .tile { transition: none; transform: none; } }"
  },
  "psychology": {
    "temperature": "warm",
    "colours": [
      {
        "role": "Primary",
        "hex": "#ffd23f",
        "family": "Yellow and gold",
        "depth": "mid, saturated",
        "says": "Optimism, attention, caution. Gold tones add value and ceremony.",
        "use": "Highlights, warnings, playful consumer brands; gold for luxury and awards.",
        "risk": "The lightest hue: white text on yellow fails, so yellow always carries dark text. Large yellow areas tire the eye."
      },
      {
        "role": "Accent",
        "hex": "#ff8fab",
        "family": "Red",
        "depth": "pale, 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": "#fffdf5",
        "family": "White and paper",
        "depth": "pale, saturated",
        "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": "Yellow and gold with red: a contrasting pair that needs one of the two to dominate.",
    "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": [
        "brutal",
        "playful",
        "bold",
        "cheerful",
        "loud"
      ],
      "intensity": 4,
      "dimensions": [
        "Excitement"
      ],
      "suits": [
        "indie products",
        "creator tools",
        "creative agencies",
        "education",
        "communities"
      ],
      "lessFor": [
        "finance",
        "healthcare",
        "luxury"
      ],
      "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/maccheroni",
  "markdownUrl": "https://mian.ro/ai/noodles/maccheroni.md",
  "stylesheet": "https://mian.ro/dist/noodles/maccheroni.css",
  "usage": "<html data-noodle=\"maccheroni\">",
  "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": "8px",
    "box": "12px",
    "badge": "6px"
  },
  "shadow": "hard",
  "density": "default",
  "glass": false,
  "light": {
    "bg": "#fffdf5",
    "surface": "#ffffff",
    "surface2": "#fff3c4",
    "fg": "#111111",
    "muted": "#4a4a4a",
    "border": "#111111",
    "input": "#111111",
    "primary": "#ffd23f",
    "primaryFg": "#111111",
    "secondary": "#90e0c9",
    "secondaryFg": "#111111",
    "accent": "#ff8fab",
    "accentFg": "#111111",
    "ring": "#111111",
    "success": "#15803d",
    "successFg": "#ffffff",
    "warning": "#b45309",
    "warningFg": "#ffffff",
    "danger": "#dc2626",
    "dangerFg": "#ffffff",
    "info": "#0369a1",
    "infoFg": "#ffffff",
    "primaryText": "#836e27",
    "secondaryText": "#50786d",
    "accentText": "#9b5a6a",
    "successText": "#15793a",
    "warningText": "#aa4f09",
    "dangerText": "#c82424",
    "infoText": "#0369a1",
    "link": "#836e27"
  },
  "dark": {
    "bg": "#121212",
    "surface": "#1c1c1c",
    "surface2": "#2a2616",
    "fg": "#fffdf5",
    "muted": "#b8b5a8",
    "border": "#fffdf5",
    "input": "#fffdf5",
    "primary": "#ffd23f",
    "primaryFg": "#111111",
    "secondary": "#90e0c9",
    "secondaryFg": "#111111",
    "accent": "#ff8fab",
    "accentFg": "#111111",
    "ring": "#ffd23f",
    "success": "#4ade80",
    "successFg": "#052e16",
    "warning": "#fbbf24",
    "warningFg": "#1f1300",
    "danger": "#f87171",
    "dangerFg": "#210505",
    "info": "#38bdf8",
    "infoFg": "#03202d",
    "primaryText": "#ffd23f",
    "secondaryText": "#90e0c9",
    "accentText": "#ff8fab",
    "successText": "#4ade80",
    "warningText": "#fbbf24",
    "dangerText": "#f87171",
    "infoText": "#38bdf8",
    "link": "#ffd23f"
  },
  "css": "[data-noodle=\"maccheroni\"] {\n  --mn-bg: light-dark(#fffdf5, #121212);\n  --mn-surface: light-dark(#ffffff, #1c1c1c);\n  --mn-surface-2: light-dark(#fff3c4, #2a2616);\n  --mn-fg: light-dark(#111111, #fffdf5);\n  --mn-muted: light-dark(#4a4a4a, #b8b5a8);\n  --mn-border: light-dark(#111111, #fffdf5);\n  --mn-input: light-dark(#111111, #fffdf5);\n  --mn-primary: light-dark(#ffd23f, #ffd23f);\n  --mn-primary-fg: light-dark(#111111, #111111);\n  --mn-secondary: light-dark(#90e0c9, #90e0c9);\n  --mn-secondary-fg: light-dark(#111111, #111111);\n  --mn-accent: light-dark(#ff8fab, #ff8fab);\n  --mn-accent-fg: light-dark(#111111, #111111);\n  --mn-ring: light-dark(#111111, #ffd23f);\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(#836e27, #ffd23f);\n  --mn-secondary-text: light-dark(#50786d, #90e0c9);\n  --mn-accent-text: light-dark(#9b5a6a, #ff8fab);\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(#836e27, #ffd23f);\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: 8px;\n  --mn-radius-box: 12px;\n  --mn-radius-badge: 6px;\n  --mn-shadow-sm: 2px 2px 0 currentColor;\n  --mn-shadow-md: 3px 3px 0 currentColor;\n  --mn-shadow-lg: 5px 5px 0 currentColor;\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"
}