Norea Labs is where Italian SMEs and small firms find the control tools for their business: “Il posto dove PMI e ditte italiane trovano gli **strumenti di controllo** per i loro business.” Use this positioning sentence on longer surfaces (site hero, meta descriptions, social bios). The identity is a hard-edged six-armed pittogramma, a heavy rounded wordmark, five flat colours and the payoff “Strumenti di **controllo** per le **PMI italiane**.”

## Principles

These principles shape every Norea Labs screen, page and asset. They are adapted from Apple's Human Interface Guidelines.

- **Purpose.** Start from the process the person needs to get done. Every screen or post has one job; cut anything that doesn't serve it.
- **Agency.** Keep people in control of what the AI does: show what is happening, let them review before anything is final, and make every action easy to undo.
- **Responsibility.** Say plainly what the AI does with people's data and why. Collect only what the task needs.
- **Familiarity.** Use patterns people already know (standard controls, plain verbs, expected placement) and keep them the same everywhere.
- **Flexibility.** Design for every reader from the start: any screen size, text enlarged to 200%, keyboard, screen reader, light, dark and high contrast.
- **Simplicity.** One focal point per view, a clear hierarchy, and few words. Simple isn't empty: keep what matters close at hand.
- **Craft.** Exact values from this system, aligned edges, consistent spacing. Check details at real size before shipping, and keep refining afterwards.
- **Delight.** The brand's energy comes from colour blocks and the slanted bars, never at the expense of the task.

## Content

- Write in Italian by default. Sentence case, and close the payoff and short statements with a full stop, as the logo does.
- Emphasise with weight, not colour or italics: the payoff sets its key words (*controllo*, *PMI italiane*) in Inclusive Sans 700 and the rest in 400; the positioning sentence does the same with *strumenti di controllo*.
- Keep claims concrete and tied to processes. Use plain language: no AI jargon, no gendered terms. No emoji.
- Put the most important information first, and keep one idea per screen or slide.

### Interface copy

- Buttons are verbs that say what happens: “Invia”, “Prenota una call”, not “Ok” or “Andiamo!”.
- Links describe their destination: “Leggi il case study”, never “clicca qui”. Write “tocca” on mobile and “clicca” on desktop.
- Multi-step flows use the same words throughout: “Inizia”, then “Continua”, then “Fine”.
- Error messages appear next to the problem, don't blame the reader and say how to fix it: “Inserisci un'email con la @”, not “Email non valida” or “Ops!”.
- Empty states say what to do next and give the button to do it.
- In system messages, avoid a vague “noi”: “Impossibile caricare i dati”, not “Stiamo avendo problemi”. Marketing copy keeps the brand's “noi”.

## Colour

