SiteRail
Rail laterale sinistro (60px), trasparente. Contiene logo Pianeta, eyebrow contestuale, theme switcher (Light/Auto/Dark), locale switcher IT/EN. Persiste su tutte le pagine con chrome=true.
<SiteRail current={Astro.url.pathname} />Interno · Team Pianeta
Team Hub
Pagina di lavoro del team. Unisce mappa del sito (auto-generata al build da
src/pages + src/content) e design tokens (valori risolti live
dal CSS). Non indicizzata, non in nav.
Overview
Snapshot volumi statici + copertura IT/EN.
34
Pagine statiche
25
IT + EN
8
Solo IT (EN mancante)
0
Solo EN (orfane)
Pagine statiche IT/EN
Ogni riga è un .astro sotto src/pages (esclusi api/,
admin/, dinamiche [slug]/[offer], e 404).
| Route | IT | EN | Note |
|---|---|---|---|
/ | ✓ | ✓ | |
/alba | ✓ | ✓ | |
/bandi | ✓ | ✓ | |
/bulletin | ✓ | ✓ | |
/bulletin/confermato | ✓ | ✓ | |
/bulletin/disiscritto | ✓ | ✓ | |
/bulletin/grazie | ✓ | ✓ | |
/bulletin/iscrivimi | ✓ | ✓ | |
/bulletin/preferenze | ✓ | ✓ | |
/careers | ✓ | ✓ | |
/contact | ✓ | ✓ | |
/contatti | ✓ | × | |
/cookie | ✓ | ✓ | |
/csrd | ✓ | × | |
/editoriale | ✓ | × | |
/explore/media | ✓ | × | |
/hire | ✓ | ✓ | |
/hire/fondazioni | ✓ | ✓ | |
/hire/grazie | ✓ | ✓ | |
/hire/metodo | ✓ | ✓ | |
/hire/piattaforme | ✓ | ✓ | |
/hire/terra | ✓ | × | |
/hub | ✓ | × | |
/lab | ✓ | ✓ | |
/lavoriamo-insieme | ✓ | ✓ | |
/mappa | ✓ | × | |
/partner | ✓ | × | |
/privacy | ✓ | ✓ | |
/processo | ✓ | ✓ | |
/services | ✓ | ✓ | |
/styleguide | ✓ | × | interno (noindex) |
/team | ✓ | ✓ | |
/team-as-a-service | ✓ | ✓ | |
/work | ✓ | ✓ |
Sezioni dinamiche (collezioni)
Index + detail template per ogni collezione. Coverage EN = enCount / itCount.
Work / case study
- Index IT
/work- Index EN
/en/work- Detail IT
/work/[slug]- Detail EN
/en/work/[slug]- Contenuti IT
- 10
- Contenuti EN
- 9
- Coverage EN
Bulletin (newsletter archivio)
- Index IT
/bulletin- Index EN
/en/bulletin- Detail IT
/bulletin/[slug]- Detail EN
/en/bulletin/[slug]- Contenuti IT
- 9
- Contenuti EN
- 5
- Coverage EN
Services
- Index IT
/services- Index EN
/en/services- Detail IT
/services/[slug]- Detail EN
/en/services/[slug]- Contenuti IT
- 17
- Contenuti EN
- 16
- Coverage EN
Team
- Index IT
/team- Index EN
/en/team- Detail IT
/team/[slug]- Detail EN
/en/team/[slug]- Contenuti IT
- 7
- Contenuti EN
- 7
- Coverage EN
Lab (R&D)
- Index IT
/lab- Index EN
/en/lab- Detail IT
/lab/[slug]- Detail EN
/en/lab/[slug]- Contenuti IT
- 5
- Contenuti EN
- 5
- Coverage EN
Careers
- Index IT
/careers- Index EN
/en/careers- Detail IT
/careers/[slug]- Detail EN
/en/careers/[slug]- Contenuti IT
- 2
- Contenuti EN
- 2
- Coverage EN
Hire (multi-pagina, non collezione)
| Route IT | Route EN | Nome |
|---|---|---|
/hire | /en/hire | Index |
/hire/[offer] | /en/hire/[offer] | Offer dettaglio (dinamica) |
/hire/fondazioni | /en/hire/fondazioni | Fondazioni |
/hire/piattaforme | /en/hire/piattaforme | Piattaforme |
/hire/metodo | /en/hire/metodo | Metodo |
/hire/grazie | /en/hire/grazie | Grazie |
Contenuti markdown
Un file per riga da src/content/*/*.md. Il flag EN verifica l'esistenza del sidecar
<slug>.en.md.
| Collezione | Slug | Titolo | EN |
|---|---|---|---|
| bulletin | bosco-colto-2026 | Bosco Colto 2026 — Pensare animale, costruire comunità | ✓ |
| bulletin | carbon-footprint-sito | Il carbon footprint del tuo sito — cos'è, come si misura, dove si riduce | × |
| bulletin | chi-siamo | Chi siamo | ✓ |
| bulletin | empco-claim-green-in-vigore | EmpCo è in vigore dal 27 settembre — 8 domande per i claim green del tuo sito | × |
| bulletin | lab-neuromarketing | Il Lab di Neuromarketing: il metodo, e il caso ECLAG | ✓ |
| bulletin | lunedi-dopo-il-go-live | Il lunedì dopo il go-live: come il vostro team pubblica da solo | × |
| bulletin | swarm-neural-prediction | Predizione comportamentale e neurale: perché le usiamo insieme | ✓ |
| bulletin | validare-una-campagna-prima-di-produrla | Validare una campagna video prima di produrla | ✓ |
| bulletin | web-sostenibile-dati-27-siti-2026 | Non bastano i claim green: su 27 siti misurati, il 55% non supera il grade C | × |
| careers | ai-manager | AI Manager | ✓ |
| careers | placeholder | Posizioni aperte | ✓ |
| lab | atlas | Atlas — framework ESG proprietario | ✓ |
| lab | cms-stack-terra | Stack Terra — CMS proprietario per sostenibilità digitale | ✓ |
| lab | future-seeds | Future Seeds — dove vanno e da dove arrivano i semi di una banca genetica | ✓ |
| lab | pianeta-green-meter | Pianeta.Green Meter — misurare la CO₂ di un sito | ✓ |
| lab | placeholder | Lab — work in progress | ✓ |
| services | ai-validation-swarm | AI validation con Swarm Intelligence | ✓ |
| services | app-prodotti-digitali | App & prodotti digitali | ✓ |
| services | brand-audit | Brand audit | ✓ |
| services | brand-identity-rebranding | Brand identity & rebranding | ✓ |
| services | brand-positioning | Brand positioning | ✓ |
| services | brand-vision-strategy | Brand vision & strategy | ✓ |
| services | design-system-multi-brand | Design system multi-brand | ✓ |
| services | editorial-educational-design | Editorial & educational design | ✓ |
| services | esg-framework-atlas | ESG framework — Atlas | ✓ |
| services | greenmeter-audit-co2 | GreenMeter audit CO₂ | ✓ |
| services | illustrazione-infografica | Illustrazione & infografica | ✓ |
| services | microsites-data-stories | Microsites & data stories | ✓ |
| services | neuromarketing-lab | Neuromarketing Lab | ✓ |
| services | pianeta-centric-design-strategy | Pianeta-centric design strategy | ✓ |
| services | piattaforma-documentale | Piattaforma documentale | × |
| services | piattaforme-dashboard | Piattaforme & dashboard | ✓ |
| services | web-sostenibile | Web sostenibile (Stack Terra) | ✓ |
| team | alba | Alba | ✓ |
| team | andrea | Andrea Maccone | ✓ |
| team | fabrizio | Fabrizio Ciampini | ✓ |
| team | foss | Francesca Fossati | ✓ |
| team | ludovica | Ludovica Ranzini | ✓ |
| team | max | Massimiliano Mauro | ✓ |
| team | sara | Sara Amatista | ✓ |
| work | apotheke | Apothéke Alimentare — brand e piattaforma per una bottega boutique pugliese | × |
| work | aries-towards-smarter-sustainable-world | Aries — Towards a smarter & more sustainable world | ✓ |
| work | bc3-annual-reports | BC3 Annual Reports — Crafting Stories of Climate Action | ✓ |
| work | bc3-rebranding | BC3 — Rebranding | ✓ |
| work | bosco-colto | Con Bosco Colto — amplificare chi opera nella sostenibilità | ✓ |
| work | childfund-world-index | ChildFund Alliance World Index — Amplifying Voices for Inclusion | ✓ |
| work | eclag | Choose to See Them — ECLAG | ✓ |
| work | geografia-dello-stare | Geografia dello stare | ✓ |
| work | klab-integrated-modelling | k.LAB — Integrated modelling | ✓ |
| work | untwist | UNTWIST — Untangling the Water-Energy-Food Nexus | ✓ |
Gap noti
Issue rilevate a mano durante audit UX/design: non derivabili da uno scan filesystem — elenco curato, da aggiornare quando si risolvono.
| Area | Issue | Perché non è auto-rilevato |
|---|---|---|
/en/404 | 404 in inglese assente | Astro serve /404.astro (IT) come fallback per rotte EN inesistenti — accettabile ma non ottimale |
Home / | Bento tile giallo (t-yellow) con testo bianco | Contrast fail WCAG AA — non ricavabile via grep, richiede audit visivo |
Alba popup/launcher | Gradiente pastello hex hardcoded | Non risponde a data-theme, non è ricavabile da import.meta.glob — segnalato a mano |
Team /team/[slug] | Detail page esiste come fallback SEO | La main UX è overlay in /team — la detail page è solo per crawler e link diretti |
Design tokens
Sistema di design di Pianeta.Studio — token, tipografia, componenti. Fonte: /hire.
I valori qui sotto sono risolti live dal CSS: cambiando tema in cima alla
pagina, si aggiornano.
Colors
Ogni swatch mostra il valore risolto della variabile CSS. Il valore si aggiorna cambiando tema.
Brand / neutral
CTA
Sistema /hire
Typography
Scala unica, allineata a /hire. A destra: valore risolto (font-size · line-height · letter-spacing).
Sustainable Creativity
--ty-hero — Cosa facciamo, in concreto
--ty-h2-sec — Un pezzo di articolo
--ty-h2-prose — Un sotto-titolo
--ty-h3-prose — Studio di design e tecnologia. Progetti Pianeta-centric, standard aperti, codice consegnato.
--ty-sub — Progettiamo prodotti digitali con vincoli tecnici verificabili: carbon budget, performance budget, accessibilità. Ogni riga di codice consegnata resta di chi la commissiona — niente lock-in, standard aperti, documentazione inclusa.
--ty-body — TEAM HUB · PIANETA
--ty-eyebrow — 13px meta inline · usata nelle liste, chip, byline
--ty-meta — “Non causare danno, non prendere alcunché dai sistemi naturali, non sprecare nulla.”
--ty-quote — Radii · Padding · Wrap
Radii
--radius-card --radius-card-sm --radius-chip --radius-pill Padding card
Padding --pad-card · 22px su tutti i lati. Radius --radius-card · 18px. Questa è la surface standard usata su tutte le pagine post-refactor.
Wrap
Section padding
Cards
Surface e varianti — dal sistema unico.
Card standard
Titolo esempio
Radius 18 · pad 22 · bg card · border default.
.pi-card <div class="pi-card">...</div>Card small
Titolo esempio
Radius 14 · pad 18.
.pi-card.pi-card--sm <div class="pi-card pi-card--sm">...</div> 01 Discovery
Il metodo di /hire: chip arancio in cima, titolo bold, descrizione muted.
.method-card (HireLanding) <div class="method-card"><span class="method-n">01</span>...</div>Da progetto
✳️ Foundation
Per team che partono da zero.
- ✓ Design system
- ✓ Landing
- ✓ Delivery
.offer-card (HireLanding) <a class="offer-card" style="border-top:3px solid …">...</a>“Standard aperti. Codice consegnato.”
— Manifesto Pianeta
Quote card (composita) <div class="pi-card"><blockquote>…</blockquote></div>Overlays & Chrome
Elementi di chrome del sito — descrizione + snippet. Nessuna demo interattiva qui (per non rompere lo stato della pagina).
Utility classes .pi-*
Prefisso .pi-* — sistema unico condiviso da tutte le pagine.
.pi-wrap .pi-wrap-narrow .pi-sec .pi-sec-soft .pi-card .pi-card--sm .pi-h1 .pi-h2 .pi-hero-sub .pi-eyebrow .pi-meta-label .pi-meta-value Dark mode
Attivata via data-theme="dark" (o data-theme="auto" + data-sun="night"). Testa qui col toggle in cima alla pagina.
Cosa cambia Come lo garantisci
Background surface
--pianeta-bg-card passa da #ffffff → #1a1d23. Usa .pi-card o var(--pianeta-bg-card), mai #fff hard-coded. Text
--pianeta-text passa da #0e1116 → #f5f4ee. Non usare mai il valore hex diretto. Muted
--pianeta-muted passa a rgba(245,244,238,0.58). Le rgba (14,17,22,.xx) vanno tokenizzate. Border
--pianeta-border flippa colore base (bianco su nero). Le border card lo usano già. CTA secondary
--cta-secondary #1f5b8f → #4a8fc4 (contrast preservato su bg scuro). --soft
#f3f2ea → #15181e. Le sezioni .pi-sec-soft restano distinte dal background principale. --band Resta
#14171c in entrambi i temi (design intenzionale). Isole stilistiche
Alcune aree del sito vivono con una palette autonoma perché il loro
contesto (conversazionale, admin) beneficia di un linguaggio visivo
diverso da quello editoriale. Non sono da allineare ai token
--pianeta-*. La palette è documentata in
src/styles/widgets.css (scoped a .alba-scope,
.side-pane-scope, .leads-board-scope).
Isola Palette e componenti
Alba Palette calda pastello con gradient blu → pesca (
#046BD2 → #FF6B33). Componenti: AlbaChat, AlbaFloater, AlbaProactivePopup, AlbaTakeover, AlbaConversation, AlbaSlotPicker. SidePane Palette neutra grigia (
#ffffff, #F9FAFB, #e2e8f0, #94a3b8, #1e293b). Componente: site/SidePane.vue. Admin LeadsBoard Palette blu con accento
#046BD2. Componente: admin/LeadsBoard.vue. Dark mode Non implementata per l'isola: i widget attualmente non rispondono a
data-theme="dark". Da gestire, se necessario, con override dedicati.