{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "gnocchi",
  "name": "Gnocchi",
  "family": "Rounded",
  "origin": "Italy · the north",
  "tagline": "Soft pillows. Clay you want to press.",
  "description": "Gnocchi are small pillows of potato dough, rolled over a fork so each one keeps the dent of a thumb. Gnocchi is a clay system: every element is a soft inflated shape lit from above, with a light inner edge on top, a darker one underneath and a wide coloured shadow. Things squash when pressed and pop back.",
  "inspiration": [
    "Pillows of soft dough → inflated shapes with a light inner edge above and a dark one below",
    "The dent of a thumb → fields and tracks are pressed in; buttons and cards are puffed out",
    "Squashes and springs back → pressing scales a control to 95%, release overshoots",
    "Butter, sage and tomato → peach clay, a tomato red and a butter yellow"
  ],
  "traits": {
    "mood": [
      "clay",
      "soft",
      "playful",
      "friendly",
      "puffy",
      "cheerful",
      "tactile",
      "3d"
    ],
    "intensity": 3,
    "contrast": "medium",
    "geometry": "inflated cushions, 28px corners",
    "type": "rounded heavy sans",
    "surface": "clay: inner light, inner shadow, tinted drop",
    "motion": "squash and spring",
    "goodFor": [
      "kids",
      "education",
      "consumer onboarding",
      "games",
      "wellness",
      "food",
      "landing pages"
    ],
    "lessFor": [
      "finance",
      "legal",
      "enterprise",
      "dense admin"
    ],
    "density": "comfortable"
  },
  "license": "LicenseRef-MIAN-1.0",
  "designLanguage": {
    "essence": "Gnocchi is clay. Every element looks like a soft, slightly inflated object lit from above: a light inner edge along the top, a darker one underneath, and a wide shadow in the colour of the thing itself. Fields and tracks are thumb dents pressed into the surface. Pressing a button squashes it to 95% and it springs back. It is friendly and physical, and it works best with few, large elements.",
    "principles": [
      "Puffed or pressed: things you act on are inflated; things you fill in are dented.",
      "Three shadows make clay: inner light on top, inner dark below, a soft tinted drop.",
      "No borders anywhere. The shadows are the edge.",
      "Big and few: 18px and 28px radii, comfortable sizes, heavy rounded type.",
      "Squash and spring: scale to .95 on press, overshoot slightly on release and entry."
    ],
    "aspects": {
      "Shape": "18px fields, 28px cards, pills for badges, tabs and progress; checkboxes are 8px-rounded cushions.",
      "Surface": "Warm peach clay. Cards carry --gn-clay; inputs, tracks and nested panels carry --gn-dent.",
      "Colour": "Tomato red primary, butter yellow secondary, teal accent. Coloured buttons take their inner light and shadow from their own colour.",
      "Type": "A rounded sans at 800 for headings and buttons, 700 for labels.",
      "Motion": "gnocchi-in: scales from .92, overshoots to 1.015 and settles in 320ms. Hover rises 1px; press squashes.",
      "Data": "Pill bars with the clay inner light; a 4px line."
    },
    "extend": [
      "Raised: background var(--mn-surface), border 0, box-shadow var(--gn-clay), radius 28px.",
      "A coloured raised element takes its shadows from its own colour: inset light = colour mixed 38% with white, inset dark = 20% with black.",
      "Pressed-in: background var(--mn-surface-2), box-shadow var(--gn-dent).",
      "Active: transform: scale(.95) with the spring curve; always remove transforms under reduced motion.",
      "Selected in a group: a small raised cushion (--gn-clay-sm) inside a dented track."
    ],
    "avoid": [
      "Borders and outlines",
      "Small, dense controls",
      "Flat fills with no inner light",
      "Sharp corners",
      "More than three colours on one screen"
    ],
    "recipe": "[data-noodle=\"gnocchi\"] .tile {\n  padding: 20px; border: 0; border-radius: 28px;\n  background: var(--mn-surface); color: var(--mn-fg);\n  box-shadow: var(--gn-clay);\n  transition: transform 180ms cubic-bezier(.34, 1.4, .64, 1), box-shadow 180ms;\n}\n[data-noodle=\"gnocchi\"] .tile:hover { transform: translateY(-3px); }\n[data-noodle=\"gnocchi\"] .tile:active { transform: scale(.97); }\n[data-noodle=\"gnocchi\"] .tile[aria-selected=\"true\"] { background: var(--mn-secondary); color: var(--mn-secondary-fg); }\n@media (prefers-reduced-motion: reduce) { [data-noodle=\"gnocchi\"] .tile { transition: none; transform: none; } }"
  },
  "psychology": {
    "temperature": "warm",
    "colours": [
      {
        "role": "Primary",
        "hex": "#c93c24",
        "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": "#1f7a6b",
        "family": "Teal and cyan",
        "depth": "mid",
        "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": "#fdf1e7",
        "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 against teal and cyan, close to complementary: strong contrast, so the accent must stay rare.",
    "type": {
      "body": {
        "class": "rounded",
        "name": "Rounded sans",
        "says": "Friendly, soft, safe, young.",
        "use": "Consumer apps, children, food, onboarding.",
        "risk": "Hard to take seriously for money, law or medicine."
      },
      "heading": {
        "class": "rounded",
        "name": "Rounded sans",
        "says": "Friendly, soft, safe, young.",
        "use": "Consumer apps, children, food, onboarding.",
        "risk": "Hard to take seriously for money, law or medicine."
      },
      "weight": 800,
      "summary": "One voice throughout: rounded sans. Headings are heavy, which reads as loud and direct."
    },
    "personality": {
      "reads": [
        "clay",
        "soft",
        "playful",
        "friendly",
        "puffy"
      ],
      "intensity": 3,
      "dimensions": [],
      "suits": [
        "kids",
        "education",
        "consumer onboarding",
        "games",
        "wellness"
      ],
      "lessFor": [
        "finance",
        "legal",
        "enterprise"
      ],
      "tone": "Lively. A point of view in the headline, concrete verbs, a little humour where it is true."
    },
    "logo": "Round marks fit: a circular symbol or a soft, lowercase wordmark. Use a heavy wordmark; a thin one would vanish beside these headings."
  },
  "url": "https://mian.ro/noodles/gnocchi",
  "markdownUrl": "https://mian.ro/ai/noodles/gnocchi.md",
  "stylesheet": "https://mian.ro/dist/noodles/gnocchi.css",
  "usage": "<html data-noodle=\"gnocchi\">",
  "fonts": {
    "sans": "ui-rounded, \"SF Pro Rounded\", \"Nunito\", ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif",
    "heading": "ui-rounded, \"SF Pro Rounded\", \"Nunito\", ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif",
    "mono": "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace"
  },
  "headingWeight": 800,
  "radius": {
    "field": "18px",
    "box": "28px",
    "badge": "999px"
  },
  "shadow": "none",
  "density": "comfortable",
  "glass": false,
  "light": {
    "bg": "#fdf1e7",
    "surface": "#fff8f1",
    "surface2": "#f7e4d3",
    "fg": "#2b1d14",
    "muted": "#6b5547",
    "border": "#f0d9c6",
    "input": "#dcc0a8",
    "primary": "#c93c24",
    "primaryFg": "#ffffff",
    "secondary": "#ffd166",
    "secondaryFg": "#3a2a00",
    "accent": "#1f7a6b",
    "accentFg": "#ffffff",
    "ring": "#c93c24",
    "success": "#15803d",
    "successFg": "#ffffff",
    "warning": "#b45309",
    "warningFg": "#ffffff",
    "danger": "#dc2626",
    "dangerFg": "#ffffff",
    "info": "#0369a1",
    "infoFg": "#ffffff",
    "primaryText": "#b63822",
    "secondaryText": "#846936",
    "accentText": "#207162",
    "successText": "#187438",
    "warningText": "#a44d0a",
    "dangerText": "#c02523",
    "infoText": "#0369a1",
    "link": "#c93c24"
  },
  "dark": {
    "bg": "#1d1512",
    "surface": "#281d18",
    "surface2": "#342621",
    "fg": "#fdeee2",
    "muted": "#c7ab9a",
    "border": "#40302a",
    "input": "#5e483e",
    "primary": "#ff8f73",
    "primaryFg": "#3a0d02",
    "secondary": "#ffd166",
    "secondaryFg": "#3a2a00",
    "accent": "#6fd6c3",
    "accentFg": "#04302a",
    "ring": "#ff8f73",
    "success": "#4ade80",
    "successFg": "#052e16",
    "warning": "#fbbf24",
    "warningFg": "#1f1300",
    "danger": "#f87171",
    "dangerFg": "#210505",
    "info": "#38bdf8",
    "infoFg": "#03202d",
    "primaryText": "#ff8f73",
    "secondaryText": "#ffd166",
    "accentText": "#6fd6c3",
    "successText": "#4ade80",
    "warningText": "#fbbf24",
    "dangerText": "#f87171",
    "infoText": "#38bdf8",
    "link": "#ff8f73"
  },
  "css": "[data-noodle=\"gnocchi\"] {\n  --mn-bg: light-dark(#fdf1e7, #1d1512);\n  --mn-surface: light-dark(#fff8f1, #281d18);\n  --mn-surface-2: light-dark(#f7e4d3, #342621);\n  --mn-fg: light-dark(#2b1d14, #fdeee2);\n  --mn-muted: light-dark(#6b5547, #c7ab9a);\n  --mn-border: light-dark(#f0d9c6, #40302a);\n  --mn-input: light-dark(#dcc0a8, #5e483e);\n  --mn-primary: light-dark(#c93c24, #ff8f73);\n  --mn-primary-fg: light-dark(#ffffff, #3a0d02);\n  --mn-secondary: light-dark(#ffd166, #ffd166);\n  --mn-secondary-fg: light-dark(#3a2a00, #3a2a00);\n  --mn-accent: light-dark(#1f7a6b, #6fd6c3);\n  --mn-accent-fg: light-dark(#ffffff, #04302a);\n  --mn-ring: light-dark(#c93c24, #ff8f73);\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(#b63822, #ff8f73);\n  --mn-secondary-text: light-dark(#846936, #ffd166);\n  --mn-accent-text: light-dark(#207162, #6fd6c3);\n  --mn-success-text: light-dark(#187438, #4ade80);\n  --mn-warning-text: light-dark(#a44d0a, #fbbf24);\n  --mn-danger-text: light-dark(#c02523, #f87171);\n  --mn-info-text: light-dark(#0369a1, #38bdf8);\n  --mn-link: light-dark(#c93c24, #ff8f73);\n  --mn-font: ui-rounded, \"SF Pro Rounded\", \"Nunito\", ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif;\n  --mn-font-heading: ui-rounded, \"SF Pro Rounded\", \"Nunito\", ui-sans-serif, system-ui, -apple-system, \"Segoe 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: 18px;\n  --mn-radius-box: 28px;\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"
}