Mosaico · design system

A system made of tiles.

Palette, typography, spacing and components of the new site. Everything comes from the logo: the blue D and the staircase of red squares at 100, 70, 40 and 10% opacity. Sizes are in rem; grid, utilities and typography are Bootstrap 5.3’s, configured with these tokens.

Palette

Brand

From the logo: blue draws the D, red builds the tile staircase.

Aa

Digipa Blue#0059DF$blue-600Primary actions, links, the “D”. 6.0:1 on white.
Aa

Pixel Red#C90505$red-600Emphasis, tile staircase, details. 5.4:1 on paper.
Aa

Signal#C8F23C$signalAI only. Fill on ink (15.3:1), never text on light.

Ink

Cool blacks from the same family as the blue: text and dark stages.

Aa

Ink 950#060A16$ink-950AI stage, footer.
Aa

Ink 900#0C1224$ink-900Body text (16.9:1 on paper).
Aa

Ink 700#252E4A$ink-700Strong secondary text.
Aa

Ink 500#566080$ink-500Muted text on light (5.65:1).
Aa

Ink 300#AEB4C9$ink-300Muted text on ink (9.6:1).
Aa

Ink 100#E9EBF2$ink-100Text on ink, light borders.

Surfaces

A warm white as the canvas: less glare, more editorial.

Aa

Paper#F6F4EE$paperPage background.
Aa

Paper 2#EEEBE3$paper-2Inset sections.
Aa

White#FFFFFF$whiteCards and forms.

Tints and pixel steps

The logo’s opacities (100/70/40/10%) become a scale used for pictograms and decoration.

Aa

Blue 100#E3EDFF$blue-100Icon backgrounds, blue cards.
Aa

Red 100#FDE7E4$red-100Red card backgrounds.
Aa

Pixel 70#D95050$pixel-70Decorative.
Aa

Pixel 40#E99B9B$pixel-40Decorative.
Aa

Signal 700#4A6600$signal-700“AI” text on light (6.0:1).
Aa

Blue 300#86B1FF$blue-300Links on ink (9.2:1).

Ink 900 on Paper 16.9:1

White on Blue 6.0:1

Signal on Ink 950 15.3:1

Typography

Bricolage Grotesque (variable, opsz and wdth axes) for headings, Instrument Sans for text, JetBrains Mono for labels and data. All self-hosted. Headings use fluid rem sizes; h1–h6 go through Bootstrap’s RFS.

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

One pixel at a time.

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

We are our own first client.

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

Three ways to grow a business.

h3 · 1.75rem (RFS)

Your private LLM, on your documents

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

We design custom websites, apps and artificial intelligence solutions.

body · 1rem / 1.6 · Instrument Sans

Accessibility and usability come first: every mockup is responsive from the start.

.eyebrow · 0.8125rem · JetBrains Mono

Digital Innovation Partner

Spacing

Bootstrap’s scale, extended with 6–9 for section rhythm. Sections use clamp(4.5rem, 3rem + 6vw, 9rem).

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

Shapes and motion

Base tile: 0.5rem. Radii 0.375 / 0.75 / 1.25 / 2rem; pill-shaped buttons.
Easing: out cubic-bezier(.22,1,.36,1), snap cubic-bezier(.34,1.56,.64,1).
Durations: 160 / 320 / 700ms. Transform and opacity only.
Content visible without JS; animations only with prefers-reduced-motion: no-preference.
Interactive targets of at least 2.75rem (44px).

Components

Buttons

Primary Ink Outline Red Arrow link

Pixel pictograms

They replace stock illustrations: 8×8 grids where each digit is a tile at one of the logo’s opacities. Blue for Build, red for Grow, ink for Protect, Signal for 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

AI cards on an ink stage

Custom AI

Open-weight models on your servers or in a European cloud, with search across company documents (RAG), permissions respected and sources always cited.

AI training

Hands-on courses on the tools your team actually uses, tailored to each role and documented as an AI literacy measure under the AI Act (Art. 4).