UI KIT & SPECIFICHE DI DESIGN

DAVDESAIN DESIGN SYSTEM HANDBOOK – VERSIONE 1.7.0

0. Specifiche di Spaziatura, Dimensioni e Layout (Design Specs)

Tipografia & Pesi del Font

Variabile Font Pesi
--font-heading--family Anonymous Pro (Monospace) 700 (Bold)
--font-body--family Inter (Sans-serif) 400, 700

Scala Dimensionale Font (CSS variables)

--font-size--6xl (72px) – Titoli giganti hero.
--font-size--5xl (56px) – Titoli H1 di pagina.
--font-size--4xl (45px) – Titoli H2 di sezione.
--font-size--3xl (35px) – Intestazioni medie H3.
--font-size--md (16px) – Testo standard del corpo, prezzi.
--font-size--sm (14px) – Testo secondario, varianti.
--font-size--xs (12px) – Didascalie, badge di stato.

Scala Spaziatura (Margini e Padding)

MARGINI
  • --margin-6xl (96px)
  • --margin-5xl (72px)
  • --margin-4xl (48px)
  • --margin-lg (24px)
PADDING
  • --padding-2xl (48px)
  • --padding-xl (36px)
  • --padding-md (16px)
  • --padding-sm (12px)

Contenitori Layout

--normal-page-width (1200px) – Larghezza massima dei contenitori e-commerce.
--narrow-page-width (800px) – Contenitore stretto per form, policy e articoli.

1. Tavolozza Colori

Sfondo Principale #000000 | Scheme 5
Testo Primario #FFFFFF
Testo Secondario rgba(255,255,255,0.7)
Bordi & Linee rgba(255,255,255,0.1)

2. Tipografia & Stile Testi

Titolo H1 (Anonymous Pro - 700)

Titolo Principale H1

Titolo H2

Titolo Sezione H2

Titolo H3

Titolo Card H3

Testo del Corpo (Inter - 400)

Il testo normale è renderizzato usando il font Inter. Garantisce un elevato comfort di lettura su sfondi scuri.

Citazioni (Blockquote)
"La bellezza salverà il mondo, ma il neurodesign ci aiuterà a capire come lo fa."
Elenchi Puntati e Numerati
  • Primo elemento della lista puntata
  • Secondo elemento con testo descrittivo
  • Terzo elemento finale
  1. Fase di Analisi del Layout
  2. Sviluppo dei file HTML
  3. Migrazione finale a WordPress

3. Pulsanti & Tag Filtro

Pulsante Primario
Pulsante Secondario
Pulsante con Icona Spedizione
Filtri / Pills Collezioni (Interattivi)
Tutti Dipinti Sculture Design Oggetti

4. Moduli, Selettori & Form

Campi di Inserimento

Selettori & Cursori

Checkboxes
Pulsanti Radio
Interruttore Toggle
Regolazione Prezzo (Slider)
Min: € 100 € 3500 Max: € 10000
File Upload

5. Navigazione & Paginazione

Briciole di pane (Breadcrumbs)
Home / Negozio / THE PEDO OF MY HEART
Paginazione Corretta (Visibile e Leggibile)

6. Componenti Avanzati (Fisarmoniche, Tabs, Notifiche, Badge & Schede Prodotto/Blog)

Fisarmoniche (Accordion)

Specifiche dell'opera
Dipinto originale realizzato a mano con pigmenti naturali. Tela di cotone montata su telaio di legno massello. Certificato di autenticità firmato dall'autore incluso.
Cura e Conservazione
Tenere lontano dalla luce solare diretta e da fonti di calore. Spolverare delicatamente con un panno morbido e asciutto.

Badges / Etichette

Sconto -15% Nuova Collezione Esaurito

Schede Informativo (Tabs)

Un'opera d'arte nata per trasmettere armonia, combinando concetti di neuroestetica a tonalità decise ed avvolgenti.
Spedizione in cassa di legno imbottita entro 5 giorni lavorativi, tracciata e assicurata. Reso garantito.

Messaggi di Stato

Carrello aggiornato con successo!
Errore: Inserisci un indirizzo email valido.

Esempi di Schede e Cards del Brand

Product Image
Serie Regrediors THE PEDO OF MY HEART € 1.200,00
Blog Image
12 LUGLIO 2026 I GAY CREANO BELLEZZA...

Un articolo che esplora il concetto di distruzione ed estetica del corpo...

Leggi articolo

"L'opera è arrivata ottimamente imballata. La combinazione di concetti cognitivi e armonie di colori scuri ha completamente trasformato la mia zona living."

Marco V. Cliente Verificato

7. Visualizzazione Dati & Notifiche (Popup, Tabelle, Tooltip & Toasts)

Popups & Toast Notifications

