{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "cavatelli",
  "name": "Cavatelli",
  "family": "Rounded",
  "origin": "Italy · Molise and Puglia",
  "tagline": "One material, pressed in and pushed out.",
  "description": "Cavatelli, “little hollows”, are small pieces of dough dragged under two fingers so they curl around the dent. Cavatelli is a soft, single-material system: page and surface are the same colour, and every element is either pushed out of the page or pressed into it, drawn only by a light and a shadow. Colour is kept for what is switched on.",
  "inspiration": [
    "One piece of dough, dented → one colour for page and surface; shape comes from light and shadow alone",
    "Dragged under two fingers → two states only: raised (resting, tappable) and pressed in (fields, tracks, active)",
    "A hollow that holds the sauce → wells for inputs, progress and selected tabs",
    "Pale durum wheat → a cool pale grey with a single blue for what is on"
  ],
  "traits": {
    "mood": [
      "soft",
      "monochrome",
      "calm",
      "tactile",
      "quiet",
      "embossed",
      "minimal"
    ],
    "intensity": 2,
    "contrast": "low",
    "geometry": "soft extruded shapes, 14–22px corners",
    "type": "clean sans",
    "surface": "one material: raised or pressed in",
    "motion": "slow, no movement",
    "goodFor": [
      "smart home",
      "audio",
      "calculators and tools",
      "wellness",
      "hardware companions",
      "personal dashboards"
    ],
    "lessFor": [
      "dense admin",
      "content-heavy sites",
      "e-commerce",
      "data tables"
    ],
    "density": "comfortable"
  },
  "license": "LicenseRef-MIAN-1.0",
  "designLanguage": {
    "essence": "Cavatelli is one material. The page, the cards and the controls are the same pale colour, and every element is either pushed out of that surface or pressed into it; a light from the top left and a shadow to the bottom right are the only things that draw it. Because edges are soft, state has to be unmistakable: colour is reserved for what is on, and every control keeps a visible boundary or a strong inner shadow.",
    "principles": [
      "One colour for page and surface. Never put a white card on the grey page.",
      "Two states of the material: raised (can be pressed) and inset (holds a value, or is pressed).",
      "Light from the top left, always: a light shadow up-left, a dark one down-right.",
      "Colour means on: the blue appears for the checked switch, the chosen tab’s text, the progress fill.",
      "Keep it legible: text is full-contrast ink, checkboxes and switches keep a 1px boundary."
    ],
    "aspects": {
      "Shape": "14px fields, 22px cards, pill badges and tracks.",
      "Surface": "Raised: 7px/16px twin shadows (--cv-out). Inset: twin inner shadows (--cv-in). Overlays use a larger pair.",
      "Colour": "Cool pale grey (#e8ecf1) or slate (#23272e); a single blue for on-states; a teal accent.",
      "Type": "A clean sans, headings at 650 tracked −0.025em.",
      "Motion": "cavatelli-in: scale from .985 and fade in 260ms. Pressing swaps the raised shadow for the inset one; nothing moves.",
      "Data": "Pill bars in 14% ink with the highlighted bar in blue; a 3px line."
    },
    "extend": [
      "Raised: background var(--mn-bg), border 0, box-shadow var(--cv-out) (or --cv-out-sm for small things).",
      "Inset: same background, box-shadow var(--cv-in).",
      "Press = swap raised for inset, with no transform.",
      "Selected in a group: a raised chip inside an inset track, with its label in var(--mn-primary-text).",
      "Anything that must be found by people with low vision (checkbox, switch, field on focus) also gets a 1px var(--mn-input) or var(--mn-ring) edge."
    ],
    "avoid": [
      "White or tinted cards on the page",
      "Coloured fills for resting buttons other than the primary",
      "Hard borders as the main edge",
      "Low-contrast grey text",
      "Stacking raised elements on raised elements"
    ],
    "recipe": "[data-noodle=\"cavatelli\"] .tile {\n  padding: 18px; border: 1px solid transparent; border-radius: 22px;\n  background: var(--mn-bg); color: var(--mn-fg);\n  box-shadow: var(--cv-out);\n  transition: box-shadow 200ms cubic-bezier(.16, 1, .3, 1);\n}\n[data-noodle=\"cavatelli\"] .tile:active { box-shadow: var(--cv-in); }\n[data-noodle=\"cavatelli\"] .tile[aria-selected=\"true\"] { box-shadow: var(--cv-in); color: var(--mn-primary-text); border-color: var(--mn-ring); }"
  },
  "psychology": {
    "temperature": "cool",
    "colours": [
      {
        "role": "Primary",
        "hex": "#2a56c6",
        "family": "Blue",
        "depth": "mid",
        "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": "#0f766e",
        "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": "#e8ecf1",
        "family": "Blue",
        "depth": "pale, muted",
        "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."
      }
    ],
    "relation": "Blue with its neighbour teal and cyan: an analogous pair, harmonious and natural.",
    "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": 650,
      "summary": "One voice throughout: neutral sans. Headings are semibold, which reads as confident without shouting."
    },
    "personality": {
      "reads": [
        "soft",
        "monochrome",
        "calm",
        "tactile",
        "quiet"
      ],
      "intensity": 2,
      "dimensions": [],
      "suits": [
        "smart home",
        "audio",
        "calculators and tools",
        "wellness",
        "hardware companions"
      ],
      "lessFor": [
        "dense admin",
        "content-heavy sites",
        "e-commerce"
      ],
      "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/cavatelli",
  "markdownUrl": "https://mian.ro/ai/noodles/cavatelli.md",
  "stylesheet": "https://mian.ro/dist/noodles/cavatelli.css",
  "usage": "<html data-noodle=\"cavatelli\">",
  "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": 650,
  "radius": {
    "field": "14px",
    "box": "22px",
    "badge": "999px"
  },
  "shadow": "none",
  "density": "comfortable",
  "glass": false,
  "light": {
    "bg": "#e8ecf1",
    "surface": "#e8ecf1",
    "surface2": "#dde2e9",
    "fg": "#1c2430",
    "muted": "#4a5565",
    "border": "#d5dbe3",
    "input": "#8c97a6",
    "primary": "#2a56c6",
    "primaryFg": "#ffffff",
    "secondary": "#dde2e9",
    "secondaryFg": "#1c2430",
    "accent": "#0f766e",
    "accentFg": "#ffffff",
    "ring": "#2a56c6",
    "success": "#15803d",
    "successFg": "#ffffff",
    "warning": "#b45309",
    "warningFg": "#ffffff",
    "danger": "#dc2626",
    "dangerFg": "#ffffff",
    "info": "#0369a1",
    "infoFg": "#ffffff",
    "primaryText": "#2a55c3",
    "secondaryText": "#616873",
    "accentText": "#116964",
    "successText": "#176c3a",
    "warningText": "#964a11",
    "dangerText": "#ae2628",
    "infoText": "#056398",
    "link": "#2a56c6"
  },
  "dark": {
    "bg": "#23272e",
    "surface": "#23272e",
    "surface2": "#2b3038",
    "fg": "#e9edf3",
    "muted": "#a7b0bd",
    "border": "#30353e",
    "input": "#6b7482",
    "primary": "#8fb0ff",
    "primaryFg": "#0a1a40",
    "secondary": "#2b3038",
    "secondaryFg": "#e9edf3",
    "accent": "#5eead4",
    "accentFg": "#042f2b",
    "ring": "#8fb0ff",
    "success": "#4ade80",
    "successFg": "#052e16",
    "warning": "#fbbf24",
    "warningFg": "#1f1300",
    "danger": "#f87171",
    "dangerFg": "#210505",
    "info": "#38bdf8",
    "infoFg": "#03202d",
    "primaryText": "#8fb0ff",
    "secondaryText": "#8a8f96",
    "accentText": "#5eead4",
    "successText": "#4ade80",
    "warningText": "#fbbf24",
    "dangerText": "#f77676",
    "infoText": "#38bdf8",
    "link": "#8fb0ff"
  },
  "css": "[data-noodle=\"cavatelli\"] {\n  --mn-bg: light-dark(#e8ecf1, #23272e);\n  --mn-surface: light-dark(#e8ecf1, #23272e);\n  --mn-surface-2: light-dark(#dde2e9, #2b3038);\n  --mn-fg: light-dark(#1c2430, #e9edf3);\n  --mn-muted: light-dark(#4a5565, #a7b0bd);\n  --mn-border: light-dark(#d5dbe3, #30353e);\n  --mn-input: light-dark(#8c97a6, #6b7482);\n  --mn-primary: light-dark(#2a56c6, #8fb0ff);\n  --mn-primary-fg: light-dark(#ffffff, #0a1a40);\n  --mn-secondary: light-dark(#dde2e9, #2b3038);\n  --mn-secondary-fg: light-dark(#1c2430, #e9edf3);\n  --mn-accent: light-dark(#0f766e, #5eead4);\n  --mn-accent-fg: light-dark(#ffffff, #042f2b);\n  --mn-ring: light-dark(#2a56c6, #8fb0ff);\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(#2a55c3, #8fb0ff);\n  --mn-secondary-text: light-dark(#616873, #8a8f96);\n  --mn-accent-text: light-dark(#116964, #5eead4);\n  --mn-success-text: light-dark(#176c3a, #4ade80);\n  --mn-warning-text: light-dark(#964a11, #fbbf24);\n  --mn-danger-text: light-dark(#ae2628, #f77676);\n  --mn-info-text: light-dark(#056398, #38bdf8);\n  --mn-link: light-dark(#2a56c6, #8fb0ff);\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: 650;\n  --mn-radius-field: 14px;\n  --mn-radius-box: 22px;\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"
}