{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "penne",
  "name": "Penne",
  "family": "Minimal",
  "origin": "Italy · Campania",
  "tagline": "Plain, neutral, cut once.",
  "description": "Penne, “quills”, are plain tubes cut once on the diagonal and otherwise left alone. Penne is a neutral product system: a white page, soft grey wells instead of outlines, pill-shaped controls, black for the one thing to press and overlays that float on a wide, soft shadow.",
  "inspiration": [
    "A plain tube, nothing added → no borders on fields, no decoration, grey and white only",
    "Cut once, on the diagonal → one decisive element per screen: a single black button",
    "Smooth (lisce), not ridged → soft pill shapes and large, even corner radii",
    "Holds whatever sauce it is given → a neutral frame that lets the content be the colour"
  ],
  "traits": {
    "mood": [
      "neutral",
      "minimal",
      "clean",
      "modern",
      "quiet",
      "soft",
      "product-first"
    ],
    "intensity": 1,
    "contrast": "high",
    "geometry": "pills and large radii, no field borders",
    "type": "system sans",
    "surface": "white with grey wells, floating overlays",
    "motion": "short, soft",
    "goodFor": [
      "ai products",
      "assistants and chat",
      "consumer apps",
      "saas",
      "productivity",
      "developer tools",
      "search"
    ],
    "lessFor": [
      "editorial",
      "heritage brands",
      "children"
    ],
    "density": "comfortable"
  },
  "license": "LicenseRef-MIAN-1.0",
  "designLanguage": {
    "essence": "Penne is the neutral product interface: a white page, soft grey wells where you type, pill-shaped controls and black for the one thing to press. It has no borders on fields and no colour of its own, so whatever the product shows (a message, an image, a result) is the only thing with character. Menus and dialogs float on a wide, soft shadow with no edge.",
    "principles": [
      "Wells, not outlines: inputs, chips and unselected tabs are filled with var(--mn-surface-2) and have no border.",
      "One black button per view. Everything else is grey or ghost.",
      "Pills and large radii: controls are fully rounded, containers 20px.",
      "The content is the colour. The interface stays black, white and grey; a green accent exists only for confirmation.",
      "Overlays float: no border, a 16px/48px soft shadow."
    ],
    "aspects": {
      "Shape": "Fully rounded buttons, inputs and tabs (24px radius); 20px cards; 16px menus with 10px items.",
      "Surface": "White on white. Fields and chips are #f4f4f4 wells that turn white with a black edge on focus. Cards have a 1px #ececec edge and no shadow.",
      "Colour": "Ink primary (#0d0d0d / #f9f9f9), neutral greys, one green accent. No tinted neutrals.",
      "Type": "The system font, 400 for text and 500 for controls, headings at 600 tracked −0.03em.",
      "Motion": "penne-in: scale from .98 and fade in 200ms. Pressed buttons scale to .97.",
      "Data": "Pill bars in grey with the highlighted bar in ink; a 2px ink line."
    },
    "extend": [
      "Use var(--mn-surface-2) as the fill for anything that holds input or can be chosen; remove the border.",
      "Hover on a well: 4% darker. Focus: white fill and a 1px var(--mn-fg) edge, no glow.",
      "Selected in a group: var(--mn-surface) thumb with a 1px/3px shadow inside a grey track.",
      "Anything that floats: border-color transparent, box-shadow var(--pn-float), radius 16–20px.",
      "Keep one ink-filled control per view; make the rest ghost or outline."
    ],
    "avoid": [
      "Outlined inputs",
      "Coloured primary buttons",
      "Square corners",
      "Tinted or gradient backgrounds",
      "Several filled buttons side by side"
    ],
    "recipe": "[data-noodle=\"penne\"] .tile {\n  padding: 16px 18px; border: 1px solid transparent; border-radius: 20px;\n  background: var(--mn-surface-2); color: var(--mn-fg);\n  transition: background-color 160ms cubic-bezier(.16, 1, .3, 1), border-color 160ms;\n}\n[data-noodle=\"penne\"] .tile:hover { background: color-mix(in oklab, var(--mn-surface-2), var(--mn-fg) 4%); }\n[data-noodle=\"penne\"] .tile[aria-selected=\"true\"] { background: var(--mn-surface); border-color: var(--mn-fg); }"
  },
  "psychology": {
    "temperature": "neutral",
    "colours": [
      {
        "role": "Primary",
        "hex": "#0d0d0d",
        "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": "#0f6e58",
        "family": "Teal and cyan",
        "depth": "deep, saturated",
        "says": "Clarity, cleanliness, calm technology. Cooler than green, softer than blue.",
        "use": "Health tech, wellness, productivity tools, water and travel.",
        "risk": "Very common in medical and SaaS products, so it needs a distinctive neutral or typeface to be remembered."
      },
      {
        "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 teal and cyan accent: the accent means “look here” precisely because nothing else is coloured.",
    "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": 600,
      "summary": "One voice throughout: system sans (the device’s own typeface). Headings are semibold, which reads as confident without shouting."
    },
    "personality": {
      "reads": [
        "neutral",
        "minimal",
        "clean",
        "modern",
        "quiet"
      ],
      "intensity": 1,
      "dimensions": [
        "Competence"
      ],
      "suits": [
        "ai products",
        "assistants and chat",
        "consumer apps",
        "saas",
        "productivity"
      ],
      "lessFor": [
        "editorial",
        "heritage brands",
        "children"
      ],
      "tone": "Quiet. Plain statements in sentence case, no exclamation marks, numbers with their units. Let space do the persuading."
    },
    "logo": "Round marks fit: a circular symbol or a soft, lowercase wordmark."
  },
  "url": "https://mian.ro/noodles/penne",
  "markdownUrl": "https://mian.ro/ai/noodles/penne.md",
  "stylesheet": "https://mian.ro/dist/noodles/penne.css",
  "usage": "<html data-noodle=\"penne\">",
  "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": 600,
  "radius": {
    "field": "24px",
    "box": "20px",
    "badge": "999px"
  },
  "shadow": "none",
  "density": "comfortable",
  "glass": false,
  "light": {
    "bg": "#ffffff",
    "surface": "#ffffff",
    "surface2": "#f4f4f4",
    "fg": "#0d0d0d",
    "muted": "#5d5d5d",
    "border": "#ececec",
    "input": "#d0d0d0",
    "primary": "#0d0d0d",
    "primaryFg": "#ffffff",
    "secondary": "#f4f4f4",
    "secondaryFg": "#0d0d0d",
    "accent": "#0f6e58",
    "accentFg": "#ffffff",
    "ring": "#0d0d0d",
    "success": "#15803d",
    "successFg": "#ffffff",
    "warning": "#b45309",
    "warningFg": "#ffffff",
    "danger": "#dc2626",
    "dangerFg": "#ffffff",
    "info": "#0369a1",
    "infoFg": "#ffffff",
    "primaryText": "#0d0d0d",
    "secondaryText": "#737373",
    "accentText": "#0f6e58",
    "successText": "#15793a",
    "warningText": "#aa4f09",
    "dangerText": "#c72424",
    "infoText": "#0369a1",
    "link": "#0d0d0d"
  },
  "dark": {
    "bg": "#1c1c1c",
    "surface": "#262626",
    "surface2": "#303030",
    "fg": "#ececec",
    "muted": "#b4b4b4",
    "border": "#363636",
    "input": "#4f4f4f",
    "primary": "#f9f9f9",
    "primaryFg": "#0d0d0d",
    "secondary": "#303030",
    "secondaryFg": "#ececec",
    "accent": "#6fd3b8",
    "accentFg": "#04241c",
    "ring": "#f9f9f9",
    "success": "#4ade80",
    "successFg": "#052e16",
    "warning": "#fbbf24",
    "warningFg": "#1f1300",
    "danger": "#f87171",
    "dangerFg": "#210505",
    "info": "#38bdf8",
    "infoFg": "#03202d",
    "primaryText": "#f9f9f9",
    "secondaryText": "#8e8e8e",
    "accentText": "#6fd3b8",
    "successText": "#4ade80",
    "warningText": "#fbbf24",
    "dangerText": "#f87676",
    "infoText": "#38bdf8",
    "link": "#f9f9f9"
  },
  "css": "[data-noodle=\"penne\"] {\n  --mn-bg: light-dark(#ffffff, #1c1c1c);\n  --mn-surface: light-dark(#ffffff, #262626);\n  --mn-surface-2: light-dark(#f4f4f4, #303030);\n  --mn-fg: light-dark(#0d0d0d, #ececec);\n  --mn-muted: light-dark(#5d5d5d, #b4b4b4);\n  --mn-border: light-dark(#ececec, #363636);\n  --mn-input: light-dark(#d0d0d0, #4f4f4f);\n  --mn-primary: light-dark(#0d0d0d, #f9f9f9);\n  --mn-primary-fg: light-dark(#ffffff, #0d0d0d);\n  --mn-secondary: light-dark(#f4f4f4, #303030);\n  --mn-secondary-fg: light-dark(#0d0d0d, #ececec);\n  --mn-accent: light-dark(#0f6e58, #6fd3b8);\n  --mn-accent-fg: light-dark(#ffffff, #04241c);\n  --mn-ring: light-dark(#0d0d0d, #f9f9f9);\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(#0d0d0d, #f9f9f9);\n  --mn-secondary-text: light-dark(#737373, #8e8e8e);\n  --mn-accent-text: light-dark(#0f6e58, #6fd3b8);\n  --mn-success-text: light-dark(#15793a, #4ade80);\n  --mn-warning-text: light-dark(#aa4f09, #fbbf24);\n  --mn-danger-text: light-dark(#c72424, #f87676);\n  --mn-info-text: light-dark(#0369a1, #38bdf8);\n  --mn-link: light-dark(#0d0d0d, #f9f9f9);\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: 600;\n  --mn-radius-field: 24px;\n  --mn-radius-box: 20px;\n  --mn-radius-badge: 999px;\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"
}