- The palette is five flat colours, used at full strength: `blu`, `nero`, `bianco`, `arancio`, `verde`. No tints, gradients or pure white; `bianco` (#efefef) is the brand's white.
- Build UI with the semantic tokens: `ink` on `surface`, `ink-muted` for secondary text, `link` for accent text, `primary` with `on-primary` for the main action, `highlight` with `on-highlight` for tags and markers, `signal` with `on-signal` for the single thing that needs attention.
- Give each colour one meaning in UI. `link` and `primary` mark only what people can tap or click; for non-interactive emphasis, use `ink` in 700.
- Never use colour as the only signal. Pair every state with a word, an icon or a shape, and underline links in running text.
- There are four themes. **Light** is `nero` on `bianco`, and **Dark** is `bianco` on `nero`, matching the bianco logos. **Light, high contrast** and **Dark, high contrast** are for people who turn on increased contrast: text reaches at least 7:1, and `primary`, `link`, `focus` and `signal` switch to a deeper blu and a lighter arancio derived from the brand colours.
- Contrast limits that come from the palette itself:
  - `blu` is never text or a thin mark on `nero` (2.8:1). That's why `link` and `focus` switch to `verde` in dark.
  - `verde` is never text or a thin mark on `bianco` (1.25:1). Use it only as a fill with `nero` text.
  - `arancio` as text on `bianco` only at 24px and up (3.05:1).
- Lead with `blu`. `verde` and `arancio` are accents: one per view, not both competing.
- Check every screen in all four themes, and on a phone in bright light: colours look darker and flatter outdoors.

## Type

*October 2026: near-brutalist direction (“quasi brutale”). It sets the Type, Layout and shape, and Motion rules; the rest of the system is unchanged.*

- `display-xl`, `display-l` and `display-m` are Montserrat Alternates Black, the face the wordmark is drawn from, used large: `display-xl` for the hero headline, from 56px on a phone up to 150px on desktop; `display-l` for section statements, from 44px up to 96px; `display-m` for display headlines that run long, from 36px up to 60px. Set them at -0.03em tracking, in sentence case, eight words at most. Use them for big headlines only, never for paragraphs, buttons or labels.
- `numeral` is the same face for oversized numerals, only where they mark a true sequence (phases, steps, the payment split): from 56px up to 128px, at -0.04em tracking, line height 1.0 and tabular figures, on one line.
- Display line height is 1.0 when a headline sits on two lines or fewer, and 1.1 when it can run to three or more. Display sizes also shrink to fit their column (`columnCap` in tokens.json), so at the default text size a word never breaks in the middle; only words of 12 letters or more may be hyphenated.
- Everything else is Inclusive Sans, the payoff face: `heading-1` to `heading-3` in 700, then `payoff`, `body-l` (lead text, from 20px on a phone up to 22px on desktop), `body`, `small`, `label` and `caption`.
- Interface labels are capitals in Inclusive Sans 700, tracked 0.08–0.16em: navigation, buttons, table headers, captions, tags and form labels (`label` for most of them, `caption` for captions and tags). Headings and paragraphs stay in sentence case, and so does the copy behind every label: the capitals come from the style.
- Use only these two families, and only weights 400, 700 and 900. Never use light or thin weights.
- `body` is 17px; never set running text below `small` (14px) or labels below `caption` (12px, 700).
- Leading opens up as text gets longer: never set three or more lines tighter than 1.1, and use 1.4 or more for paragraphs.
- Text must stay readable when enlarged to 200%. Let lines wrap and containers grow, stack side-by-side items, and never truncate essential text.
- Never type “Norea Labs” in Montserrat Alternates to stand in for the logo. Use the logo files.
- Both families are on Google Fonts: Montserrat Alternates 900 and Inclusive Sans 400/700. The system doesn't use SF Pro or other platform fonts.

## Layout and shape

- Lead with the most important element at the top left; people read top to bottom and left to right.
- Group related items with space, a rule or a colour block, align edges to help scanning, and reveal detail progressively (menus, accordions, “Leggi di più”) instead of showing everything at once.
- Space comes from the 4px scale (`space-1` to `space-16`). Use `space-6` for card padding and `space-16` between desktop sections.
- Anything people tap or click is at least `target-min` (44 × 44px), with `target-gap` (12px) between bordered controls and 24px around borderless ones.
- Keep content inside each surface's safe areas: notches, system bars and platform overlays (see the Social section).
- Every corner is square, like the pittogramma's cut angles: blocks, images, buttons, inputs, tags, cards and panels all use `radius-none`. (`radius-sm` and `radius-md` stay in tokens.json, set to 0.)
- Draw structure with solid 2px `ink` rules at full strength: between rows, under the navigation, above panels, around tables and callouts. Keep the `line` hairline for the inside of dense tables. Separate areas with rules or flat colour blocks, never shadows: the system has no shadow tokens.
- Buttons are hard rectangles, at least 48px tall on phones and 56px on larger screens, with a `label` in capitals. On hover and press their colours invert at once (`bianco` ↔ `nero`, `blu` ↔ `nero`): no tint, no movement, no scaling.
- Form fields (inputs, selects, text areas) have a 2px solid `ink` border and square corners, and are at least 48px tall on phones and 56px on larger screens. An invalid field takes a `signal` border (a 4px `ink` border with increased contrast), with its error message right under it.
- Focus is a 3px solid `focus` ring with a 2px offset.

## Motion

- Motion explains a change; it never decorates.
- The interface is mechanical and decisive. Buttons, links and colour states change state instantly; any other interface transition, such as an accordion opening, takes 120ms or less. Nothing in the interface floats, drifts or bounces.
- Text enters with a short wipe: left to right, 220ms, linear, with no fade and no rise.
- The pittogramma moves differently. When it moves (the 3D object on the website, the animated stickers and videos), it moves fluidly and continuously; on the website it follows the reader's scroll. No jumps, no hard stops, no bounce.
- Every rest frame is the official pittogramma.
- When people choose reduced motion (`prefers-reduced-motion`), nothing moves: drop entrances and wipes, replace slides, turns and zooms (the pittogramma's included) with fades, and stop anything that moves on its own.

## Logo and pittogramma

- **Nero logo** (`logo-con-payoff-nero`, `logo-senza-payoff-nero`): `blu` pittogramma, `nero` wordmark, `blu` payoff. Use on `bianco` and other light grounds.
- **Bianco logo** (`logo-*-bianco`): `verde` pittogramma, `bianco` wordmark. This is the default on `nero` and other dark grounds.
- **Bianco V2** (`logo-*-bianco-v2`): `blu` pittogramma, `bianco` wordmark. Use it on dark grounds only at large sizes, because the blu mark reads at 2.8:1 on `nero`.
- Use the *con payoff* lockup where the payoff is large enough to read. When it gets too small, switch to *senza payoff*.
- The pittogramma comes alone in `blu`, `verde` and `arancio`, for avatars, favicons and as a single graphic accent. Don't rotate, outline, recolour or rebuild it. In motion (the website, the animated stickers and the social videos) it may split into its six arms and turn, always fluidly (see Motion), but every rest frame is the official pittogramma.
- Use SVG on screen. Use the PNGs only where SVG isn't accepted.

## App icon

- The app icon is the pittogramma alone, centred on a solid ground: never the wordmark, the payoff or any other text.
- Draw it at 1024 × 1024px as a square with no rounded corners, because the platform applies its own mask. Keep the mark inside the central 60% so no mask clips it.
- Default appearance: `pittogramma-blu` on `bianco`. Dark appearance: `pittogramma-verde` on `nero`. Keep the same mark, size and position in both; let the platform generate the tinted and clear variants.
- Add no shadows, glows or bevels; the platform adds its own effects.

## Iconography

The brand files include no icon set. The pittogramma is a logo element, not an icon, so don't use it as a bullet or a UI glyph. For UI icons, use one outline set with a consistent stroke, give icon-only buttons a text label for screen readers, and keep them at least `target-min`.