{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "ditalini",
  "name": "Ditalini",
  "family": "Linear",
  "origin": "Italy · Sicily",
  "tagline": "Tiny tubes. A dense, calm ledger.",
  "description": "Ditalini, “little thimbles”, are short, tiny tubes that fill a spoon of soup evenly. Ditalini is a dense, conservative system for data: compact controls, small exact type with tabular figures, quiet slate blue, ruled tables and nothing that competes with the numbers.",
  "inspiration": [
    "Tiny and many → compact sizes, tight rows and small type that stays legible",
    "Evenly spread in a spoon → an even grid: equal gaps, aligned columns, tabular figures",
    "Pasta e fagioli, a working lunch → sober slate and teal, no decoration",
    "Short tubes → small squared ends: 4px corners throughout"
  ],
  "traits": {
    "mood": [
      "dense",
      "conservative",
      "sober",
      "precise",
      "calm",
      "trustworthy",
      "serious"
    ],
    "intensity": 1,
    "contrast": "medium",
    "geometry": "small 4px corners, even grid",
    "type": "system sans, small, tabular figures",
    "surface": "white panels, ruled tables",
    "motion": "minimal",
    "goodFor": [
      "admin dashboards",
      "finance",
      "accounting",
      "back office",
      "data-heavy tools",
      "b2b saas",
      "analytics"
    ],
    "lessFor": [
      "marketing sites",
      "children",
      "luxury"
    ],
    "density": "compact"
  },
  "license": "LicenseRef-MIAN-1.0",
  "designLanguage": {
    "essence": "Ditalini is a quiet ledger for dense work: compact controls, small exact type with tabular figures, ruled tables, sober slate blue. Everything is aligned to an even grid so that numbers can be compared at a glance. It is designed to disappear behind the data.",
    "principles": [
      "The data is the design: no decoration competes with numbers.",
      "Even grid: equal gaps, aligned columns, tabular figures everywhere.",
      "Compact but legible: small sizes, never below 12px, high contrast.",
      "Colour only for meaning: slate for action, teal for positive, status colours for status."
    ],
    "aspects": {
      "Shape": "4px fields, 6px surfaces, square-ish badges.",
      "Surface": "White cards with 1px borders and a faint shadow; zebra-free ruled tables.",
      "Colour": "Slate blue (#1d3557), teal accent, neutral greys.",
      "Type": "System UI at small sizes, tabular numbers, 600 headings.",
      "Motion": "ditalini-in: a 120ms fade; no bounce.",
      "Data": "Thin, compact bars and 1.5px lines; the highlighted series slate."
    },
    "extend": [
      "Rows: height var(--mn-size-sm); padding .25rem .5rem; border-bottom: 1px solid var(--mn-border).",
      "Numbers: font-variant-numeric: tabular-nums; text-align: right.",
      "Keep radius at var(--mn-radius-field); no gradients; shadows at most --mn-shadow-sm."
    ],
    "avoid": [
      "Large display type inside apps",
      "Decorative illustrations",
      "Animated charts",
      "Low-contrast greys for numbers"
    ],
    "recipe": "[data-noodle=\"ditalini\"] .tile { padding: 6px 10px; border: 1px solid var(--mn-border); border-radius: 4px; background: var(--mn-surface); font-size: .8125rem; font-variant-numeric: tabular-nums; }\n[data-noodle=\"ditalini\"] .tile[aria-selected=\"true\"] { border-color: var(--mn-primary); box-shadow: inset 3px 0 0 var(--mn-primary); }"
  },
  "psychology": {
    "temperature": "neutral",
    "colours": [
      {
        "role": "Primary",
        "hex": "#1d3557",
        "family": "Blue",
        "depth": "deep",
        "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": "#0f766e",
        "family": "Teal and cyan",
        "depth": "deep, saturated",
        "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": "#f7f8fa",
        "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": "Blue with its neighbour teal and cyan: an analogous pair, harmonious and natural.",
    "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": 600,
      "summary": "One voice throughout: system sans (the device’s own typeface). Headings are semibold, which reads as confident without shouting."
    },
    "personality": {
      "reads": [
        "dense",
        "conservative",
        "sober",
        "precise",
        "calm"
      ],
      "intensity": 1,
      "dimensions": [
        "Competence"
      ],
      "suits": [
        "admin dashboards",
        "finance",
        "accounting",
        "back office",
        "data-heavy tools"
      ],
      "lessFor": [
        "marketing sites",
        "children",
        "luxury"
      ],
      "tone": "Quiet. Plain statements in sentence case, no exclamation marks, numbers with their units. Let space do the persuading."
    },
    "logo": "A simple geometric mark with slightly softened corners fits; avoid both hard spikes and full circles."
  },
  "url": "https://mian.ro/noodles/ditalini",
  "markdownUrl": "https://mian.ro/ai/noodles/ditalini.md",
  "stylesheet": "https://mian.ro/dist/noodles/ditalini.css",
  "usage": "<html data-noodle=\"ditalini\">",
  "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": 600,
  "radius": {
    "field": "4px",
    "box": "6px",
    "badge": "4px"
  },
  "shadow": "subtle",
  "density": "compact",
  "glass": false,
  "light": {
    "bg": "#f7f8fa",
    "surface": "#ffffff",
    "surface2": "#eef1f5",
    "fg": "#111827",
    "muted": "#4b5563",
    "border": "#dde2ea",
    "input": "#c3cad6",
    "primary": "#1d3557",
    "primaryFg": "#ffffff",
    "secondary": "#e8edf5",
    "secondaryFg": "#1d3557",
    "accent": "#0f766e",
    "accentFg": "#ffffff",
    "ring": "#2563eb",
    "success": "#15803d",
    "successFg": "#ffffff",
    "warning": "#b45309",
    "warningFg": "#ffffff",
    "danger": "#dc2626",
    "dangerFg": "#ffffff",
    "info": "#0369a1",
    "infoFg": "#ffffff",
    "primaryText": "#1d3557",
    "secondaryText": "#6b717e",
    "accentText": "#0f766e",
    "successText": "#15783b",
    "warningText": "#aa4f0b",
    "dangerText": "#c82526",
    "infoText": "#0369a1",
    "link": "#1d3557"
  },
  "dark": {
    "bg": "#0b0f16",
    "surface": "#111722",
    "surface2": "#19212f",
    "fg": "#e8edf5",
    "muted": "#9aa6b8",
    "border": "#263042",
    "input": "#3b475c",
    "primary": "#9dbbe6",
    "primaryFg": "#0b1a30",
    "secondary": "#1c2638",
    "secondaryFg": "#e8edf5",
    "accent": "#5eead4",
    "accentFg": "#042f2b",
    "ring": "#7aa7ff",
    "success": "#4ade80",
    "successFg": "#052e16",
    "warning": "#fbbf24",
    "warningFg": "#1f1300",
    "danger": "#f87171",
    "dangerFg": "#210505",
    "info": "#38bdf8",
    "infoFg": "#03202d",
    "primaryText": "#9dbbe6",
    "secondaryText": "#7a828f",
    "accentText": "#5eead4",
    "successText": "#4ade80",
    "warningText": "#fbbf24",
    "dangerText": "#f87171",
    "infoText": "#38bdf8",
    "link": "#9dbbe6"
  },
  "css": "[data-noodle=\"ditalini\"] {\n  --mn-bg: light-dark(#f7f8fa, #0b0f16);\n  --mn-surface: light-dark(#ffffff, #111722);\n  --mn-surface-2: light-dark(#eef1f5, #19212f);\n  --mn-fg: light-dark(#111827, #e8edf5);\n  --mn-muted: light-dark(#4b5563, #9aa6b8);\n  --mn-border: light-dark(#dde2ea, #263042);\n  --mn-input: light-dark(#c3cad6, #3b475c);\n  --mn-primary: light-dark(#1d3557, #9dbbe6);\n  --mn-primary-fg: light-dark(#ffffff, #0b1a30);\n  --mn-secondary: light-dark(#e8edf5, #1c2638);\n  --mn-secondary-fg: light-dark(#1d3557, #e8edf5);\n  --mn-accent: light-dark(#0f766e, #5eead4);\n  --mn-accent-fg: light-dark(#ffffff, #042f2b);\n  --mn-ring: light-dark(#2563eb, #7aa7ff);\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(#1d3557, #9dbbe6);\n  --mn-secondary-text: light-dark(#6b717e, #7a828f);\n  --mn-accent-text: light-dark(#0f766e, #5eead4);\n  --mn-success-text: light-dark(#15783b, #4ade80);\n  --mn-warning-text: light-dark(#aa4f0b, #fbbf24);\n  --mn-danger-text: light-dark(#c82526, #f87171);\n  --mn-info-text: light-dark(#0369a1, #38bdf8);\n  --mn-link: light-dark(#1d3557, #9dbbe6);\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: 600;\n  --mn-radius-field: 4px;\n  --mn-radius-box: 6px;\n  --mn-radius-badge: 4px;\n  --mn-shadow-sm: 0 1px 2px rgb(0 0 0 / .05);\n  --mn-shadow-md: 0 2px 6px -1px rgb(0 0 0 / .08), 0 1px 2px rgb(0 0 0 / .04);\n  --mn-shadow-lg: 0 12px 32px -8px rgb(0 0 0 / .18), 0 4px 8px -4px rgb(0 0 0 / .08);\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"
}