EN Parliamo

Mosaico · design system

Un sistema fatto di tile.

Palette, tipografia, spaziature e componenti del nuovo sito. Tutto nasce dal logo: la D blu e la scala di quadrati rossi a opacità 100, 70, 40 e 10%. Le misure sono in rem; griglia, utility e tipografia sono quelle di Bootstrap 5.3, configurate con questi token.

Palette

Brand

Dal logo: il blu disegna la D, il rosso costruisce la scala di tile.

  • Aa
    Digipa Blue#0059DF$blue-600Azioni primarie, link, la “D”. 6,0:1 su bianco.
  • Aa
    Pixel Red#C90505$red-600Enfasi, scala dei tile, dettagli. 5,4:1 su paper.
  • Aa
    Signal#C8F23C$signalSolo AI. Riempimento su ink (15,3:1), mai testo su chiaro.

Ink

Neri freddi nella stessa famiglia del blu: testi e palcoscenici scuri.

  • Aa
    Ink 950#060A16$ink-950Palco AI, footer.
  • Aa
    Ink 900#0C1224$ink-900Testo principale (16,9:1 su paper).
  • Aa
    Ink 700#252E4A$ink-700Testo secondario forte.
  • Aa
    Ink 500#566080$ink-500Testo attenuato su chiaro (5,65:1).
  • Aa
    Ink 300#AEB4C9$ink-300Testo attenuato su ink (9,6:1).
  • Aa
    Ink 100#E9EBF2$ink-100Testo su ink, bordi chiari.

Superfici

Un bianco caldo come tela: meno abbagliante, più editoriale.

  • Aa
    Paper#F6F4EE$paperSfondo pagina.
  • Aa
    Paper 2#EEEBE3$paper-2Sezioni incassate.
  • Aa
    White#FFFFFF$whiteCard e moduli.

Tinte e passi pixel

Le opacità del logo (100/70/40/10%) diventano una scala usata per pittogrammi e decorazioni.

  • Aa
    Blue 100#E3EDFF$blue-100Sfondo icone, card blu.
  • Aa
    Red 100#FDE7E4$red-100Sfondo card rosse.
  • Aa
    Pixel 70#D95050$pixel-70Decorativo.
  • Aa
    Pixel 40#E99B9B$pixel-40Decorativo.
  • Aa
    Signal 700#4A6600$signal-700Testo “AI” su chiaro (6,0:1).
  • Aa
    Blue 300#86B1FF$blue-300Link su ink (9,2:1).
Ink 900 su Paper 16,9:1
Bianco su Blue 6,0:1
Signal su Ink 950 15,3:1

Tipografia

Bricolage Grotesque (variabile, assi opsz e wdth) per i titoli, Instrument Sans per il testo, JetBrains Mono per etichette e dati. Tutti self-hosted. I titoli usano dimensioni fluide in rem; h1–h6 passano per RFS di Bootstrap.

.t-mega · clamp(2.75rem → 7.25rem)

Un pixel alla volta.

.t-huge · clamp(2.25rem → 4.75rem)

Siamo il nostro primo cliente.

.section-head__title · clamp(2rem → 3.75rem)

Tre modi per far crescere un’azienda.

h3 · 1.75rem (RFS)

Il tuo LLM privato, sui tuoi documenti

.t-lead · clamp(1.125rem → 1.375rem) · Instrument Sans

Progettiamo siti, app e soluzioni di intelligenza artificiale su misura.

body · 1rem / 1.6 · Instrument Sans

Accessibilità e fruibilità vengono prima di tutto: ogni mockup nasce responsive.

.eyebrow · 0.8125rem · JetBrains Mono

Digital Innovation Partner

Spaziature

Scala Bootstrap estesa con 6–9 per il ritmo delle sezioni. Le sezioni usano clamp(4.5rem, 3rem + 6vw, 9rem).

  • 10.25rem
  • 20.5rem
  • 31rem
  • 41.5rem
  • 53rem
  • 64.5rem
  • 76rem
  • 88rem
  • 910rem

Forme e movimento

  • Tile base: 0.5rem. Raggi 0.375 / 0.75 / 1.25 / 2rem; pulsanti a pillola.
  • Easing: out cubic-bezier(.22,1,.36,1), snap cubic-bezier(.34,1.56,.64,1).
  • Durate: 160 / 320 / 700ms. Solo transform e opacity.
  • Contenuto visibile senza JS; animazioni solo con prefers-reduced-motion: no-preference.
  • Target interattivi di almeno 2.75rem (44px).

Componenti

Pulsanti

Primario Ink Outline Red Link con freccia

Etichette

Sito webBuildGrowNuovoGhost

Eyebrow

Eyebrow blu

Pittogrammi pixel

Sostituiscono le illustrazioni stock: griglie 8×8 dove ogni cifra è un tile alle opacità del logo. Blu per Costruire, rosso per Crescere, ink per Proteggere, Signal per l’AI.

  • websites
  • apps
  • seo
  • digital-marketing
  • social-media-management
  • brand-identity
  • infrastruttura-sicurezza
  • consulenza-it
  • privacy
  • online-collaboration
  • deployment
  • corsi
  • customer-care
  • business-intelligence
  • dronedb
  • woyage

Card AI su palco ink

01

AI su misura

Modelli open-weight sui tuoi server o in cloud europeo, con ricerca sui documenti aziendali (RAG), permessi rispettati e fonti sempre citate.

02

Corsi AI

Percorsi pratici sugli strumenti che il tuo team usa davvero, proporzionati ai ruoli e documentati come misura di alfabetizzazione AI prevista dall’AI Act (art. 4).