Manuale di design interno

Manuale di design

Standard di design completi per modulario.com — colori, tipografia, spaziature, componenti con anteprime live.

Colori

I colori del testo sono adattati al WCAG 2.1 AA (≥ 4.5:1 su bianco). Le tonalità vivaci originali vivono nelle varianti -accent — esclusivamente per sfondi, chip, gradienti.

Brand palette

Yellow

--color-brand-yellow

#a16207 (testo, WCAG AA)

--color-brand-yellow-accent

#d69f1f (bg / gradient)

#ebb22d (light focus)

Orange

--color-brand-orange

#9a3412 (testo, WCAG AA)

--color-brand-orange-accent

#fbae17 (bg / gradient)

Green

--color-brand-green

#15803d (testo, WCAG AA)

--color-brand-green-accent

#1aa46c (bg / gradient)

Cyan

--color-brand-cyan

#0e7490 (testo, WCAG AA)

--color-brand-cyan-accent

#21acd7 (bg / gradient)

#3bc4ef (light focus)

Ink — scala neutra

ink-50

#f5f5f5

chip bg

ink-100

#ebebeb

divider, ring

ink-200

#e2e2e2

bordo chip, bordo btn

ink-300

#cfd0d4

placeholder

ink-400

#4b5563

label, icone (7.1:1)

ink-500

#4e4b66

testo secondario

ink-600

#4d4d4e

testo del corpo

ink-700

#33373d

titoli chiari

ink-800

#212121

testo primario, btn

ink-900

#171717

titoli scuri, footer

Speciali / semantici

Primary (testo/corpo)

--color-primary

#2e2e2e

Accent green

--color-accent

#2ab67d

Link

--color-brand-link

#0e7490

Tipografia

Caratteri

Primario — Gabarito

Modulario

Bold 700 — titoli UI

Regular 400 — corpo del testo

--font-sans, --font-display

Gabarito, ui-sans-serif, system-ui…

Pesi del variable font: 400 – 900

Self-hosted: /fonts/gabarito-latin.woff2

Accentuato — Caveat

Excel

Salesforce

Trello

--font-accent / utility: .font-accent

Caveat, cursive

Pesi del variable font: 400 – 700

Utilizzo: pannello "senza Modulario" (etichette competitor)

Scala tipografica

Tag	Dimensione	Peso	line-height	Anteprima live
h1	1.75em (~35px)	900	1.08	Titolo H1
h2	clamp(1.5rem, 3.2vw, 2.4em)	900	1.08	Titolo H2
h3	1.25em (~25px)	900	1.08	Titolo H3
body	20px (base)	400	1.5	Corpo del testo — contenuto comune della pagina
small	0.85em (~17px)	400–600	1.5	Descrizione, metadati, testo secondario
caption	0.72 – 0.78em	600–700	1.5	Label, descrizioni metriche

Headings (h1–h5)

line-height: 1.08 · letter-spacing: -0.01em

Compatti, tight, peso 900

Body text

line-height: 1.5 · letter-spacing: 0

Standard, leggibile

Spaziature e margini

Spacing Tailwind: 1 unit = 0.25 rem = 4 px. Valori comuni sul sito:

Padding interno

p-1 4px

container toggle (p-1)

p-2 8px

chip piccoli, tag

p-3 12px

elementi compatti, nav link

p-4 16px

card, pannello feedback

p-6 24px

card modulo, interno CTA (px-6)

p-8 32px

pannelli informativi più grandi

p-12 48px

hero, sezioni CTA (py)

p-16 64px

sezioni desktop (py-16)

Gap nei grid e nei flex

gap-2 8px

chip e tag

gap-3 12px

input dei moduli

gap-4 16px

grid moduli, card (standard)

gap-5 20px

icone con descrizioni

gap-6 24px

riga CTA, dati di contatto

gap-8 32px

riga statistiche hero

gap-10 40px

nav di sezione

Container della pagina

.container-page

mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8

max-width: 80 rem (1280 px) · padding orizzontale: 16 / 24 / 32 px

Arrotondamenti (border-radius)

rounded (4px)

