{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "fusilli",
  "name": "Fusilli",
  "family": "Bold",
  "origin": "Italy · Campania",
  "tagline": "Twisted, springy, a little off-axis.",
  "description": "Fusilli are strands wound around a thin rod into springs. Fusilli is an expressive system for creative work: italic heavy headings, surfaces that tilt a degree on hover, spiral spinners, a springy overshoot on every press, basil green with a tomato accent.",
  "inspiration": [
    "Wound around a rod → italic, forward-leaning headings and a spiral spinner",
    "Springs → overshooting motion; pressed controls bounce back",
    "Never quite straight → cards and tiles lean one degree when you point at them",
    "Tossed with pesto and tomato → basil green with a tomato-red accent"
  ],
  "traits": {
    "mood": [
      "expressive",
      "playful",
      "energetic",
      "unusual",
      "springy",
      "creative"
    ],
    "intensity": 4,
    "contrast": "medium",
    "geometry": "rounded, tilting surfaces, italic lean",
    "type": "italic heavy sans",
    "surface": "white with soft green-tinted shadows",
    "motion": "springy overshoot, one-degree tilts",
    "goodFor": [
      "creative agencies",
      "studios",
      "portfolios",
      "startups",
      "communities",
      "product launches"
    ],
    "lessFor": [
      "finance",
      "legal",
      "healthcare",
      "dense admin"
    ],
    "density": "default"
  },
  "license": "LicenseRef-MIAN-1.0",
  "designLanguage": {
    "essence": "Fusilli is springy and a little off-axis, made for creative studios and people who want a page to feel alive without being noisy. Italic heavy headings lean forward, surfaces tilt one degree when pointed at, presses overshoot and settle, and a spiral spins while things load. Violet ink with a basil-green accent.",
    "principles": [
      "Lean forward: headings are italic and heavy; motion moves forward and up.",
      "Spring, then settle: every press overshoots slightly and returns; nothing jitters.",
      "One tilt at a time: only the element under the pointer leans, by one degree.",
      "Colour with intent: violet for action, green only for what is new or done."
    ],
    "aspects": {
      "Shape": "14px fields, 20px surfaces, pill badges and chips.",
      "Surface": "White with soft green-tinted shadows; tiles tilt 1° on hover.",
      "Colour": "Violet primary (#5b2bd9), basil green accent, lavender tints.",
      "Type": "Clean sans at 800, italic for display and titles.",
      "Motion": "fusilli-in: a twisting rise; presses use an overshooting spring.",
      "Data": "Rounded columns, basil-green highlight, spiral spinner."
    },
    "extend": [
      "Hover: transform: rotate(-1deg) translateY(-2px) with var(--mn-spring).",
      "Headings: font-style: italic; font-weight: 800; letter-spacing -.03em.",
      "Surfaces: border-radius var(--mn-radius-box); box-shadow: 0 10px 30px color-mix(in srgb, var(--mn-primary) 14%, transparent).",
      "Use the accent only for new/done states."
    ],
    "avoid": [
      "Tilting several things at once",
      "Rotation on text blocks people read",
      "Hard black shadows",
      "Constant looping animation"
    ],
    "recipe": "[data-noodle=\"fusilli\"] .tile { padding: 16px; border-radius: 20px; background: var(--mn-surface); box-shadow: 0 8px 24px color-mix(in srgb, var(--mn-primary) 12%, transparent); transition: transform 320ms var(--mn-spring); }\n[data-noodle=\"fusilli\"] .tile:hover { transform: rotate(-1deg) translateY(-2px); }"
  },
  "psychology": {
    "temperature": "warm",
    "colours": [
      {
        "role": "Primary",
        "hex": "#1f6b34",
        "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": "Accent",
        "hex": "#b8361d",
        "family": "Red",
        "depth": "mid, saturated",
        "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": "Page",
        "hex": "#fbfaf5",
        "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": "Green with red: 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": 800,
      "summary": "One voice throughout: neutral sans. Headings are heavy, which reads as loud and direct."
    },
    "personality": {
      "reads": [
        "expressive",
        "playful",
        "energetic",
        "unusual",
        "springy"
      ],
      "intensity": 4,
      "dimensions": [],
      "suits": [
        "creative agencies",
        "studios",
        "portfolios",
        "startups",
        "communities"
      ],
      "lessFor": [
        "finance",
        "legal",
        "healthcare"
      ],
      "tone": "Bold. Short claims, strong verbs, big numbers. Say one thing per screen and say it loudly."
    },
    "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/fusilli",
  "markdownUrl": "https://mian.ro/ai/noodles/fusilli.md",
  "stylesheet": "https://mian.ro/dist/noodles/fusilli.css",
  "usage": "<html data-noodle=\"fusilli\">",
  "fonts": {
    "sans": "ui-sans-serif, system-ui, -apple-system, \"Segoe UI Variable Text\", \"Segoe UI\", \"Helvetica Neue\", Helvetica, Arial, sans-serif",
    "heading": "ui-sans-serif, system-ui, -apple-system, \"Segoe UI Variable Text\", \"Segoe UI\", \"Helvetica Neue\", Helvetica, Arial, sans-serif",
    "mono": "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace"
  },
  "headingWeight": 800,
  "radius": {
    "field": "14px",
    "box": "20px",
    "badge": "999px"
  },
  "shadow": "soft",
  "density": "default",
  "glass": false,
  "light": {
    "bg": "#fbfaf5",
    "surface": "#ffffff",
    "surface2": "#eef2e6",
    "fg": "#141a12",
    "muted": "#565e50",
    "border": "#e2e6d8",
    "input": "#c3cab6",
    "primary": "#1f6b34",
    "primaryFg": "#ffffff",
    "secondary": "#e2efd9",
    "secondaryFg": "#14401f",
    "accent": "#b8361d",
    "accentFg": "#ffffff",
    "ring": "#1f6b34",
    "success": "#15803d",
    "successFg": "#ffffff",
    "warning": "#b45309",
    "warningFg": "#ffffff",
    "danger": "#dc2626",
    "dangerFg": "#ffffff",
    "info": "#0369a1",
    "infoFg": "#ffffff",
    "primaryText": "#1f6b34",
    "secondaryText": "#6b7366",
    "accentText": "#b8361d",
    "successText": "#15783a",
    "warningText": "#a74e0a",
    "dangerText": "#c82524",
    "infoText": "#0369a1",
    "link": "#1f6b34"
  },
  "dark": {
    "bg": "#0d120c",
    "surface": "#141b12",
    "surface2": "#1d271a",
    "fg": "#f0f5ea",
    "muted": "#a6b29c",
    "border": "#2a3626",
    "input": "#43523d",
    "primary": "#8fdc6a",
    "primaryFg": "#0d2204",
    "secondary": "#22331c",
    "secondaryFg": "#e6f5dc",
    "accent": "#ff8a6b",
    "accentFg": "#2a0a02",
    "ring": "#8fdc6a",
    "success": "#4ade80",
    "successFg": "#052e16",
    "warning": "#fbbf24",
    "warningFg": "#1f1300",
    "danger": "#f87171",
    "dangerFg": "#210505",
    "info": "#38bdf8",
    "infoFg": "#03202d",
    "primaryText": "#8fdc6a",
    "secondaryText": "#7d8877",
    "accentText": "#ff8a6b",
    "successText": "#4ade80",
    "warningText": "#fbbf24",
    "dangerText": "#f87171",
    "infoText": "#38bdf8",
    "link": "#8fdc6a"
  },
  "css": "[data-noodle=\"fusilli\"] {\n  --mn-bg: light-dark(#fbfaf5, #0d120c);\n  --mn-surface: light-dark(#ffffff, #141b12);\n  --mn-surface-2: light-dark(#eef2e6, #1d271a);\n  --mn-fg: light-dark(#141a12, #f0f5ea);\n  --mn-muted: light-dark(#565e50, #a6b29c);\n  --mn-border: light-dark(#e2e6d8, #2a3626);\n  --mn-input: light-dark(#c3cab6, #43523d);\n  --mn-primary: light-dark(#1f6b34, #8fdc6a);\n  --mn-primary-fg: light-dark(#ffffff, #0d2204);\n  --mn-secondary: light-dark(#e2efd9, #22331c);\n  --mn-secondary-fg: light-dark(#14401f, #e6f5dc);\n  --mn-accent: light-dark(#b8361d, #ff8a6b);\n  --mn-accent-fg: light-dark(#ffffff, #2a0a02);\n  --mn-ring: light-dark(#1f6b34, #8fdc6a);\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(#1f6b34, #8fdc6a);\n  --mn-secondary-text: light-dark(#6b7366, #7d8877);\n  --mn-accent-text: light-dark(#b8361d, #ff8a6b);\n  --mn-success-text: light-dark(#15783a, #4ade80);\n  --mn-warning-text: light-dark(#a74e0a, #fbbf24);\n  --mn-danger-text: light-dark(#c82524, #f87171);\n  --mn-info-text: light-dark(#0369a1, #38bdf8);\n  --mn-link: light-dark(#1f6b34, #8fdc6a);\n  --mn-font: ui-sans-serif, system-ui, -apple-system, \"Segoe UI Variable Text\", \"Segoe UI\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n  --mn-font-heading: ui-sans-serif, system-ui, -apple-system, \"Segoe UI Variable Text\", \"Segoe UI\", \"Helvetica Neue\", Helvetica, Arial, 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: 14px;\n  --mn-radius-box: 20px;\n  --mn-radius-badge: 999px;\n  --mn-shadow-sm: 0 1px 3px rgb(0 0 0 / .08);\n  --mn-shadow-md: 0 4px 14px -4px rgb(0 0 0 / .12), 0 2px 4px -2px rgb(0 0 0 / .06);\n  --mn-shadow-lg: 0 20px 48px -12px rgb(0 0 0 / .25), 0 8px 16px -8px rgb(0 0 0 / .10);\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"
}