Design tokens
Colore, tipo, spazio, griglia, radius, bordi e motion. Sono valori condivisi, non componenti.
Netmarket design system.
Un’unica base per progettare, sviluppare e verificare ogni pagina Netmarket.
Un sistema con confini chiari.
Il riuso nasce da responsabilità comprovate. Le eccezioni non diventano standard per somiglianza.
Primitive
Container, Section e Stack governano contenimento e ritmo senza imporre una scenografia.
Componenti
Azioni, navigazione, progetti, team, recensioni, FAQ e form con responsabilità stabili.
Pattern editoriali
Hero, split, featured e archivi condividono principi, ma mantengono composizioni adatte al contenuto.
Eccezioni di pagina
Hero social, visual Siti web, timeline Agenzia e art direction dei case study restano locali.
Una necessità, una scelta chiara.
Prima di creare un componente, verifica questa mappa. Le composizioni speciali riusano le stesse primitive.
| Necessità | Componente | Regola |
|---|---|---|
| Contenere una sezione | Container + Section + Stack | Standard o wide; ritmo standard o compatto. |
| Aprire una sezione | SectionHeading | Sinistra predefinita; centro solo per una sezione focalizzata. |
| Proporre un’azione | Button | Primary, secondary, inverse. Due dimensioni, stati comuni. |
| Controllo con sola icona | IconButton | Nome accessibile obbligatorio; bersaglio minimo 44 px. |
| Mostrare un progetto correlato | ProjectCard | Immagine 4:3, categoria esterna, titolo e sintesi. |
| Chiudere con un contatto | ContactCTA | Superficie scura o chiara; una sola azione. |
| Raccogliere un primo indirizzo | CTAInlineForm | Solo dove il contatto breve è utile; poi il form completo. |
| Raccogliere una richiesta | ContactForm / CareerForm | Flussi diversi; un unico stile per campi, errori e conferme. |
| Mostrare fiducia | ClientMarquee / ReviewsSection | Loghi e recensioni hanno contenuto e comportamenti distinti. |
| Presentare le persone | TeamSection | PersonCard è interna alla sezione, non un secondo standard. |
| Rispondere a domande | FAQBlock | Un solo accordion condiviso con tastiera e stato esplicito. |
| Animare contenuti | data-reveal | Preset documentati. Nessun wrapper Astro alternativo. |
Fondazioni visive.
Mona Sans, neutri freddi, bianco dominante e blu Netmarket usato come segnale.
Brand blue
Ink
Muted
Metadata
Errore
Successo
Canvas
Surface
Border
Comunichiamo valore attraverso progetti reali.
Una direzione chiara per il progetto.
Competenze che lavorano insieme.
Strategia, contenuti e tecnologia.
Metodo e controllo.
Una parola in blu.
Accento cromatico per il concetto principale, massimo uno per titolo.
Una selezione intenzionale.
Marker con barre e handle, compatibile con la “o” obliqua e con il reveal.
Azioni e segnali.
Poche varianti, gerarchia netta, icone funzionali e focus sempre riconoscibile.
Azioni su chiaro
Primaria nera per l’azione principale; secondaria per un’alternativa.
Azioni su scuro
Inversa bianca. Il contrasto deve restare leggibile anche al passaggio del cursore.
Stati e dimensioni
Altezza minima 44 px; 56 px per form e CTA finali. Usa Tab per verificare il focus.
Badge e tassonomie
Padova SEO Dal 1986
Icone e controlli
Icone servizio
Lo spazio ha una regola.
Una griglia comune, due ritmi di sezione e quattro raggi. Le variazioni editoriali devono avere uno scopo.
Contenimento
- Standard
- 1200 px: testo e contenuti
- Wide
- 1328 px: portfolio e visual
- Shell
- 1472 px: header e footer
Ritmo verticale
- Standard
- 64-120 px tra sezioni
- Compatto
- 44-80 px nei passaggi brevi
- Testo
- 58 caratteri circa per riga
Forme
Controlli
Media
Pannelli
Visual
Form, in ogni stato.
Contatti e candidature condividono campi, label, aiuti, errori e conferme. Gli esempi non inviano dati.
Conferma: richiesta acquisita. Questo è un esempio di stato.
Progetti come prova.
Media reali, tipologia, cliente e sintesi. Il featured resta un pattern editoriale distinto.
Motion con uno scopo.
Progressive enhancement, distanze brevi e contenuto sempre disponibile.
Fade
Metadata ed elementi leggeri.
Fade up
Blocchi editoriali e contenuti.
Scale soft
Pannelli e card importanti.
Image reveal
Media principali e progetti.
Componenti canonici.
Pattern condivisi già verificati nelle pagine principali.
Una sola CTA di contatto.
Il componente comune chiude servizi, progetti e pagine istituzionali.
Clienti e progetti seguiti da Netmarket.
Una selezione di marchi e realtà presenti nello storico lavori.
Persone reali, competenze coordinate.
Ritratti 3:4, ruoli verificati e LinkedIn discreto.
Recensioni reali, leggibili.
Badge, rail manuale, fade condizionale e dialog per il testo completo.
Svetlana Soboleva Google
Esperienza Eccellente con Net Market Ho recentemente avuto il piacere di lavorare con loro per la strategia di marketing digitale della mia azienda e l'esperienza è stata eccezionale. Un team competente e sempre disponibile. Hanno elaborato una strategia su misura che ha dato risultati significativi in termini di aumento del traffico web e miglioramento della visibilità online. Molto aggiornati sulle ultime tendenze, tecniche di marketing e non solo. Consiglio vivamente Net Market a chiunque cerchi un partner affidabile e competente.
gherardo Gasparin Google
Dopo tanti anni di ricerca di professionisti del settore ho avuto la fortuna di incontrare dei Veri Professionisti. Tutto lo staff Netmarket Web Agency è sempre raggiungibile, disponibile e presente a studiare, consigliare e realizzare tutte le proposte fatte producendo uno strumento fatto a misura delle proprie esigenze. Un gran bel Team in supporto agli imprenditori.
paola malighetti Google
Bravissimi e soprattutto velocissimi! Sopratutto nei roll Up che sono molto belli e resistenti! Anche nell’ assistenza sono molto bravi!
Pazzo Design Google
Ottimo team di esperti, preparati e sempre pronti a trovare le soluzioni giuste ad ogni problematica che riguarda l'azienda e le problematiche nel web. Professionisti di alto livello: top!
FAQ essenziali.
Introduzione e accordion accessibile, senza card annidate.
Netmarket è un’agenzia di comunicazione, marketing e tecnologia con sede a Padova. Seguiamo strategia, branding, siti web, ecommerce, SEO, advertising, social media, produzione di contenuti, software e concorsi a premi, coordinando le competenze necessarie in un unico progetto.
Conviene valutare la capacità di comprendere il business, la qualità dei progetti reali, le competenze disponibili e il modo in cui vengono misurati i risultati. Prima di proporre strumenti o canali, Netmarket parte da obiettivi, pubblico, processi e priorità dell’azienda.
Il costo dipende dal perimetro: obiettivi, contenuti, funzionalità, integrazioni, canali e continuità richiesta. Dopo un primo confronto prepariamo una proposta trasparente con attività, tempi, responsabilità e investimento, evitando pacchetti standard poco adatti al contesto.
Un sito aziendale richiede normalmente alcune settimane; ecommerce, software e progetti articolati possono richiedere alcuni mesi. Campagne e attività continuative seguono tempi diversi. La pianificazione definitiva viene condivisa dopo aver verificato contenuti, approvazioni, integrazioni e priorità.
Un modulo breve quando serve un contatto diretto.
Art direction senza nuovi standard.
Hero social della homepage, browser e bento Siti web, timeline Agenzia, featured degli archivi e colori dei singoli case study restano locali. Riutilizzano fondazioni e motion, ma non sono componenti universali.