{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "fettuccine",
  "name": "Fettuccine",
  "family": "Flat",
  "origin": "Italy · Rome",
  "tagline": "One sheet, many ribbons. Tonal and friendly.",
  "description": "Fettuccine, “little ribbons”, are all cut from a single sheet of egg dough. Fettuccine is a tonal system: every surface is a tint of one seed colour, layers are told apart by tone instead of lines, buttons are pills and anything you touch answers with a soft layer of its own colour.",
  "inspiration": [
    "Ribbons cut from one sheet → every surface is a tint of the same seed colour",
    "Layered on the plate → depth shown by tone: the higher the layer, the more colour it carries",
    "Soft egg dough → pill buttons, large radii, no hard lines between regions",
    "Tossed, not arranged → emphasised easing: things arrive quickly and settle slowly"
  ],
  "traits": {
    "mood": [
      "tonal",
      "friendly",
      "modern",
      "approachable",
      "clean",
      "trustworthy",
      "flat"
    ],
    "intensity": 2,
    "contrast": "medium",
    "geometry": "pill buttons, 20px cards, no dividers",
    "type": "system sans, regular headings",
    "surface": "surfaces tinted from one seed colour",
    "motion": "emphasised: quick start, slow settle",
    "goodFor": [
      "consumer apps",
      "mobile",
      "productivity",
      "education",
      "public services",
      "saas",
      "android apps"
    ],
    "lessFor": [
      "luxury",
      "editorial",
      "raw or brutal brands"
    ],
    "density": "comfortable"
  },
  "license": "LicenseRef-MIAN-1.0",
  "designLanguage": {
    "essence": "Fettuccine is a tonal system. One seed colour tints every surface: the page barely, cards a little, menus more, the chosen item most. Because layers differ by tone, lines between regions are unnecessary. Buttons are pills, the main one filled with the seed colour, and anything touched answers with a translucent layer of its own colour. Movement starts fast and settles slowly.",
    "principles": [
      "Tone is depth: page, card, menu and dialog are the surface mixed with 0, 5, 9 and 14% of the primary.",
      "No divider lines between regions; use a step in tone or 16–24px of space.",
      "State layers: hover and press add an 8–12% layer of the element’s content colour, they do not change its shape.",
      "One filled button per view; next come tonal (secondary) buttons, then outlined, then text buttons.",
      "Emphasised easing: cubic-bezier(.05,.7,.1,1), 200–260ms."
    ],
    "aspects": {
      "Shape": "Pill buttons, 12px fields, 20px cards, 28px dialogs, 8px chips. The switch thumb grows when it is on.",
      "Surface": "Tinted, borderless cards (--ft-1); menus and dialogs a step deeper (--ft-2) with a small two-layer shadow.",
      "Colour": "A blue seed (#0b57d0 / #a8c7fa), a pale tonal container for secondary actions, green as the second hue.",
      "Type": "The system font; headings at 400, controls at 500 with +0.01em tracking.",
      "Motion": "fettuccine-in: 8px rise and fade over 260ms with emphasised easing. No scale on press.",
      "Data": "Bars in the 14% tone with the highlighted bar in the seed colour; a 2.5px line with a 14% area."
    },
    "extend": [
      "Fill the new surface with color-mix(in oklab, var(--mn-primary) 5%, var(--mn-surface)) and remove its border.",
      "Hover: step to the 9% tone and add var(--ft-lift). Press: 12% tone, no movement.",
      "Selected: var(--mn-secondary) fill with var(--mn-secondary-fg) text, the same pair used by tonal buttons.",
      "Use an outline (1px var(--mn-input)) only for inputs and chips.",
      "Round by size: 8px for small things, 12px medium, 20px large, 28px for dialogs."
    ],
    "avoid": [
      "Divider lines between sections",
      "More than one filled button in a view",
      "Hard shadows",
      "Square corners",
      "Untinted grey surfaces"
    ],
    "recipe": "[data-noodle=\"fettuccine\"] .tile {\n  padding: 16px; border: 0; border-radius: 20px;\n  background: color-mix(in oklab, var(--mn-primary) 5%, var(--mn-surface)); color: var(--mn-fg);\n  transition: background-color 200ms cubic-bezier(.05, .7, .1, 1), box-shadow 200ms;\n}\n[data-noodle=\"fettuccine\"] .tile:hover { background: color-mix(in oklab, var(--mn-primary) 9%, var(--mn-surface)); box-shadow: 0 1px 2px rgb(0 0 0 / .18), 0 2px 6px 2px rgb(0 0 0 / .09); }\n[data-noodle=\"fettuccine\"] .tile[aria-selected=\"true\"] { background: var(--mn-secondary); color: var(--mn-secondary-fg); }"
  },
  "psychology": {
    "temperature": "cool",
    "colours": [
      {
        "role": "Primary",
        "hex": "#0b57d0",
        "family": "Blue",
        "depth": "mid, saturated",
        "says": "Trust, competence, calm, distance. The world’s most-liked colour and the default of banks, software and social networks.",
        "use": "Finance, enterprise, health, anything that must feel safe. Links are expected to be blue.",
        "risk": "The safest choice is also the least memorable. A blue brand is told apart by its typography, shape and tone of voice, not by its blue."
      },
      {
        "role": "Accent",
        "hex": "#146c2e",
        "family": "Green",
        "depth": "deep",
        "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": "#f8fafd",
        "family": "White and paper",
        "depth": "pale",
        "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": "Blue with green: a contrasting pair that needs one of the two to dominate.",
    "type": {
      "body": {
        "class": "system",
        "name": "System sans (the device’s own typeface)",
        "says": "Native, familiar, efficient. It disappears, which is the point: the product feels like part of the device.",
        "use": "Applications, dashboards, anything used daily.",
        "risk": "Carries no brand character at all. The brand must come from colour, shape, words and motion."
      },
      "heading": {
        "class": "system",
        "name": "System sans (the device’s own typeface)",
        "says": "Native, familiar, efficient. It disappears, which is the point: the product feels like part of the device.",
        "use": "Applications, dashboards, anything used daily.",
        "risk": "Carries no brand character at all. The brand must come from colour, shape, words and motion."
      },
      "weight": 400,
      "summary": "One voice throughout: system sans (the device’s own typeface). Headings are light to regular, which reads as delicate and unhurried."
    },
    "personality": {
      "reads": [
        "tonal",
        "friendly",
        "modern",
        "approachable",
        "clean"
      ],
      "intensity": 2,
      "dimensions": [],
      "suits": [
        "consumer apps",
        "mobile",
        "productivity",
        "education",
        "public services"
      ],
      "lessFor": [
        "luxury",
        "editorial",
        "raw or brutal brands"
      ],
      "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. Use a light or regular wordmark; a heavy one would overpower this interface."
  },
  "url": "https://mian.ro/noodles/fettuccine",
  "markdownUrl": "https://mian.ro/ai/noodles/fettuccine.md",
  "stylesheet": "https://mian.ro/dist/noodles/fettuccine.css",
  "usage": "<html data-noodle=\"fettuccine\">",
  "fonts": {
    "sans": "-apple-system, BlinkMacSystemFont, \"SF Pro Text\", \"SF Pro Display\", system-ui, \"Segoe UI Variable Text\", \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
    "heading": "-apple-system, BlinkMacSystemFont, \"SF Pro Text\", \"SF Pro Display\", system-ui, \"Segoe UI Variable Text\", \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
    "mono": "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace"
  },
  "headingWeight": 400,
  "radius": {
    "field": "12px",
    "box": "20px",
    "badge": "8px"
  },
  "shadow": "none",
  "density": "comfortable",
  "glass": false,
  "light": {
    "bg": "#f8fafd",
    "surface": "#ffffff",
    "surface2": "#e9eef6",
    "fg": "#1f1f1f",
    "muted": "#444746",
    "border": "#dde3ea",
    "input": "#747775",
    "primary": "#0b57d0",
    "primaryFg": "#ffffff",
    "secondary": "#d3e3fd",
    "secondaryFg": "#041e49",
    "accent": "#146c2e",
    "accentFg": "#ffffff",
    "ring": "#0b57d0",
    "success": "#15803d",
    "successFg": "#ffffff",
    "warning": "#b45309",
    "warningFg": "#ffffff",
    "danger": "#dc2626",
    "dangerFg": "#ffffff",
    "info": "#0369a1",
    "infoFg": "#ffffff",
    "primaryText": "#0b57d0",
    "secondaryText": "#6b717c",
    "accentText": "#146c2e",
    "successText": "#16783b",
    "warningText": "#a84f0b",
    "dangerText": "#c52525",
    "infoText": "#0369a1",
    "link": "#0b57d0"
  },
  "dark": {
    "bg": "#131314",
    "surface": "#1e1f20",
    "surface2": "#282a2c",
    "fg": "#e3e3e3",
    "muted": "#c4c7c5",
    "border": "#333537",
    "input": "#8e918f",
    "primary": "#a8c7fa",
    "primaryFg": "#062e6f",
    "secondary": "#004a77",
    "secondaryFg": "#c2e7ff",
    "accent": "#6dd58c",
    "accentFg": "#0a3818",
    "ring": "#a8c7fa",
    "success": "#4ade80",
    "successFg": "#052e16",
    "warning": "#fbbf24",
    "warningFg": "#1f1300",
    "danger": "#f87171",
    "dangerFg": "#210505",
    "info": "#38bdf8",
    "infoFg": "#03202d",
    "primaryText": "#a8c7fa",
    "secondaryText": "#6890a9",
    "accentText": "#6dd58c",
    "successText": "#4ade80",
    "warningText": "#fbbf24",
    "dangerText": "#f87171",
    "infoText": "#38bdf8",
    "link": "#a8c7fa"
  },
  "css": "[data-noodle=\"fettuccine\"] {\n  --mn-bg: light-dark(#f8fafd, #131314);\n  --mn-surface: light-dark(#ffffff, #1e1f20);\n  --mn-surface-2: light-dark(#e9eef6, #282a2c);\n  --mn-fg: light-dark(#1f1f1f, #e3e3e3);\n  --mn-muted: light-dark(#444746, #c4c7c5);\n  --mn-border: light-dark(#dde3ea, #333537);\n  --mn-input: light-dark(#747775, #8e918f);\n  --mn-primary: light-dark(#0b57d0, #a8c7fa);\n  --mn-primary-fg: light-dark(#ffffff, #062e6f);\n  --mn-secondary: light-dark(#d3e3fd, #004a77);\n  --mn-secondary-fg: light-dark(#041e49, #c2e7ff);\n  --mn-accent: light-dark(#146c2e, #6dd58c);\n  --mn-accent-fg: light-dark(#ffffff, #0a3818);\n  --mn-ring: light-dark(#0b57d0, #a8c7fa);\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(#0b57d0, #a8c7fa);\n  --mn-secondary-text: light-dark(#6b717c, #6890a9);\n  --mn-accent-text: light-dark(#146c2e, #6dd58c);\n  --mn-success-text: light-dark(#16783b, #4ade80);\n  --mn-warning-text: light-dark(#a84f0b, #fbbf24);\n  --mn-danger-text: light-dark(#c52525, #f87171);\n  --mn-info-text: light-dark(#0369a1, #38bdf8);\n  --mn-link: light-dark(#0b57d0, #a8c7fa);\n  --mn-font: -apple-system, BlinkMacSystemFont, \"SF Pro Text\", \"SF Pro Display\", system-ui, \"Segoe UI Variable Text\", \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n  --mn-font-heading: -apple-system, BlinkMacSystemFont, \"SF Pro Text\", \"SF Pro Display\", system-ui, \"Segoe UI Variable Text\", \"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: 400;\n  --mn-radius-field: 12px;\n  --mn-radius-box: 20px;\n  --mn-radius-badge: 8px;\n  --mn-shadow-sm: none;\n  --mn-shadow-md: none;\n  --mn-shadow-lg: none;\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"
}