focus outline

rounded-lg (8px)

tab toggle, tag

rounded-xl (12px)

chip, pannello feedback

rounded-2xl (16px)

widget, pannelli

rounded-3xl (24px)

card modulo, blocco CTA

rounded-full

tab hero, pill, btn icon

15px (--radius-btn)

btn-primary, btn-secondary

28px

anteprima dashboard

Ritmo verticale delle sezioni

Sezione	py (top / bottom)	Note
Hero	pt-10 pb-6 / md:pt-14 pb-8	Con immagine BG
Modules	py-12	bg-white
Testimonials	py-16	bg-white
Interno CTA	py-14 px-6	rounded-3xl bg gradient
Sezione wrapper CTA	pb-20 pt-10	bg-white

Pulsanti

.btn-primary

bg: var(--color-primary) = #2e2e2e

hover bg: var(--color-ink-800) = #212121

border: 2px solid primary

padding: 14px 20px · font: 1rem / 500

border-radius: var(--radius-btn) = 15px

transition: bg, border, color — 180ms ease

.btn-secondary

Guarda la demo di 2 min

bg: white → hover: var(--color-ink-50)

border: 2px solid var(--color-ink-200)

padding: 14px 20px · font: 1rem / 500

border-radius: 15px · transition: bg 150ms ease

Stati dei pulsanti

default

:hover

disabled

Normale default

Hover :hover

Riga CTA — pattern hero

Guarda la demo di 2 min

flex-col su mobile → sm:flex-row · gap-3

Chip e badge

.hero-chip

MODULARIO – soluzione ERP e CRM modulare in cloud

