{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "lasagne",
  "name": "Lasagne",
  "family": "Flat",
  "origin": "Italy · Emilia-Romagna",
  "tagline": "Flat sheets, stacked in layers.",
  "description": "Lasagne are the flattest pasta there is, and the dish is built by stacking them: sheet, ragù, béchamel, sheet. Lasagne is a flat, layered system: solid colours with no gradients or blur, and surfaces stacked on visible offset layers of pasta yellow and ragù red.",
  "inspiration": [
    "Flat sheets → flat solid colour: no gradients, no blur, no soft shadows",
    "Built in layers → cards and buttons sit on offset layers of pasta yellow and ragù red that you can count",
    "Béchamel, ragù, basil → a cream page, tomato-red action and basil-green accent",
    "Cut into squares from the tray → firm 6px corners and a press that drops a layer"
  ],
  "traits": {
    "mood": [
      "flat",
      "layered",
      "structured",
      "warm",
      "playful"
    ],
    "intensity": 3,
    "contrast": "medium",
    "geometry": "flat sheets offset in layers",
    "type": "grotesk",
    "surface": "solid colour layers, no shadows",
    "motion": "slide between layers",
    "goodFor": [
      "education",
      "food",
      "public services",
      "consumer brands"
    ],
    "lessFor": [
      "quiet luxury",
      "dense data"
    ],
    "density": "default"
  },
  "license": "LicenseRef-MIAN-1.0",
  "designLanguage": {
    "essence": "Lasagne is flat and layered. The dish is built by stacking flat sheets, pasta, ragù, béchamel, pasta, so surfaces are flat solid colour with a 2px ink edge, sitting on offset layers you can count: pasta yellow, then ragù red. Pressing a button drops it onto its layer. No gradients, no blur, no soft shadows.",
    "principles": [
      "Flat colour only; depth is made of offset solid layers (--ls-layers), never blur.",
      "Two layers for containers (yellow 4px, red 8px), one layer for controls (yellow 3px).",
      "A 2px ink edge on everything you can touch.",
      "Press = the element moves onto its layer and the layer disappears."
    ],
    "aspects": {
      "Shape": "6px controls, 10px containers; square-ish, cut from a tray.",
      "Surface": "Cream sheets with 2px ink edges on stacked yellow and red offset layers.",
      "Colour": "Béchamel cream, ragù red, pasta yellow, basil green.",
      "Type": "Sans at 700–800 for headings, controls and table heads.",
      "Motion": "lasagne-in: layers slide in from the top left with a small overshoot; presses take 90ms.",
      "Data": "Columns stacked from sheets (repeating 10px bands), a red highlight, a thick 30% donut."
    },
    "extend": [
      "border: 2px solid var(--mn-fg); box-shadow: var(--ls-layers) for containers, var(--ls-layer) for controls.",
      "Selected: background var(--ls-sheet); color #2a160f; inset 0 0 0 2px var(--mn-fg).",
      ":active { transform: translate(3px, 3px); box-shadow: none; }"
    ],
    "avoid": [
      "Gradients or blur",
      "Soft shadows",
      "Hairline borders"
    ],
    "recipe": "[data-noodle=\"lasagne\"] .tile { padding: 12px 16px; border: 2px solid var(--mn-fg); border-radius: 10px; background: var(--mn-surface); box-shadow: var(--ls-layer); transition: transform 90ms, box-shadow 90ms; }\n[data-noodle=\"lasagne\"] .tile:active { transform: translate(3px, 3px); box-shadow: none; }\n[data-noodle=\"lasagne\"] .tile[aria-selected=\"true\"] { background: var(--ls-sheet); color: #2a160f; box-shadow: var(--ls-layers); }"
  },
  "psychology": {
    "temperature": "warm",
    "colours": [
      {
        "role": "Primary",
        "hex": "#b8322a",
        "family": "Red",
        "depth": "mid",
        "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": "#2e6b3a",
        "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": "#fbf4e4",
        "family": "Orange",
        "depth": "pale, 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."
      }
    ],
    "relation": "Red with green: a contrasting pair that needs one of the two to dominate.",
    "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": 750,
      "summary": "One voice throughout: neutral sans. Headings are heavy, which reads as loud and direct."
    },
    "personality": {
      "reads": [
        "flat",
        "layered",
        "structured",
        "warm",
        "playful"
      ],
      "intensity": 3,
      "dimensions": [],
      "suits": [
        "education",
        "food",
        "public services",
        "consumer brands"
      ],
      "lessFor": [
        "quiet luxury",
        "dense data"
      ],
      "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."
  },
  "url": "https://mian.ro/noodles/lasagne",
  "markdownUrl": "https://mian.ro/ai/noodles/lasagne.md",
  "stylesheet": "https://mian.ro/dist/noodles/lasagne.css",
  "usage": "<html data-noodle=\"lasagne\">",
  "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": 750,
  "radius": {
    "field": "6px",
    "box": "10px",
    "badge": "6px"
  },
  "shadow": "none",
  "density": "default",
  "glass": false,
  "light": {
    "bg": "#fbf4e4",
    "surface": "#fffaf0",
    "surface2": "#f3e7cc",
    "fg": "#2a160f",
    "muted": "#6e5446",
    "border": "#ead9b8",
    "input": "#d8c29a",
    "primary": "#b8322a",
    "primaryFg": "#ffffff",
    "secondary": "#f3e7cc",
    "secondaryFg": "#2a160f",
    "accent": "#2e6b3a",
    "accentFg": "#ffffff",
    "ring": "#b8322a",
    "success": "#15803d",
    "successFg": "#ffffff",
    "warning": "#b45309",
    "warningFg": "#ffffff",
    "danger": "#dc2626",
    "dangerFg": "#ffffff",
    "info": "#0369a1",
    "infoFg": "#ffffff",
    "primaryText": "#b8322a",
    "secondaryText": "#7a6a5b",
    "accentText": "#2e6b3a",
    "successText": "#177538",
    "warningText": "#a64d0a",
    "dangerText": "#c32423",
    "infoText": "#0369a1",
    "link": "#b8322a"
  },
  "dark": {
    "bg": "#1a110c",
    "surface": "#22160f",
    "surface2": "#2e1e15",
    "fg": "#fbefdc",
    "muted": "#c3a993",
    "border": "#3a281d",
    "input": "#5a4130",
    "primary": "#ef6b5f",
    "primaryFg": "#2a0703",
    "secondary": "#2e1e15",
    "secondaryFg": "#fbefdc",
    "accent": "#7cc48a",
    "accentFg": "#0b2410",
    "ring": "#ef6b5f",
    "success": "#4ade80",
    "successFg": "#052e16",
    "warning": "#fbbf24",
    "warningFg": "#1f1300",
    "danger": "#f87171",
    "dangerFg": "#210505",
    "info": "#38bdf8",
    "infoFg": "#03202d",
    "primaryText": "#ef6b5f",
    "secondaryText": "#908275",
    "accentText": "#7cc48a",
    "successText": "#4ade80",
    "warningText": "#fbbf24",
    "dangerText": "#f87171",
    "infoText": "#38bdf8",
    "link": "#ef6b5f"
  },
  "css": "[data-noodle=\"lasagne\"] {\n  --mn-bg: light-dark(#fbf4e4, #1a110c);\n  --mn-surface: light-dark(#fffaf0, #22160f);\n  --mn-surface-2: light-dark(#f3e7cc, #2e1e15);\n  --mn-fg: light-dark(#2a160f, #fbefdc);\n  --mn-muted: light-dark(#6e5446, #c3a993);\n  --mn-border: light-dark(#ead9b8, #3a281d);\n  --mn-input: light-dark(#d8c29a, #5a4130);\n  --mn-primary: light-dark(#b8322a, #ef6b5f);\n  --mn-primary-fg: light-dark(#ffffff, #2a0703);\n  --mn-secondary: light-dark(#f3e7cc, #2e1e15);\n  --mn-secondary-fg: light-dark(#2a160f, #fbefdc);\n  --mn-accent: light-dark(#2e6b3a, #7cc48a);\n  --mn-accent-fg: light-dark(#ffffff, #0b2410);\n  --mn-ring: light-dark(#b8322a, #ef6b5f);\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(#b8322a, #ef6b5f);\n  --mn-secondary-text: light-dark(#7a6a5b, #908275);\n  --mn-accent-text: light-dark(#2e6b3a, #7cc48a);\n  --mn-success-text: light-dark(#177538, #4ade80);\n  --mn-warning-text: light-dark(#a64d0a, #fbbf24);\n  --mn-danger-text: light-dark(#c32423, #f87171);\n  --mn-info-text: light-dark(#0369a1, #38bdf8);\n  --mn-link: light-dark(#b8322a, #ef6b5f);\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: 750;\n  --mn-radius-field: 6px;\n  --mn-radius-box: 10px;\n  --mn-radius-badge: 6px;\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"
}