{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "chitarra",
  "name": "Chitarra",
  "family": "Minimal",
  "origin": "Italy · Abruzzo",
  "tagline": "Black, white, one blue. Cut on steel strings.",
  "description": "Spaghetti alla chitarra is pressed through a frame strung like a guitar, so every strand comes out square and identical. Chitarra is a stark system for feeds and timelines: true black or true white, hairline rules from edge to edge, heavy type, pill buttons and a single blue for what is live or chosen.",
  "inspiration": [
    "Pressed through steel strings → hairline rules that run edge to edge and divide everything",
    "Square, identical strands → rows of equal items: lists, feeds and timelines before cards",
    "Semolina and egg, nothing else → two colours, black and white, with one blue",
    "A firm bite → heavy 700–800 type and motion that answers in 120ms"
  ],
  "traits": {
    "mood": [
      "stark",
      "bold",
      "fast",
      "direct",
      "minimal",
      "high-contrast",
      "social"
    ],
    "intensity": 3,
    "contrast": "high",
    "geometry": "pill buttons, edge-to-edge hairline rules",
    "type": "heavy system sans",
    "surface": "true black or white, flat",
    "motion": "instant",
    "goodFor": [
      "social apps",
      "feeds and timelines",
      "news",
      "communities",
      "media apps",
      "messaging",
      "sport"
    ],
    "lessFor": [
      "luxury",
      "wellness",
      "children"
    ],
    "density": "default"
  },
  "license": "LicenseRef-MIAN-1.0",
  "designLanguage": {
    "essence": "Chitarra is a stark system for streams of content: feeds, timelines, inboxes. The page is true white or true black, items are separated by hairline rules that run from edge to edge rather than by cards, type is heavy, and every button is a pill. One blue marks what is live, linked or selected. It answers in 120ms and never decorates.",
    "principles": [
      "Rules before boxes: separate rows with a 1px rule; use a card only when something must stand apart.",
      "True black and true white. Greys are for secondary text and rules only.",
      "One blue (#0f6cbd / #1d9bf0) for links, the selected tab, switches and focus.",
      "Heavy hierarchy: 800 for headings, 700 for names, buttons and chosen states, 400 for text.",
      "Instant: 120ms fades, opacity on press, no movement."
    ],
    "aspects": {
      "Shape": "Pill buttons, chips and inputs (24px); 16px containers; tabs as equal columns with a short 4px blue bar under the chosen one.",
      "Surface": "Flat. No shadows on resting surfaces; overlays get a soft all-round glow of the ink colour instead of a drop shadow.",
      "Colour": "Ink buttons, blue for state and links. Hover is a 10% wash of the element’s own colour.",
      "Type": "The system font. Headings 800 at −0.03em; labels and buttons 700.",
      "Motion": "chitarra-in: a 120ms fade. Pressed buttons drop to 85% opacity.",
      "Data": "Thin 2px bars in grey with the highlighted bar in blue; a 2px blue line."
    },
    "extend": [
      "Lay new content out as rows divided by 1px var(--mn-border) rules; pad rows 12–16px and let them span the full width.",
      "Hover a row with a 3% ink wash; never lift or outline it.",
      "Selected: 700 weight plus a 4px blue bar (border-radius 999px) under or beside the item.",
      "Buttons are pills at 700; the main one is ink, secondary ones are outlined in var(--mn-input).",
      "Counts and metadata use var(--mn-muted) at the same size as text, not smaller."
    ],
    "avoid": [
      "Cards around every item",
      "Drop shadows",
      "A second accent colour",
      "Light font weights",
      "Slow or bouncy motion"
    ],
    "recipe": "[data-noodle=\"chitarra\"] .tile {\n  padding: 14px 16px; border: 0; border-bottom: 1px solid var(--mn-border); border-radius: 0;\n  background: var(--mn-bg); color: var(--mn-fg);\n  transition: background-color 120ms ease-out;\n}\n[data-noodle=\"chitarra\"] .tile:hover { background: color-mix(in oklab, var(--mn-fg) 3%, var(--mn-bg)); }\n[data-noodle=\"chitarra\"] .tile[aria-selected=\"true\"] { font-weight: 700; box-shadow: inset 4px 0 0 var(--mn-accent); }"
  },
  "psychology": {
    "temperature": "neutral",
    "colours": [
      {
        "role": "Primary",
        "hex": "#0f1419",
        "family": "Blue",
        "depth": "deep, 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."
      },
      {
        "role": "Accent",
        "hex": "#0f6cbd",
        "family": "Blue",
        "depth": "mid, saturated",
        "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": "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": "Two tones of blue: harmonious and calm, with little contrast between brand and accent.",
    "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": 800,
      "summary": "One voice throughout: system sans (the device’s own typeface). Headings are heavy, which reads as loud and direct."
    },
    "personality": {
      "reads": [
        "stark",
        "bold",
        "fast",
        "direct",
        "minimal"
      ],
      "intensity": 3,
      "dimensions": [],
      "suits": [
        "social apps",
        "feeds and timelines",
        "news",
        "communities",
        "media apps"
      ],
      "lessFor": [
        "luxury",
        "wellness",
        "children"
      ],
      "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/chitarra",
  "markdownUrl": "https://mian.ro/ai/noodles/chitarra.md",
  "stylesheet": "https://mian.ro/dist/noodles/chitarra.css",
  "usage": "<html data-noodle=\"chitarra\">",
  "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": 800,
  "radius": {
    "field": "24px",
    "box": "16px",
    "badge": "999px"
  },
  "shadow": "none",
  "density": "default",
  "glass": false,
  "light": {
    "bg": "#ffffff",
    "surface": "#ffffff",
    "surface2": "#eff3f4",
    "fg": "#0f1419",
    "muted": "#536471",
    "border": "#e1e8ed",
    "input": "#cfd9de",
    "primary": "#0f1419",
    "primaryFg": "#ffffff",
    "secondary": "#eff3f4",
    "secondaryFg": "#0f1419",
    "accent": "#0f6cbd",
    "accentFg": "#ffffff",
    "ring": "#0f6cbd",
    "success": "#15803d",
    "successFg": "#ffffff",
    "warning": "#b45309",
    "warningFg": "#ffffff",
    "danger": "#dc2626",
    "dangerFg": "#ffffff",
    "info": "#0369a1",
    "infoFg": "#ffffff",
    "primaryText": "#0f1419",
    "secondaryText": "#727679",
    "accentText": "#0f6aba",
    "successText": "#15773a",
    "warningText": "#aa4f0a",
    "dangerText": "#c82425",
    "infoText": "#0369a1",
    "link": "#0f1419"
  },
  "dark": {
    "bg": "#000000",
    "surface": "#0a0a0a",
    "surface2": "#16181c",
    "fg": "#e7e9ea",
    "muted": "#8b98a5",
    "border": "#2f3336",
    "input": "#536471",
    "primary": "#eff3f4",
    "primaryFg": "#0f1419",
    "secondary": "#16181c",
    "secondaryFg": "#e7e9ea",
    "accent": "#1d9bf0",
    "accentFg": "#001523",
    "ring": "#1d9bf0",
    "success": "#4ade80",
    "successFg": "#052e16",
    "warning": "#fbbf24",
    "warningFg": "#1f1300",
    "danger": "#f87171",
    "dangerFg": "#210505",
    "info": "#38bdf8",
    "infoFg": "#03202d",
    "primaryText": "#eff3f4",
    "secondaryText": "#7a7c7f",
    "accentText": "#1d9bf0",
    "successText": "#4ade80",
    "warningText": "#fbbf24",
    "dangerText": "#f87171",
    "infoText": "#38bdf8",
    "link": "#eff3f4"
  },
  "css": "[data-noodle=\"chitarra\"] {\n  --mn-bg: light-dark(#ffffff, #000000);\n  --mn-surface: light-dark(#ffffff, #0a0a0a);\n  --mn-surface-2: light-dark(#eff3f4, #16181c);\n  --mn-fg: light-dark(#0f1419, #e7e9ea);\n  --mn-muted: light-dark(#536471, #8b98a5);\n  --mn-border: light-dark(#e1e8ed, #2f3336);\n  --mn-input: light-dark(#cfd9de, #536471);\n  --mn-primary: light-dark(#0f1419, #eff3f4);\n  --mn-primary-fg: light-dark(#ffffff, #0f1419);\n  --mn-secondary: light-dark(#eff3f4, #16181c);\n  --mn-secondary-fg: light-dark(#0f1419, #e7e9ea);\n  --mn-accent: light-dark(#0f6cbd, #1d9bf0);\n  --mn-accent-fg: light-dark(#ffffff, #001523);\n  --mn-ring: light-dark(#0f6cbd, #1d9bf0);\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(#0f1419, #eff3f4);\n  --mn-secondary-text: light-dark(#727679, #7a7c7f);\n  --mn-accent-text: light-dark(#0f6aba, #1d9bf0);\n  --mn-success-text: light-dark(#15773a, #4ade80);\n  --mn-warning-text: light-dark(#aa4f0a, #fbbf24);\n  --mn-danger-text: light-dark(#c82425, #f87171);\n  --mn-info-text: light-dark(#0369a1, #38bdf8);\n  --mn-link: light-dark(#0f1419, #eff3f4);\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: 800;\n  --mn-radius-field: 24px;\n  --mn-radius-box: 16px;\n  --mn-radius-badge: 999px;\n  --mn-shadow-sm: none;\n  --mn-shadow-md: none;\n  --mn-shadow-lg: none;\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"
}