{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "farfalle",
  "name": "Farfalle",
  "family": "Flat",
  "origin": "Italy · Lombardy",
  "tagline": "Butterflies in pastel.",
  "description": "Farfalle, butterflies, or bow ties, are pinched in the middle from a small rectangle with crimped edges. Farfalle is a playful flat system in pastels: soft flat fills with no shadows, pinched bow-tie badges and tabs, crimped edges on dividers, and a springy flutter when things appear.",
  "inspiration": [
    "Pinched in the middle → badges and the selected tab are pinched at the waist like a bow tie",
    "Crimped edges → zig-zag dividers and the edge of the selected tab",
    "Served in summer salads → raspberry, mint and lilac pastels on a warm white page",
    "A butterfly → a springy, slightly tilted flutter on entrance"
  ],
  "traits": {
    "mood": [
      "playful",
      "pastel",
      "friendly",
      "social",
      "light-hearted"
    ],
    "intensity": 3,
    "contrast": "medium",
    "geometry": "pinched bow-tie shapes, rounded",
    "type": "friendly sans",
    "surface": "flat pastel",
    "motion": "bouncy",
    "goodFor": [
      "social apps",
      "communities",
      "kids and families",
      "consumer onboarding"
    ],
    "lessFor": [
      "finance",
      "legal",
      "enterprise"
    ],
    "density": "comfortable"
  },
  "license": "LicenseRef-MIAN-1.0",
  "designLanguage": {
    "essence": "Farfalle is playful and flat. Butterflies, or bow ties, are pinched in the middle from a small crimped rectangle, so badges and the chosen tab are pinched at the waist, dividers are crimped zig-zags, colour is flat pastel (raspberry, mint, lilac, butter) with no shadows, and things arrive with a springy, slightly tilted flutter.",
    "principles": [
      "Pinch the important thing: clip-path: var(--ff-pinch) on badges and the selected tab.",
      "Flat pastels do the separating: mint, lilac and butter surfaces; no shadows.",
      "Crimped, not ruled: zig-zag dividers and step connectors (--ff-crimp).",
      "Springy motion with a 1–2° tilt."
    ],
    "aspects": {
      "Shape": "12px controls, 18px containers, pill tabs; bow-tie badges.",
      "Surface": "White cards with a 2px pastel ring; butter footers; mint and lilac fills.",
      "Colour": "Raspberry primary, lilac accent, mint and butter tints on warm white.",
      "Type": "Rounded sans at 700–750.",
      "Motion": "farfalle-in: rise, tilt and settle with an overshoot (380ms); the spinner is a butterfly flapping.",
      "Data": "Lilac pill columns with a raspberry highlight; striped progress; a 30% donut."
    },
    "extend": [
      "background: var(--ff-mint) or var(--ff-lilac); border: 0; border-radius: 18px; no box-shadow.",
      "Emphasis: clip-path: var(--ff-pinch) with extra inline padding.",
      "Dividers: background: var(--ff-crimp); height: 6px."
    ],
    "avoid": [
      "Drop shadows",
      "Dark, heavy colour",
      "Hairline grey borders"
    ],
    "recipe": "[data-noodle=\"farfalle\"] .tile { padding: 12px 18px; border: 0; border-radius: 18px; background: var(--ff-mint); font-weight: 700; }\n[data-noodle=\"farfalle\"] .tile[aria-selected=\"true\"] { background: var(--mn-primary); color: var(--mn-primary-fg); border-radius: 8px; clip-path: var(--ff-pinch); padding-inline: 24px; }"
  },
  "psychology": {
    "temperature": "warm",
    "colours": [
      {
        "role": "Primary",
        "hex": "#b5305e",
        "family": "Magenta and pink",
        "depth": "mid",
        "says": "Play, tenderness, boldness. Pale pinks are gentle; hot magenta is loud and modern.",
        "use": "Beauty, fashion, confectionery, youth brands, a single loud accent.",
        "risk": "Heavily gendered in some markets; test with the real audience instead of assuming."
      },
      {
        "role": "Accent",
        "hex": "#6f4fcf",
        "family": "Indigo and violet",
        "depth": "mid",
        "says": "Imagination, luxury, spirituality, the unusual.",
        "use": "Creative tools, beauty, premium or mystical products.",
        "risk": "A violet-to-blue gradient is the most recognised mark of a generated page. If violet is your brand, use it flat, with a warm second colour, and never as a gradient behind a centred headline."
      },
      {
        "role": "Page",
        "hex": "#fff8f5",
        "family": "White and paper",
        "depth": "pale, saturated",
        "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": "Magenta and pink with indigo and violet: a contrasting pair that needs one of the two to dominate.",
    "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": 700,
      "summary": "One voice throughout: rounded sans. Headings are semibold, which reads as confident without shouting."
    },
    "personality": {
      "reads": [
        "playful",
        "pastel",
        "friendly",
        "social",
        "light-hearted"
      ],
      "intensity": 3,
      "dimensions": [],
      "suits": [
        "social apps",
        "communities",
        "kids and families",
        "consumer onboarding"
      ],
      "lessFor": [
        "finance",
        "legal",
        "enterprise"
      ],
      "tone": "Lively. A point of view in the headline, concrete verbs, a little humour where it is true."
    },
    "logo": "A simple geometric mark with slightly softened corners fits; avoid both hard spikes and full circles."
  },
  "url": "https://mian.ro/noodles/farfalle",
  "markdownUrl": "https://mian.ro/ai/noodles/farfalle.md",
  "stylesheet": "https://mian.ro/dist/noodles/farfalle.css",
  "usage": "<html data-noodle=\"farfalle\">",
  "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": 700,
  "radius": {
    "field": "12px",
    "box": "18px",
    "badge": "999px"
  },
  "shadow": "none",
  "density": "comfortable",
  "glass": false,
  "light": {
    "bg": "#fff8f5",
    "surface": "#ffffff",
    "surface2": "#fdebe6",
    "fg": "#2a1f2d",
    "muted": "#6d5f70",
    "border": "#f3dcd6",
    "input": "#e3c3bb",
    "primary": "#b5305e",
    "primaryFg": "#ffffff",
    "secondary": "#e5f5ee",
    "secondaryFg": "#1f3a2e",
    "accent": "#6f4fcf",
    "accentFg": "#ffffff",
    "ring": "#b5305e",
    "success": "#15803d",
    "successFg": "#ffffff",
    "warning": "#b45309",
    "warningFg": "#ffffff",
    "danger": "#dc2626",
    "dangerFg": "#ffffff",
    "info": "#0369a1",
    "infoFg": "#ffffff",
    "primaryText": "#b5305e",
    "secondaryText": "#717076",
    "accentText": "#6f4fcf",
    "successText": "#17783c",
    "warningText": "#a94f0c",
    "dangerText": "#c72527",
    "infoText": "#0369a1",
    "link": "#b5305e"
  },
  "dark": {
    "bg": "#17121a",
    "surface": "#1f1823",
    "surface2": "#2a2130",
    "fg": "#fbeff5",
    "muted": "#bca9c1",
    "border": "#352a3b",
    "input": "#52435a",
    "primary": "#ff8db4",
    "primaryFg": "#3a0418",
    "secondary": "#1e3329",
    "secondaryFg": "#d9f5e7",
    "accent": "#b8a4ff",
    "accentFg": "#1c0f4a",
    "ring": "#ff8db4",
    "success": "#4ade80",
    "successFg": "#052e16",
    "warning": "#fbbf24",
    "warningFg": "#1f1300",
    "danger": "#f87171",
    "dangerFg": "#210505",
    "info": "#38bdf8",
    "infoFg": "#03202d",
    "primaryText": "#ff8db4",
    "secondaryText": "#7f8683",
    "accentText": "#b8a4ff",
    "successText": "#4ade80",
    "warningText": "#fbbf24",
    "dangerText": "#f87171",
    "infoText": "#38bdf8",
    "link": "#ff8db4"
  },
  "css": "[data-noodle=\"farfalle\"] {\n  --mn-bg: light-dark(#fff8f5, #17121a);\n  --mn-surface: light-dark(#ffffff, #1f1823);\n  --mn-surface-2: light-dark(#fdebe6, #2a2130);\n  --mn-fg: light-dark(#2a1f2d, #fbeff5);\n  --mn-muted: light-dark(#6d5f70, #bca9c1);\n  --mn-border: light-dark(#f3dcd6, #352a3b);\n  --mn-input: light-dark(#e3c3bb, #52435a);\n  --mn-primary: light-dark(#b5305e, #ff8db4);\n  --mn-primary-fg: light-dark(#ffffff, #3a0418);\n  --mn-secondary: light-dark(#e5f5ee, #1e3329);\n  --mn-secondary-fg: light-dark(#1f3a2e, #d9f5e7);\n  --mn-accent: light-dark(#6f4fcf, #b8a4ff);\n  --mn-accent-fg: light-dark(#ffffff, #1c0f4a);\n  --mn-ring: light-dark(#b5305e, #ff8db4);\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(#b5305e, #ff8db4);\n  --mn-secondary-text: light-dark(#717076, #7f8683);\n  --mn-accent-text: light-dark(#6f4fcf, #b8a4ff);\n  --mn-success-text: light-dark(#17783c, #4ade80);\n  --mn-warning-text: light-dark(#a94f0c, #fbbf24);\n  --mn-danger-text: light-dark(#c72527, #f87171);\n  --mn-info-text: light-dark(#0369a1, #38bdf8);\n  --mn-link: light-dark(#b5305e, #ff8db4);\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: 700;\n  --mn-radius-field: 12px;\n  --mn-radius-box: 18px;\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"
}