{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "quadretti",
  "name": "Quadretti",
  "family": "Pixel",
  "origin": "Italy · “little squares”",
  "tagline": "Little squares, graph paper, pixels.",
  "description": "Quadretti are tiny squares of egg pasta cut from a sheet with a knife in both directions and cooked in broth. Quadretti is a pixel system on graph paper: square everything, stepped pixel corners, square knobs and checkboxes, progress and charts built from squares, and a spinner of four squares.",
  "inspiration": [
    "Cut into squares in both directions → a graph-paper grid behind everything and square controls",
    "Tiny squares → pixel-stepped corners on buttons and cards instead of curves",
    "Floating in broth → squares that step into place, never slide",
    "Blue-lined exercise books → graph blue ink with a vermilion accent"
  ],
  "traits": {
    "mood": [
      "grid",
      "pixel",
      "playful",
      "technical",
      "retro"
    ],
    "intensity": 3,
    "contrast": "high",
    "geometry": "square cells, stepped corners",
    "type": "mono and grotesk",
    "surface": "graph paper grid",
    "motion": "stepped",
    "goodFor": [
      "games",
      "developer tools",
      "data products",
      "education",
      "creative tools"
    ],
    "lessFor": [
      "luxury",
      "wellness"
    ],
    "density": "compact"
  },
  "license": "LicenseRef-MIAN-1.0",
  "designLanguage": {
    "essence": "Quadretti is drawn on graph paper. Little squares of pasta cut in both directions become a pixel system: a faint blue grid behind every surface, square controls, pixel-stepped corners instead of curves, progress and charts built from square cells, and a spinner of four squares stepping round. Things step into place: nothing slides.",
    "principles": [
      "Square everything: 0 radius; corners are stepped with clip-path (--qd-step) rather than rounded.",
      "The grid shows: surfaces carry a 12px graph-paper grid (--qd-grid).",
      "Cells, not bars: progress, sliders, switches and chart columns are divided into square cells.",
      "Motion uses steps(); focus is a vermilion square outline."
    ],
    "aspects": {
      "Shape": "0px radius, pixel-stepped corners on buttons, badges, tabs and avatars.",
      "Surface": "Graph paper: a 12px blue grid on white; floating panels cast a square offset shadow.",
      "Colour": "Graph blue ink (#1d3fbf) with a vermilion accent.",
      "Type": "System sans 600–700; mono for labels and table heads.",
      "Motion": "quadretti-in: revealed in three steps; the switch knob steps across three cells.",
      "Data": "Columns made of 8px cells on the grid; square line points; a square radial."
    },
    "extend": [
      "border-radius: 0; clip-path: var(--qd-step); background: var(--qd-grid), var(--mn-surface).",
      "Quantities as cells: background: var(--qd-cells), <fill>.",
      "Transitions: steps(2–4, end); focus: outline 2px solid var(--mn-accent); outline-offset: 2px."
    ],
    "avoid": [
      "Rounded corners",
      "Smooth easing",
      "Gradients and blur"
    ],
    "recipe": "[data-noodle=\"quadretti\"] .tile { padding: 10px 14px; border: 1px solid var(--mn-input); border-radius: 0; background: var(--qd-grid), var(--mn-surface); clip-path: var(--qd-step); }\n[data-noodle=\"quadretti\"] .tile[aria-selected=\"true\"] { background: var(--mn-primary); color: var(--mn-primary-fg); }\n[data-noodle=\"quadretti\"] .tile:focus-visible { outline: 2px solid var(--mn-accent); outline-offset: 2px; clip-path: none; }"
  },
  "psychology": {
    "temperature": "cool",
    "colours": [
      {
        "role": "Primary",
        "hex": "#1d3fbf",
        "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": "Accent",
        "hex": "#c7381a",
        "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": "#fbfcff",
        "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": "Blue against red, close to complementary: strong contrast, so the accent must stay rare.",
    "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": 700,
      "summary": "One voice throughout: system sans (the device’s own typeface). Headings are semibold, which reads as confident without shouting."
    },
    "personality": {
      "reads": [
        "grid",
        "pixel",
        "playful",
        "technical",
        "retro"
      ],
      "intensity": 3,
      "dimensions": [],
      "suits": [
        "games",
        "developer tools",
        "data products",
        "education",
        "creative tools"
      ],
      "lessFor": [
        "luxury",
        "wellness"
      ],
      "tone": "Lively. A point of view in the headline, concrete verbs, a little humour where it is true."
    },
    "logo": "Square and angular marks fit: a wordmark in capitals or a solid block symbol."
  },
  "url": "https://mian.ro/noodles/quadretti",
  "markdownUrl": "https://mian.ro/ai/noodles/quadretti.md",
  "stylesheet": "https://mian.ro/dist/noodles/quadretti.css",
  "usage": "<html data-noodle=\"quadretti\">",
  "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": 700,
  "radius": {
    "field": "0px",
    "box": "0px",
    "badge": "0px"
  },
  "shadow": "none",
  "density": "compact",
  "glass": false,
  "light": {
    "bg": "#fbfcff",
    "surface": "#ffffff",
    "surface2": "#eef2fb",
    "fg": "#0f1830",
    "muted": "#505a75",
    "border": "#d5ddef",
    "input": "#9fb0d6",
    "primary": "#1d3fbf",
    "primaryFg": "#ffffff",
    "secondary": "#eef2fb",
    "secondaryFg": "#0f1830",
    "accent": "#c7381a",
    "accentFg": "#ffffff",
    "ring": "#1d3fbf",
    "success": "#15803d",
    "successFg": "#ffffff",
    "warning": "#b45309",
    "warningFg": "#ffffff",
    "danger": "#dc2626",
    "dangerFg": "#ffffff",
    "info": "#0369a1",
    "infoFg": "#ffffff",
    "primaryText": "#1d3fbf",
    "secondaryText": "#6d7485",
    "accentText": "#bc361b",
    "successText": "#15783c",
    "warningText": "#aa4f0b",
    "dangerText": "#c82527",
    "infoText": "#0369a1",
    "link": "#1d3fbf"
  },
  "dark": {
    "bg": "#0a0f1f",
    "surface": "#0f1630",
    "surface2": "#16203f",
    "fg": "#eef2ff",
    "muted": "#9aa6c7",
    "border": "#22305a",
    "input": "#3c4f8a",
    "primary": "#8ea8ff",
    "primaryFg": "#0a1030",
    "secondary": "#16203f",
    "secondaryFg": "#eef2ff",
    "accent": "#ff8a66",
    "accentFg": "#2a0a00",
    "ring": "#8ea8ff",
    "success": "#4ade80",
    "successFg": "#052e16",
    "warning": "#fbbf24",
    "warningFg": "#1f1300",
    "danger": "#f87171",
    "dangerFg": "#210505",
    "info": "#38bdf8",
    "infoFg": "#03202d",
    "primaryText": "#8ea8ff",
    "secondaryText": "#798197",
    "accentText": "#ff8a66",
    "successText": "#4ade80",
    "warningText": "#fbbf24",
    "dangerText": "#f87171",
    "infoText": "#38bdf8",
    "link": "#8ea8ff"
  },
  "css": "[data-noodle=\"quadretti\"] {\n  --mn-bg: light-dark(#fbfcff, #0a0f1f);\n  --mn-surface: light-dark(#ffffff, #0f1630);\n  --mn-surface-2: light-dark(#eef2fb, #16203f);\n  --mn-fg: light-dark(#0f1830, #eef2ff);\n  --mn-muted: light-dark(#505a75, #9aa6c7);\n  --mn-border: light-dark(#d5ddef, #22305a);\n  --mn-input: light-dark(#9fb0d6, #3c4f8a);\n  --mn-primary: light-dark(#1d3fbf, #8ea8ff);\n  --mn-primary-fg: light-dark(#ffffff, #0a1030);\n  --mn-secondary: light-dark(#eef2fb, #16203f);\n  --mn-secondary-fg: light-dark(#0f1830, #eef2ff);\n  --mn-accent: light-dark(#c7381a, #ff8a66);\n  --mn-accent-fg: light-dark(#ffffff, #2a0a00);\n  --mn-ring: light-dark(#1d3fbf, #8ea8ff);\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(#1d3fbf, #8ea8ff);\n  --mn-secondary-text: light-dark(#6d7485, #798197);\n  --mn-accent-text: light-dark(#bc361b, #ff8a66);\n  --mn-success-text: light-dark(#15783c, #4ade80);\n  --mn-warning-text: light-dark(#aa4f0b, #fbbf24);\n  --mn-danger-text: light-dark(#c82527, #f87171);\n  --mn-info-text: light-dark(#0369a1, #38bdf8);\n  --mn-link: light-dark(#1d3fbf, #8ea8ff);\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: 700;\n  --mn-radius-field: 0px;\n  --mn-radius-box: 0px;\n  --mn-radius-badge: 0px;\n  --mn-shadow-sm: none;\n  --mn-shadow-md: none;\n  --mn-shadow-lg: none;\n  --mn-size-xs: 24px;\n  --mn-size-sm: 28px;\n  --mn-size-md: 34px;\n  --mn-size-lg: 42px;\n  --mn-text-sm: 13px;\n  --mn-surface-alpha: 100%;\n  --mn-backdrop: none;\n  --mn-bg-image: none;\n}\n"
}