/Brand root@salento.dev:~/brand

Brand book // salento.dev

Salento.dev — Brand

La community di sviluppatori del Salento. Eventi dal vivo, persone vere, codice aperto. Qui trovi logo ufficiale, descrizioni, colori, font e regole per usarli: per chi fa parte della community, per i partner e per i soci.

Aggiornato: 25 ottobre 2026 commit ec4d248

Scarica il kit Logo pack Icone dei gruppi Sito (sito esterno) Repo (sito esterno)

01 // Chi siamo

The Night Console

L'idea che guida tutto il resto: il brand è una console accesa di notte.

north star

Il brand è un pannello di controllo acceso di notte. Un telaio nero punteggiato fa da banco; sopra, un unico pannello incorniciato da bordi a 1px ospita tutto il contenuto, diviso in moduli da linee sottili e piccoli triangoli di giunzione. Dentro il pannello la luce è una sola: il cyan, usato come spia accesa. Tutto il resto è grafite e nebbia.

Titoli grandi in Outfit, testo di lettura in Albert Sans e una fascia di etichette mono maiuscole e spaziate che leggono come telemetria (root@salento.dev, Upcoming: 3). Le staffe d'angolo sono la firma. Il sistema è esclusivamente scuro: non esiste una variante chiara e non va inventata.

  • Telaio nero a puntini + pannello con bordi 1px e giunzioni triangolari.
  • Un solo accento attivo nell'interfaccia (cyan); violet e fuchsia sono riserva.
  • Profondità solo tonale, nessuna ombra.
  • Angoli quasi vivi; pill solo per CTA, badge e stati.
  • Etichette mono maiuscole come voce «di sistema».
  • Staffe d'angolo come firma.
Nome
Salento.dev
Lingua
italiano
Canali
Sito · eventi, risorse, partner e link al gruppo WhatsApp
Instagram · @salento.dev
LinkedIn · company/salento-dev
WhatsApp Community · si entra dal sito: il link di invito non si pubblica altrove

Come si scrive il nome

  • Sì: Salento.dev nel testo: S maiuscola, punto, dev minuscolo.
  • Sì: salento.dev minuscolo solo come indirizzo (dominio, URL, handle).
  • Sì: Maiuscolo (SALENTO.DEV) solo dentro etichette di telemetria, dove tutto il testo è maiuscolo.
  • Sì: Il wordmark del logo si legge «Salento Dev»: è un elemento grafico e resta com'è. Non ricopiarlo nel testo, dove il nome è sempre Salento.dev.

Da evitare

  • No: Salento.Dev, SalentoDev, Salento Dev, Salento-dev, SALENTO DEV, salento.Dev
  • No: Tradurre o abbreviare il nome (es. «SD», «Salento Developers»).

02 // Copy ufficiali

Descrizioni ufficiali

Testi pronti da usare in pagine evento, comunicati, newsletter, post social e presentazioni partner. Clicca su «Copia» per copiarli.

dal media kit

Breve // One-liner

Salento.dev è una community tech del basso Salento dedicata a sviluppatori, professionisti digitali e appassionati di tecnologia.

Media // Boilerplate

Salento.dev connette sviluppatori, professionisti IT, aziende e appassionati di tecnologia attraverso meetup, workshop, talk, momenti informali di confronto e occasioni di networking sul territorio.

Lunga // Press / partner

Salento.dev promuove la cultura dello sviluppo software nel basso Salento, creando occasioni di incontro, formazione e collaborazione tra developer, studenti, aziende, founder e professionisti digitali.

04 // Colori

Grafite, nebbia e una spia

Valori dai token (tokens/tokens.json): colori del marchio dal media kit, neutri e ruoli dal design system del sito. Clicca su un valore per copiarlo.

25 colori con nome

Colori del marchio

I colori del logo ufficiale, dal media kit. Salento Cyan è il colore primario del brand: l'unica luce accesa, solo su fondi scuri (ADR-0014).