Note informative (Tooltips)

Tutte le opere sono spedite con spedizione tracciataForniamo codice DHL/FedEx entro 24 ore e sono provviste di certificato digitaleRegistrato su blockchain VeChain.

Spedizione Gratuita (Barra Avanzamento)

Ti mancano € 30,00 per la spedizione gratuita!

Tabelle Dati

Opera Dimensioni Prezzo
THE PEDO OF MY HEART 120 x 120 cm € 1.200,00
SERIE REGREDIORS I 80 x 100 cm € 950,00
NEURODESIGN COGNITIVO 150 x 150 cm € 2.100,00

8. Griglie di Layout Responsive (Preview con Contenuti Reali)

Griglia a 2 Colonne (Anteprima Prodotti)
Product Image
PRODOTTO VETRINA A € 1.200,00
Product Image
PRODOTTO VETRINA B € 950,00
Griglia a 3 Colonne
Colonna 1
Colonna 2
Colonna 3

9. Esempi di Effetti, Codice & Schemi Colore Alternativi

Schemi Colore Alternativi per il Tema

Questi schemi colore sono stati progettati per adattarsi perfettamente all'estetica minimalista e di lusso del sito:

Schema Light Alabaster Alternativa Chiara
BOTTONE BORDO
Schema Sophisticated Sage Naturale/Terrigno
BOTTONE BORDO
Schema Muted Sand Warm Luxury
BOTTONE BORDO

Anteprima Effetti & Esempi di Codice CSS

Ken Burns Slow Zoom (Hover per testare)
Demo zoom
.zoom-container img { transition: transform 3.5s cubic-bezier(0.16, 1, 0.3, 1); } .zoom-container:hover img { transform: scale(1.08) translate(-1%, -1%); }
Skeleton Loader Animation
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .skeleton { background: linear-gradient(90deg, #111 25%, #222 50%, #111 75%); background-size: 200% 100%; animation: shimmer 1.8s infinite linear; }
Mappatura Variabili Colore in CSS (Warm Sand)
/* Dichiarazione Schema Colore */ .color-scheme-sand { --color-background: #DED5C9; --color-foreground: #2C2520; --color-border: #B5A897; --color-button-background: #2C2520; --color-button-text: #DED5C9; }

10. Brand Assets, SEO, CTA & Cookie Consent Guidelines

Brand Identity Assets

Logo Ufficiale (Resa Tipografica)
DAVDESAIN
font-family: var(--font-heading--family); font-weight: 700; text-transform: uppercase; letter-spacing: 2px;
Favicon Tag (Inclusione nel Head)
D
Favicon 32x32px (Esempio Monogramma)
<link rel="icon" type="image/png" href="https://davdesain.com/wp-content/themes/davdesain-theme/assets/images/favicon.png">
Tagline Ufficiali del Brand

"La scienza incontra l'arte. Il design che stimola la mente." (Visione Corporate)

"Dalla neuroestetica all'interior design: progettare spazi che curano la mente." (Visione Scientifica)

Informativa Cookie GDPR (cookie-bar.js)

Il banner viene iniettato dinamicamente a fondo pagina se il consenso non è presente in localStorage.

Anteprima Visiva del Banner

Questo sito utilizza i cookie per ottimizzare l'esperienza utente. Continuando la navigazione o scorrendo la pagina, acconsenti all'uso dei cookie. Leggi la Privacy & Cookie Policy.

✔ ACCETTAZIONE ALLO SCROLL Soglia: > 60px

Ottimizzazione SEO & CTA Guidelines

Esempi di Meta Tag Description per WordPress 1. Home Page Description
<meta name="description" content="DAVDESAIN fonde la neuroestetica con l'interior design di lusso. Esplora profumi d'autore, sculture e arredi d'avanguardia creati per stimolare la mente.">
2. Shop / Catalog Page
<meta name="description" content="Acquista la collezione esclusiva di arredi, sculture e fragranze DAVDESAIN. Opere d'arte d'avanguardia progettate secondo i principi della neuroestetica.">
Call to Action (CTA) di Conversione Lusso
Azione Testo Consigliato (CTA) Tono e Contesto
Acquisto Opere Aggiungi alla Collezione Minimalista, non aggressivo. Adatto a sculture ed arredi.
Acquisto Profumi Ordina Fragranza Diretto e focalizzato sul prodotto.
Newsletter Ricevi Accesso Esclusivo Esclusivo, genera senso di appartenenza a una cerchia ristretta.
Consulenza Design Progetta il tuo Spazio Incentrato sul beneficio del cliente, orientato al servizio.

Newsletter Galleria

Iscriviti per ricevere in anteprima l'accesso alle nuove collezioni d'arte e ai progetti esclusivi di interior design.

Prodotto aggiunto al carrello!