Landing page per l'Attrezzoteca di Luma, lo Spazio Tradizioni Future di Loro Piceno (MC). È un catalogo online di modelli 3D di oggetti (ganci, tappi, supporti) che la comunità può scaricare e fabbricare con stampa 3D, fresatura CNC o taglio laser.
- Maker, artigiani, membri della comunità locale
- Utenti di fablab e makerspace
- Persone con competenze tecniche medie (sanno cos'è un file STL/STEP)
- Artigianalità digitale: unione tra tradizione locale e fabbricazione digitale
- Accessibilità: chiunque può scaricare e produrre questi oggetti
- Cura del dettaglio: gli oggetti sono progettati con precisione
| Nome | Hex | Uso |
|---|---|---|
| Rusciu | #c44b36 |
PRIMARIO — terracotta rosso, colore dominante della landing page |
| Fiastrella | #66c0be |
Secondario — teal/turchese (usato nei render 3D degli oggetti) |
| Grugni | #3d3d3b |
Testo, sfondi scuri |
| Jia | #f5f0e8 |
Sfondo chiaro, crema caldo |
| Nero Mpestatu | #1a1a1a |
Nero pieno |
| Pèrseca | #e8836b |
Accento corallo |
| Mistrà | #5b8c4a |
Accento verde oliva |
- QSci — Font display/logo, geometrico e modulare. Usare il peso Black (900) per titoli e heading. (file:
assets/fonts/QSci-Black.otf, anche Regular disponibile inassets/fonts/QSci-Regular.otf) - Ronzino — Font body, serif morbido, 3 pesi disponibili: Regular 400, Medium 500, Bold 700 (file:
assets/fonts/Ronzino-*.otf)
- Logo principale (Rusciu):
assets/logo/luma-logo-rusciu.svg— logo + payoff "Spazio Tradizioni Future" in colore Rusciu. Usare questo come logo principale nella landing page. - Versione Jia (per sfondi scuri):
assets/logo/luma-logo-jia.svg - Versione Fiastrella:
assets/logo/luma-logo-fiastrella.svg - Il logo è composto dal testo "LUMA" in font QSci con una texture a blocchetti pixel-like
Sezioni dall'alto verso il basso:
- Header — Logo Luma + titolo "Attrezzoteca"
- Barra filtri — Pills per categoria (Tutti, Ganci, Tappi, Supporti, Altro) + campo ricerca
- Griglia modelli — Card con:
- Thumbnail PNG del modello 3D (sfondo bianco, oggetto teal)
- Nome del modello
- Badge categoria
- Click → apre viewer.html
- Footer — Crediti Luma / Loro Piceno
Sezioni dall'alto verso il basso:
- Header (stesso della homepage)
- Navigazione — Link "← Catalogo" per tornare
- Canvas 3D — Area grande con il modello 3D interattivo (rotazione, zoom, pan). Ha un overlay di loading con spinner durante il caricamento del WASM (~3 secondi)
- Info modello — Nome (h1) + descrizione
- Sezione Download — Bottoni per ogni formato disponibile (STEP, STL, OBJ, DXF) con icona download
- Footer
- Stack: HTML/CSS/JS puro, nessun framework, nessun build step
- CSS: Tutte le variabili brand sono già definite come CSS custom properties in
css/style.css - Responsive: deve funzionare bene su desktop (4 colonne griglia), tablet (2-3 colonne), mobile (1 colonna)
- Il viewer 3D (canvas Three.js) non va toccato — il design riguarda tutto il resto attorno
- GitHub Pages: sito statico, no server
css/style.css ← QUESTO È IL FILE PRINCIPALE DA MODIFICARE PER IL DESIGN
index.html ← struttura HTML homepage
viewer.html ← struttura HTML viewer
js/shared.js ← header/footer (HTML generato via JS)
L'identità Luma è un mix tra artigianale e digitale. Il font QSci del logo ha un carattere pixel/modulare, mentre Ronzino è un serif elegante. Il colore primario è Rusciu (#c44b36), un terracotta rosso forte e caldo che richiama la terra marchigiana. Il Fiastrella teal è presente solo nei render 3D degli oggetti.
Suggerimenti di direzione:
- Industrial-artigianale: layout pulito ma con carattere, non sterile
- Whitespace generoso con accenti di colore decisi
- Le card dei modelli devono essere il protagonista — le thumbnail sono render 3D su sfondo bianco con oggetti teal
- Hover effects sulle card che diano feedback tattile
- La tipografia deve essere espressiva — usare QSci per titoli/heading grandi, Ronzino per il corpo
- Lo sfondo Jia (#f5f0e8) dà un tono caldo e non sterile, diverso dal bianco puro
Le thumbnail dei modelli sono render isometrici 3D con:
- Sfondo bianco
- Oggetto colorato in teal (#66c0be circa)
- Stile CAD pulito con ombre morbide