salento-cyan

Salento Cyan

contrasto 10.6:1 su scuro · 1.9:1 su bianco

Colore primario del brand e del logo (cyan-on-dark): la spia accesa. Solo su fondi scuri, mai su fondi chiari. Il sito usa ancora Signal Cyan (cyan-500) e migrerà a questo valore (ADR-0014).

salento-dark

Salento Dark

contrasto 1.2:1 su scuro · 16.7:1 su bianco

Inchiostro del logo su sfondi chiari (dark-on-light). Non è una superficie del sito: le superfici restano la scala mist.

white

White

contrasto 19.7:1 su scuro · 1:1 su bianco

Logo white-on-dark su sfondi scuri; sfondo dei WEBP chiari del logo pack.

black

Black

contrasto 1.1:1 su scuro · 21:1 su bianco

Sfondo dei WEBP scuri e delle anteprime del logo; sfondo dell'avatar.

Neutri

Grafite fredda appena tinta di blu (scala mist): telaio, pannelli, bordi e testo. Profondità solo per gradini tonali.

void-black

Void Black

black

Telaio della pagina dietro il pannello (nero + pattern a puntini) e corpo del terminale.

console-black

Console Black

surface (mist-950)

Sfondo del pannello principale, header, hero.

panel-graphite

Panel Graphite

surface-900

Card e moduli; sfondo dei bottoni utility.

control-graphite

Control Graphite

surface-800 = border

Input, tag, chip; colore di tutti i bordi a 1px e delle giunzioni triangolari.

raised-graphite

Raised Graphite

surface-700

Stato attivo dei bottoni, barra d'azione, ring delle miniature.

bracket-grey

Bracket Grey

surface-600

Staffe d'angolo a riposo, decorazioni.

muted-mist

Muted Mist

surface-400

Meta info, descrizioni di sezione, conteggi.

body-mist

Body Mist

surface-300

Testo corrente.

soft-mist

Soft Mist

surface-200

Colore base dei titoli, testo dei tag.

bright-mist

Bright Mist

surface-50

Titoli di sezione, testo enfatizzato, sfondo della CTA pill, logo.

pattern-sand

Pattern Sand

resources/images/dots-pattern-15.png

Puntini del pattern del telaio (5% di opacità, 15% per i puntini accesi). Unico neutro caldo: solo nel pattern.

Interfaccia del sito: cyan attuale

Signal Cyan (cyan-500) è il colore attuale dell'interfaccia del sito, da migrare a Salento Cyan. Le varianti Deep, Pale e Wash restano per hover e usi minori.

signal-cyan

Signal Cyan

primary (cyan-500)

Colore attuale dell'interfaccia del sito (primary = cyan-500), da migrare a Salento Cyan (ADR-0014). Ruolo: eyebrow, una parola nei titoli, link, icone, stato "prossimo evento", staffe in evidenza.

signal-cyan-deep

Signal Cyan Deep

primary-dark (cyan-700)

Hover dei link primary.

signal-cyan-pale

Signal Cyan Pale

primary-light (cyan-300)

Staffe della navbar. Usi minori, mai su grandi aree.

signal-cyan-wash

Signal Cyan Wash

cyan-50

Cerchio icona della CTA. Usi minori, mai su grandi aree.

Riserva

Token presenti ma non attivi nell'interfaccia: servono una decisione esplicita (Reserve Rule).

reserve-violet

Reserve Violet

secondary (violet-500)

Riserva: non è una voce attiva dell'interfaccia (oggi solo l'hover di "Clear" nella ricerca).

reserve-fuchsia

Reserve Fuchsia

tertiary (fuchsia-500)

Riserva: inutilizzato nell'interfaccia.

Funzionali

Prestiti da marchi e stati, non accenti di marca (Brand-Borrow Rule).

whatsapp-green

WhatsApp Green

green-400/500

Prestito funzionale: solo canale WhatsApp e stato "in corso". Mai decorazione.