bg: linear-gradient(135deg, #f4d98f → #fdd49b → #9ad9b5 → #8cd9ed)

border: none · border-radius: 12px (--radius-chip)

padding: 6px 12px · gap: 10px · font: 0.72em / 400

⚠ L'icona è sempre A DESTRA del testo

.efektTextu — testo con gradient

con Modulario

I clienti dicono

gradient: linear-gradient(300deg, #ebb22d 0%, #3bc4ef 100%)

-webkit-background-clip: text · -webkit-text-fill-color: transparent

Utilizzo: label toggle, supertitle di sezione, titoli enfatici

Stat chip — metriche hero

18.000+ Utenti attivi

200+ Aziende usano Modulario

18 Moduli sulla piattaforma

value: .brand-gradient-text font-black text-[1.15em]

label: text-ink-500 font-semibold text-[0.72em]

layout: flex items-baseline gap-1.5 · wrap gap-8

Card

Card modulo (link)

Fatturazione

rounded-3xl · bg-white · ring-1 ring-ink-100

shadow: 0 2px 12px rgba(0,0,0,0.04)

hover: -translate-y-0.5 + shadow 0 6px 24px

padding: p-6 · gap: gap-4

.gradient-border-card

Card con bordo gradient

Bordo gradient statico sempre visibile — pseudoelemento da 2 px.

gradient border: cyan → green → yellow (135°)

Sempre visibile (opacity 1)

.gradient-border-hover

Bordo gradient su hover

Passateci sopra con il mouse — comparirà il bordo gradient.

opacity 0 → 1 in hover (200ms)

Combinare con ring-1 ring-ink-100

Blocco CTA (rounded-3xl + brand-gradient-bg)

Pronti a iniziare? Prenotate una consulenza gratuita.

Contattateci e in 24 ore vi proporremo una soluzione.

Prenota consulenza

rounded-3xl · .brand-gradient-bg · shadow-[0_6px_40px_rgba(0,0,0,0.08)]

padding: px-6 py-14 · text-center (valore di produzione = py-14)

Toggle (tab di selezione)

Toggle moduli (con / senza Modulario)

Container: bg-[#f4f4f4] · r-12 · border-2 white · p-1

Attivo: bg-white shadow-sm · r-8

Label attivo: .efektTextu font-semibold

Non attivo: text-ink-600 (senza bg)

Tab vista hero (stile pill)

Container: rounded-full · border ink-200 · p-1

shadow: 0 4px 16px rgba(0,0,0,0.06)

Attivo: bg-white + ring-1 ring-ink-200 + shadow-sm

letter-spacing: 1px sul testo del tab

Gradienti

.brand-gradient-bg

Sfondo dei blocchi CTA, sfondo del chip hero

#f4d98f → #fdd49b → #9ad9b5 → #8cd9ed

.brand-gradient-text

Valori numerici hero, metriche (clip text)

#d69f1f → #fbae17 → #1aa46c → #21acd7

.efektTextu

Label toggle, supertitle di sezione (clip text)

#ebb22d → #3bc4ef (300 deg)

gradient-border ::before

.gradient-border-card / .gradient-border-hover

#21acd7 → #1aa46c → #d69f1f

Icone

Icone SVG dei moduli (inline, stroke="currentColor")

Import: import.meta.glob("?raw") → render tramite <Fragment set:html>. Il colore dell'icona è gestito dal CSS color (Tailwind text-[#…]).

Fatturazione #a16207

Contabilità #0e7490

Estrazione documenti #15803d

Preventivi #a16207

Presenze #0e7490

Pianificazione #15803d

Recruiting #15803d

File #0e7490

Contratti #a16207

Anagrafica #15803d

Colori delle icone — regola

orange

text-[#a16207]

cyan

text-[#0e7490]

green

text-[#15803d]

ink

text-ink-800

Icone Lucide (per moduli senza SVG custom)

lucide:workflow Workflow

lucide:graduation-cap Formazione

lucide:users CRM

lucide:package Magazzino

lucide:factory Produzione

lucide:shopping-bag Acquisti

lucide:wrench Manutenzione

lucide:list-ordered Lista d'attesa

Moduli e interattività

Input / Textarea

border: 1px solid ink-200 · rounded-xl

focus: border-ink-400 (transition 150ms) — senza outline

padding: px-3 py-2.5 · font-size: 14px

placeholder: text-ink-400

Widget di feedback (bottom-right)

Componente: src/components/feedback/FeedbackWidget.tsx (Preact island)

Posizione: fixed bottom-6 right-6 z-[9999]

Pulsante trigger: rounded-full bg-ink-800 px-4 py-3

Pannello: w-[360px] rounded-2xl border border-ink-100 shadow-[0_8px_40px_rgba(0,0,0,0.18)]

Animazione di apertura: fadeSlideUp — translateY(12px) + scale(0.97) → (0, 1) / 160ms

Toast dopo l'invio: auto-dismiss 4s fadeSlideUp + fadeOut

Screenshot: input max 2000×2000px, canvas compresso → 1200px JPEG 0.82

Webhook: POST application/x-www-form-urlencoded → Apps Script

Focus outline (globale)

:focus-visible

outline: 2px solid var(--color-brand-cyan-light) = #3bc4ef

outline-offset: 2px · border-radius: 4px

Sezioni e pattern di layout

Link nel testo (WCAG 1.4.1)

I link in p, li, dd, blockquote, article, .prose ricevono automaticamente l'underline

text-decoration-thickness: 1px · hover: 2px · text-underline-offset: 3px

Disattivazione: .no-underline (button stilizzati come link)

Sfondo delle sezioni — alternanza

bg-white

la maggior parte delle sezioni (default)

bg-[#f4f4f4]

container toggle, sezione alternata

.brand-gradient-bg

blocco CTA (all'interno della sezione wrapper bg-white)

Header

sticky top-0 · bg-white · border-b border-ink-100

Logo + link nav + LanguageSwitcher + pulsante CTA (.btn-primary)

Mobile: hamburger → drawer overlay animato

Stratificazione z-index

Elemento	z-index	Codice
Header sticky	sticky (flow)	`sticky top-0`
Nav della brand page	50	`z-50`
Cookie banner / modali	50	`z-50`
Widget di feedback	9999	`z-[9999]`

Marquee (banda clienti)

.marquee-track — animation: marquee 40s linear infinite

.marquee-fade — mask-image: trasparente ai bordi (8% / 92%)

@media (prefers-reduced-motion) — animazione disattivata