{
  "name": "Norea Labs",
  "version": 1,
  "color": {
    "themes": [
      {
        "id": "light",
        "name": "Light"
      },
      {
        "id": "dark",
        "name": "Dark"
      },
      {
        "id": "light-hc",
        "name": "Light, high contrast"
      },
      {
        "id": "dark-hc",
        "name": "Dark, high contrast"
      }
    ],
    "tokens": [
      {
        "name": "blu",
        "value": "#2134fd",
        "usage": "Brand blue (RGB 33, 52, 253). The pittogramma in the nero logo and the V2 bianco logo; primary fills. As text only on bianco (6.1:1), never on nero (2.8:1)."
      },
      {
        "name": "nero",
        "value": "#0a081e",
        "usage": "Brand near-black (RGB 10, 8, 30). Wordmark ink on light grounds; the dark-theme page ground. The palette sheet lists its CMYK as 90, 72, 0, 0, the same as blu's: to be confirmed."
      },
      {
        "name": "bianco",
        "value": "#efefef",
        "usage": "Brand off-white (RGB 239, 239, 239; CMYK 7, 5, 6, 0). The light-theme page ground; wordmark ink in the bianco logos. Use it in place of pure white."
      },
      {
        "name": "arancio",
        "value": "#f44f19",
        "usage": "Brand orange (RGB 244, 79, 25; CMYK 0, 79, 92, 0). The arancio pittogramma; small accents. Text on it is nero (5.6:1). As text: on nero only, or at 24px+ on bianco (3.05:1)."
      },
      {
        "name": "verde",
        "value": "#adea39",
        "usage": "Brand green (RGB 173, 234, 57; CMYK 41, 0, 90, 0). The pittogramma in the bianco logo; highlights on dark grounds. Text on it is nero (13.7:1). Never text or thin marks on bianco (1.25:1)."
      },
      {
        "name": "surface",
        "value": {
          "light": "{bianco}",
          "dark": "{nero}",
          "light-hc": "{bianco}",
          "dark-hc": "{nero}"
        },
        "usage": "Page background."
      },
      {
        "name": "ink",
        "value": {
          "light": "{nero}",
          "dark": "{bianco}",
          "light-hc": "{nero}",
          "dark-hc": "{bianco}"
        },
        "usage": "Primary text and headlines on surface (17.1:1 in both themes). Also the 2px rules that draw structure and the 2px border of form fields."
      },
      {
        "name": "ink-muted",
        "value": {
          "light": "rgba(10, 8, 30, 0.65)",
          "dark": "rgba(239, 239, 239, 0.65)",
          "light-hc": "rgba(10, 8, 30, 0.75)",
          "dark-hc": "rgba(239, 239, 239, 0.75)"
        },
        "usage": "Secondary text and metadata on surface (6.0:1 light, 7.4:1 dark; 8.5:1 and 9.7:1 in the high-contrast themes). Proposed: not in the brand files."
      },
      {
        "name": "line",
        "value": {
          "light": "rgba(10, 8, 30, 0.14)",
          "dark": "rgba(239, 239, 239, 0.16)",
          "light-hc": "rgba(10, 8, 30, 0.3)",
          "dark-hc": "rgba(239, 239, 239, 0.32)"
        },
        "usage": "Decorative hairlines inside dense tables and lists only (row dividers); everywhere else structure is a 2px ink rule. Proposed: not in the brand files."
      },
      {
        "name": "line-strong",
        "value": {
          "light": "rgba(10, 8, 30, 0.5)",
          "dark": "rgba(239, 239, 239, 0.5)",
          "light-hc": "rgba(10, 8, 30, 0.6)",
          "dark-hc": "rgba(239, 239, 239, 0.6)"
        },
        "usage": "Hairlines inside dense tables only, where a divider must reach 3:1 (3.6:1 light, 4.8:1 dark; 5.0:1 and 6.5:1 in the high-contrast themes), and the scrollbar thumb. Never input or control borders: form fields use a 2px ink border. Proposed: not in the brand files."
      },
      {
        "name": "primary",
        "value": {
          "light": "{blu}",
          "dark": "{blu}",
          "light-hc": "#0216e9",
          "dark-hc": "#0216e9"
        },
        "usage": "Primary button fill and the brand's lead colour block. The high-contrast themes use a deeper blu (#0216e9, derived from blu, not in the brand files) so on-primary text reaches 8:1."
      },
      {
        "name": "on-primary",
        "value": {
          "light": "{bianco}",
          "dark": "{bianco}",
          "light-hc": "{bianco}",
          "dark-hc": "{bianco}"
        },
        "usage": "Text and icons on a primary fill (6.1:1; 8.0:1 in the high-contrast themes)."
      },
      {
        "name": "link",
        "value": {
          "light": "{blu}",
          "dark": "{verde}",
          "light-hc": "#0216e9",
          "dark-hc": "{verde}"
        },
        "usage": "Links and accent text on surface, interactive elements only (6.1:1 light, 13.7:1 dark, 8.0:1 light high contrast). Blu on nero fails, so dark switches to verde. Always underline links in running text."
      },
      {
        "name": "highlight",
        "value": "{verde}",
        "usage": "Highlight fills: tags, markers, selected states. Never the only signal of a state: pair it with a label or shape. Text on it is on-highlight."
      },
      {
        "name": "on-highlight",
        "value": "{nero}",
        "usage": "Text on a highlight fill (13.7:1)."
      },
      {
        "name": "signal",
        "value": {
          "light": "{arancio}",
          "dark": "{arancio}",
          "light-hc": "#f77d55",
          "dark-hc": "#f77d55"
        },
        "usage": "Attention and emphasis: badges, notices, the one thing to look at, and the border of an invalid form field. Always pair it with a word or icon. Text on it is on-signal. High-contrast themes use a lighter arancio (#f77d55, derived, not in the brand files) so on-signal reaches 7.5:1; there an invalid field takes a 4px ink border instead."
      },
      {
        "name": "on-signal",
        "value": {
          "light": "{nero}",
          "dark": "{nero}",
          "light-hc": "{nero}",
          "dark-hc": "{nero}"
        },
        "usage": "Text on a signal fill (5.6:1; 7.5:1 in the high-contrast themes)."
      },
      {
        "name": "focus",
        "value": {
          "light": "{blu}",
          "dark": "{verde}",
          "light-hc": "#0216e9",
          "dark-hc": "{verde}"
        },
        "usage": "Keyboard focus ring, 3px solid with a 2px offset (6.1:1 on bianco, 13.7:1 on nero). Proposed: not in the brand files."
      }
    ]
  },
  "type": {
    "fonts": [],
    "families": {
      "display": "\"Montserrat Alternates\", \"Inclusive Sans\", system-ui, sans-serif",
      "sans": "\"Inclusive Sans\", system-ui, sans-serif"
    },
    "groups": [
      {
        "name": "Display",
        "family": "display",
        "note": "Montserrat Alternates Black: the face the wordmark is drawn from, used large (October 2026, near-brutalist direction). Big headlines only, plus oversized numerals that mark a true sequence. Sizes are fluid between a 390px and a 1440px viewport, from fontSizeMin to fontSize (fontSizeFluid is the CSS), and capped by the width of their column (columnCap, in cqi of the nearest container, or of the viewport without one) so a long word never breaks in the middle. Line heights are ratios: lineHeight (1.1) whenever a headline can run to three lines or more, lineHeightTight (1.0) when it sits on two lines or fewer. Scale proposed: not in the brand files.",
        "styles": [
          {
            "name": "display-xl",
            "fontSize": "150px",
            "fontSizeMin": "56px",
            "fontSizeFluid": "clamp(3.5rem, 1.318rem + 8.952vw, 9.375rem)",
            "columnCap": "13.5cqi",
            "lineHeight": "1.1",
            "lineHeightTight": "1",
            "fontWeight": 900,
            "letterSpacing": "-0.03em",
            "sample": "Controllo.",
            "usage": "Hero headline, one per page: 56px on a phone, up to 150px on desktop."
          },
          {
            "name": "display-l",
            "fontSize": "96px",
            "fontSizeMin": "44px",
            "fontSizeFluid": "clamp(2.75rem, 1.543rem + 4.952vw, 6rem)",
            "columnCap": "12.5cqi",
            "lineHeight": "1.1",
            "lineHeightTight": "1",
            "fontWeight": 900,
            "letterSpacing": "-0.03em",
            "sample": "Strumenti di controllo.",
            "usage": "Section statements and slide titles: 44px on a phone, up to 96px on desktop."
          },
          {
            "name": "display-m",
            "fontSize": "60px",
            "fontSizeMin": "36px",
            "fontSizeFluid": "clamp(2.25rem, 1.693rem + 2.286vw, 3.75rem)",
            "columnCap": "12cqi",
            "lineHeight": "1.1",
            "lineHeightTight": "1",
            "fontWeight": 900,
            "letterSpacing": "-0.03em",
            "sample": "Regole applicate allo stesso modo, ogni volta.",
            "usage": "Display headlines that run long: 36px on a phone, up to 60px on desktop."
          },
          {
            "name": "numeral",
            "fontSize": "128px",
            "fontSizeMin": "56px",
            "fontSizeFluid": "clamp(3.5rem, 1.829rem + 6.857vw, 8rem)",
            "columnCap": "40cqi",
            "lineHeight": "1",
            "fontWeight": 900,
            "letterSpacing": "-0.04em",
            "fontVariantNumeric": "tabular-nums",
            "sample": "30%",
            "usage": "Oversized numerals, only for true sequences (phases, steps, the payment split), on one line with tabular figures: 56px on a phone, up to 128px on desktop."
          }
        ]
      },
      {
        "name": "Text",
        "family": "sans",
        "note": "Inclusive Sans: the payoff face, in 400 and 700 only (no light weights). Every heading below display size, all UI and body copy. body-l is fluid like the display sizes (fontSizeMin to fontSize). Interface labels (label, caption) are capitals tracked 0.08–0.16em. Scale proposed: not in the brand files.",
        "styles": [
          {
            "name": "heading-1",
            "fontSize": "32px",
            "lineHeight": "40px",
            "fontWeight": 700,
            "sample": "Per le PMI italiane",
            "usage": "Page titles where display is too loud."
          },
          {
            "name": "heading-2",
            "fontSize": "24px",
            "lineHeight": "32px",
            "fontWeight": 700,
            "sample": "Come lavoriamo",
            "usage": "Section headings."
          },
          {
            "name": "heading-3",
            "fontSize": "19px",
            "lineHeight": "26px",
            "fontWeight": 700,
            "sample": "Analisi dei processi",
            "usage": "Card and sub-section headings."
          },
          {
            "name": "payoff",
            "fontSize": "20px",
            "lineHeight": "28px",
            "fontWeight": 400,
            "sample": "Strumenti di controllo per le PMI italiane.",
            "usage": "The payoff and lead-in sentences; set its key words in 700, as the logo does."
          },
          {
            "name": "body-l",
            "fontSize": "22px",
            "fontSizeMin": "20px",
            "fontSizeFluid": "clamp(1.25rem, 1.2036rem + 0.1905vw, 1.375rem)",
            "lineHeight": "1.45",
            "fontWeight": 400,
            "sample": "Il posto dove PMI e ditte italiane trovano gli strumenti di controllo per i loro business.",
            "usage": "Lead text and intro paragraphs: 20px on a phone, up to 22px on desktop."
          },
          {
            "name": "body",
            "fontSize": "17px",
            "lineHeight": "24px",
            "fontWeight": 400,
            "sample": "Il posto dove PMI e ditte italiane trovano gli strumenti di controllo per i loro business.",
            "usage": "Default body copy and UI text. 17px matches the common mobile default reading size."
          },
          {
            "name": "small",
            "fontSize": "14px",
            "lineHeight": "20px",
            "fontWeight": 400,
            "sample": "Ultimo aggiornamento: ottobre 2026",
            "usage": "Secondary text, form help, table cells. The smallest size for running text."
          },
          {
            "name": "label",
            "fontSize": "14px",
            "lineHeight": "20px",
            "fontWeight": 700,
            "letterSpacing": "0.1em",
            "textTransform": "uppercase",
            "sample": "Prenota una chiamata",
            "usage": "Interface labels in capitals: navigation links, buttons, form labels, table headers, group titles. Large buttons set it at 16px with 0.08em tracking. Write the copy in sentence case: the capitals come from the style."
          },
          {
            "name": "caption",
            "fontSize": "12px",
            "lineHeight": "16px",
            "fontWeight": 700,
            "letterSpacing": "0.14em",
            "textTransform": "uppercase",
            "sample": "Casi studio",
            "usage": "Captions, eyebrows above headings and tags, in capitals. The absolute minimum size: never smaller, never lighter than 700."
          }
        ]
      }
    ]
  },
  "spacing": {
    "note": "A 4px base. Proposed: not in the brand files.",
    "tokens": [
      {
        "name": "space-1",
        "value": "4px",
        "usage": "Icon-to-label gaps."
      },
      {
        "name": "space-2",
        "value": "8px",
        "usage": "Tight stacks, tag padding."
      },
      {
        "name": "space-3",
        "value": "12px",
        "usage": "Button vertical padding, list gaps."
      },
      {
        "name": "space-4",
        "value": "16px",
        "usage": "Card padding on mobile, gutters."
      },
      {
        "name": "space-6",
        "value": "24px",
        "usage": "Card padding, button horizontal padding."
      },
      {
        "name": "space-8",
        "value": "32px",
        "usage": "Between blocks within a section."
      },
      {
        "name": "space-12",
        "value": "48px",
        "usage": "Between sections on mobile; logo clear space at large sizes."
      },
      {
        "name": "space-16",
        "value": "64px",
        "usage": "Between sections on desktop."
      }
    ]
  },
  "radius": {
    "note": "Square corners everywhere (October 2026, near-brutalist direction). The three names stay, all at 0. Proposed: not in the brand files.",
    "tokens": [
      {
        "name": "radius-none",
        "value": "0px",
        "usage": "Every corner: colour blocks, images, section bands, buttons, inputs, tags, cards, panels."
      },
      {
        "name": "radius-sm",
        "value": "0px",
        "usage": "Square since October 2026: tags, inputs, checkboxes."
      },
      {
        "name": "radius-md",
        "value": "0px",
        "usage": "Square since October 2026: buttons, cards, menus."
      }
    ]
  },
  "size": {
    "note": "Touch and click targets. Proposed: not in the brand files.",
    "tokens": [
      {
        "name": "target-min",
        "value": "44px",
        "usage": "Minimum width and height of anything people tap or click, including icon-only buttons."
      },
      {
        "name": "target-gap",
        "value": "12px",
        "usage": "Minimum space between two filled or outlined controls; 24px around a control with no visible border."
      }
    ]
  }
}