wip-amber

WIP Amber

amber-500

Prestito funzionale: solo eventi in pianificazione (al 20%, testo amber-200). Mai decorazione.

Grafiche della community

Solo dentro le icone dei gruppi WhatsApp: un accento per gruppo permanente, la pietra per i temporanei. Sfondo mist-900, luce mist-50.

Accento cyan

@include

Volumi in luce e doodle (cyan.400) + ombre piatte (cyan.700).

Accento violet

Tavola Rotonda

Volumi in luce e doodle (violet.400) + ombre piatte (violet.700).

Accento fuchsia

Dev Break

Volumi in luce e doodle (fuchsia.400) + ombre piatte (fuchsia.700).

Accento emerald

AI Corner

Volumi in luce e doodle (emerald.400) + ombre piatte (emerald.700).

Accento lime

Mercatino

Volumi in luce e doodle (lime.500) + ombre piatte (lime.700).

Pietra

gruppi temporanei

Pietra leccese: accento fisso dei gruppi temporanei nelle grafiche della community. Non è l'ambra WIP (ADR-0003, ADR-0012).

Due ambiti, una palette

Le regole del sito e le icone dei gruppi non sono in conflitto: valgono in ambiti diversi (ADR-0012).

Interfaccia
Sito, questa pagina e ogni superficie «da schermo» (slide, banner, materiali con testo e layout). Vale la palette del sito: neutri + Salento Cyan come unico accento (il sito usa ancora Signal Cyan e migrerà: ADR-0014); riserva e prestiti funzionali solo come da regole.
Grafiche della community
Illustrazioni generate da questo repo per i canali della community: oggi le icone dei gruppi WhatsApp. Ogni gruppo permanente ha un accento (fuchsia, violet, cyan, emerald, lime) e i temporanei la pietra: è la decisione esplicita richiesta dalla Reserve Rule (ADR-0008). Gli accenti restano dentro le icone.
Quali colori si usano in ciascun ambito
ColoreInterfacciaGrafiche della community
Neutri (mist, Void Black)sì telaio, pannelli, testosì sfondo mist-900, luce mist-50
Salento Cyan (sul sito oggi Signal Cyan)sì unico accento attivo, solo su scurosì come accento di un gruppo (cyan-400, ADR-0008)
Salento Dark, White, Blacksì logo e marchiono (il logo stampato è in colore sfondo)
Violet, fuchsiano riserva, serve un ADRsì accenti di gruppo (ADR-0008)
Emerald, limenosì accenti di gruppo (ADR-0008)
Pietranosì solo gruppi temporanei
WhatsApp Green, WIP Ambersì solo WhatsApp/live e WIPno

Named rules

  • The One Signal RuleInterfaccia

    Salento Cyan (#20D0ED) è l'unica luce accesa. Va su etichette, link, stati e una parola per titolo, mai su sfondi pieni di grandi superfici né su fondi chiari. Se una schermata ha più di una manciata di elementi cyan, uno è di troppo. Il sito usa ancora Signal Cyan (cyan-500): la migrazione è in ADR-0014.

  • The Reserve RuleInterfaccia

    Violet e fuchsia esistono come token ma non sono voci attive dell'interfaccia. Non introdurli senza una decisione esplicita (un ADR). Gli accenti dei gruppi WhatsApp sono una di queste decisioni (ADR-0008) e valgono solo dentro le icone dei gruppi.

  • The Brand-Borrow RuleInterfaccia

    Verde e ambra sono prestiti funzionali, non accenti di marca: WhatsApp Green solo per il canale WhatsApp e lo stato «in corso», WIP Amber solo per gli eventi in pianificazione. Mai come decorazione.

  • The Legacy Amber RuleInterfaccia

    Glow, gradienti e ombre ambra/arancio sono residui di una palette precedente. Non usarli.

  • The Pietra RuleGrafiche della community

    La pietra (#E2B45A, pietra leccese) è il colore dei gruppi temporanei nelle grafiche della community. Non è l'ambra WIP e non è un segnale di avviso: non usarla nell'interfaccia al posto dell'ambra, né l'ambra nelle icone al posto della pietra.

  • The Group Accent RuleGrafiche della community

    Un accento per gruppo permanente, scelto tra quelli nei token (group.accents); i temporanei sono sempre pietra. Niente colori liberi: un nuovo accento passa da token, schema e controllo di contrasto.

05 // Tipografia

Tre famiglie, una voce

Outfit per i titoli, Albert Sans per leggere, Roboto Mono per la voce «di sistema». Font open source (OFL 1.1), serviti da questa pagina.

outfit / albert sans / roboto mono

Outfit

Titoli: display, headline, title. Geometrico e compatto.

pesi: 400 · 500 · 700 · 900

Scarica da Google Fonts (sito esterno)

Albert Sans

Testo di lettura, lead, eyebrow. Morbido e leggibile.

pesi: 300 · 400 · 600

Scarica da Google Fonts (sito esterno)

Gerarchia

Gerarchia tipografica: stile, specifiche ed esempio
StileEsempio
Display
Outfit · 700 · 3rem → 4.5rem / 1.1 · -0.025em
Hero della home, con la prima riga in cyan.

Codice e caffè
nel Salento
Display Page
Outfit · 900 · 3rem → 4.5rem / 1.25 · -0.05em · maiuscolo
Hero delle pagine interne, maiuscolo, una parola in cyan.

Eventi live
Headline
Outfit · 700 · 2.25rem → 3rem / 1
Titolo degli header di sezione (variante small 1.5rem → 1.875rem).

Prossimi incontri
Title
Outfit · 700 · 1.125rem / 1.5
Titoli di card e liste (500–700).

Meetup #7 · Lightning talk a Lecce
Body
Albert Sans · 400 · 1rem / 1.5
Testo corrente in Body Mist; estratti delle card a 0.875rem.

Ogni mese un incontro in un comune diverso del Salento: talk brevi, codice dal vivo e tempo per conoscersi.
Body Lead
Albert Sans · 400 · 1.125rem / 1.625
Descrizioni hero (300–400), larghezza massima ~42rem.

Una community di sviluppatori che si ritrova dal vivo, condivide quello che impara e costruisce strumenti aperti.
Eyebrow
Albert Sans · 600 · 0.75rem / 1.5 · 0.05em · maiuscolo
Sopra i titoli di sezione, sempre in cyan.

Prossimi eventi
Telemetry
Roboto Mono · 400 · 0.625rem / 1 · 0.1em · maiuscolo
Etichette di sistema: stati, conteggi, percorsi, categorie.

Upcoming: 3 // root@salento.dev

Named rules

  • The Telemetry Voice RuleTutti gli ambiti

    Le etichette di sistema (stati, conteggi, percorsi, categorie) sono mono maiuscolo spaziato a 0.625rem. Il testo che si legge davvero non è mai mono.

  • The One Mono RuleTutti gli ambiti

    Roboto Mono è l'unico monospace. Non introdurne altri.

06 // Forme e layout

Angoli vivi, niente ombre

Gli elementi firma del sistema, costruiti qui con gli stessi token.

radius 0.125rem
xssmfull
Raggi. 0.125rem di default (card, input, tag, bottoni); 0.25rem raro; pill solo per CTA, badge e stati.
Void BlackConsole BlackPanel GraphiteControl GraphiteRaised Graphite
Profondità tonale. Si sale di un gradino grafite o si aggiunge un bordo 1px Control Graphite. Mai box-shadow.
hover / focusStaffe d'angolo
Staffe d'angolo. L 11×11, tratto 1px arrotondato. Bracket Grey a riposo, cyan in evidenza; all'hover si allargano.
Upcoming In corso WIP Passato Upcoming: 3 Workshop
Etichette di telemetria. Roboto Mono 0.625rem, maiuscolo, tracking 0.1em. Verde e ambra solo come stati.
pannello
Telaio a puntini. Nero puro con puntini chiari a bassa opacità; sopra, il pannello Console Black con bordi 1px.
Giunzioni triangolari. Triangoli di 5px in Control Graphite alle estremità dei bordi tra i moduli.

Spaziature con nome

bracket · 0.625rem
card · 1.25rem
control · 2.5rem
page-x · 4rem
section · 5rem

Pannello largo al massimo 87.5rem; moduli separati da bordi 1px; padding orizzontale 1.5rem → 2rem → 4rem; sezioni a 5rem l'una dall'altra; griglie di card in auto-fill da 20rem.

Named rules

  • The Tonal Step RuleInterfaccia

    Un elemento che deve «salire» passa al gradino grafite successivo o prende un bordo 1px. Mai un box-shadow.

  • The Hover Tint RuleInterfaccia

    L'hover di una superficie si esprime con un velo cyan al 5% o un gradino tonale, non con elevazione.

07 // Grafiche della community

Icone dei gruppi

Le icone della WhatsApp Community sono generate da questo repo: un file YAML per gruppo, stesse regole per tutti.

6 gruppi attivi

Tutte le icone e i download

01 // sfondo

Mist-900 pieno

640×640, WhatsApp lo ritaglia a cerchio. Nessun testo: il nome è già accanto all'icona.

02 // wallpaper

Doodle a schizzo

Disegni del tema del gruppo, in accento al 50%, sparsi su tutta l'icona. Disposizione riproducibile.

03 // soggetto

Flat, al centro

Un'illustrazione a forme piene (accento, accento scuro, mist-50) entro il cerchio sicuro, ~69% del diametro.

04 // logo

Stampato sopra

Le barre del logo sono stampate sul soggetto in colore sfondo: tazza, tavolo, petto del robot.

Colori: un accento per gruppo permanente, pietra per i temporanei (vedi palette). Guide complete: Icona di gruppo · Soggetti · Doodle e wallpaper · Aggiungere un gruppo.

08 // Do's and don'ts

Da fare, da evitare

Raggruppati per ambito. Per il logo vedi la sezione dedicata.

ambiti: interfaccia / community

Interfaccia

Da fare

  • Sì: Tenere tutto dentro il pannello bordato; nuove sezioni sono moduli separati da bordi 1px.
  • Sì: Usare il cyan per una parola per titolo, eyebrow, link e stati attivi, e basta.
  • Sì: Dare profondità con gradini grafite (950 → 900 → 800 → 700) e bordi in Control Graphite.
  • Sì: Usare angoli 0.125rem di default e pill solo per CTA, badge e stati.
  • Sì: Scrivere le etichette di sistema in mono maiuscolo 0.625rem spaziato.
  • Sì: Usare le staffe d'angolo come cornice e segnale d'hover delle superfici cliccabili.
  • Sì: Animare con transizioni brevi (0.2–0.5s) innescate da hover o focus.

Da evitare

  • No: Introdurre un tema chiaro o superfici chiare estese (la CTA pill è l'unica eccezione).
  • No: Usare box-shadow, alone o glow.
  • No: Usare gradienti ambra o testo «luminoso» nei titoli.
  • No: Attivare violet o fuchsia come accenti senza una decisione esplicita.
  • No: Usare verde o ambra fuori da WhatsApp/live e WIP.
  • No: Usare raggi grandi (0.375rem e oltre) su card e contenitori.
  • No: Scrivere colori a mano invece dei token.

Grafiche della community

Da fare

  • Sì: Un soggetto unico, riconoscibile a 48px, con il logo stampato sopra in colore sfondo.
  • Sì: Forme piene, raggi coerenti, ombra piatta a destra.
  • Sì: Un accento per gruppo permanente; pietra per i temporanei.
  • Sì: Doodle legati al tema del gruppo (4–6), in accento al 50%.
  • Sì: Controllare le icone a 96 e 48px e nella lista chat simulata.

Da evitare

  • No: Testo o nome del gruppo sull'icona.
  • No: Scene con tanti oggetti piccoli, contorni sottili, sfumature.
  • No: Colori fuori dai token o accenti dei gruppi fuori dalle icone.
  • No: Link di invito WhatsApp o dati personali nel repo e nelle grafiche.

09 // Kit per partner e soci

Usare il nome e il logo

Per community partner, sponsor, sedi che ospitano eventi e soci che preparano materiali con il nostro nome. Logo e nome sono riservati: per usarli serve la nostra autorizzazione (scrivici). Le indicazioni sul co-branding sono una proposta: in caso di dubbio scrivici prima di pubblicare.

proposta

Citare Salento.dev

  • Sì: Scrivi Salento.dev (vedi «Come si scrive il nome»); per il link usa https://salento.dev.
  • Sì: Citazione breve: «in collaborazione con Salento.dev» oppure «community partner: Salento.dev».
  • Sì: Per le grafiche riusate: «Grafiche di Salento.dev (https://salento.dev), CC BY 4.0».

Regole di scrittura: come si scrive il nome.

Co-branding proposta

  • Sì: Usa il logo orizzontale del logo pack, affiancato a quelli dei partner con la stessa altezza visiva e almeno due moduli del pittogramma di distanza.
  • Sì: Su fondo chiaro usa dark-on-light; su fondo scuro white-on-dark (o cyan-on-dark).
  • Sì: Non ricolorare il logo nei colori del partner e non fonderlo con altri marchi.
  • Sì: Non far intendere approvazione, sponsorizzazione o organizzazione da parte di Salento.dev se non concordata.
  • Sì: Per eventi organizzati insieme, mandaci la bozza prima della stampa o della pubblicazione.

Diritti e licenza

  • Sì: Logo, wordmark e nome «Salento.dev»: tutti i diritti riservati; ogni uso richiede l'autorizzazione preventiva e il rispetto delle linee guida (vedi «Diritti» nella sezione Logo).
  • Sì: Altri asset grafici (soggetti, doodle, icone dei gruppi, token, testi del brand book): CC BY 4.0, con attribuzione.
  • Sì: Icone dei gruppi: si possono usare per i gruppi e la comunicazione di Salento.dev; il logo stampato al loro interno resta riservato.
  • Sì: Codice del repo: MIT.
  • Sì: Font: Outfit, Albert Sans e Roboto Mono sono sotto SIL Open Font License 1.1.

Attribuzione per gli asset CC BY 4.0: «Grafiche di Salento.dev (https://salento.dev), CC BY 4.0». Testi completi: diritti sul logo · LICENSE-ASSETS.md.

contatti

salento.dev@gmail.com

Per co-branding, eventi insieme e richieste di materiali. Canali: Sito · Instagram · LinkedIn · WhatsApp Community.

10 // Download

Il kit completo

Un archivio con il logo pack ufficiale, l'avatar, le icone dei gruppi, i token e un LEGGIMI con le regole essenziali e la licenza. Generato a ogni aggiornamento. I singoli file del logo sono nella sezione Logo.

zip · 1.7 MB

salento-dev-brand-kit/ · 86 file

LEGGIMI.txt
avatar/  (3 file)
icone-gruppi/  (6 file)
logo-pack/  (2 file)
logo-pack/logos/  (72 file)
token/  (2 file)
Scarica brand-kit.zip Solo il logo pack
File singoli
FileUsoFormati
Logo pack ufficiale4 famiglie × 3 varianti, SVG/PNG/WEBP, con e senza paddingZIP · 1.3 MB
Avatarprofili social, chat e favicon: pittogramma ufficiale su neroSVG PNG 512 PNG 1024
Tokencolori, font, raggi, spaziaturetokens.json tokens.css