BRAND REFERENCE v2.0

Passione Bridge

Guida visuale di riferimento per agenti AI e sviluppatori.
Colori, tipografia, componenti e asset ufficiali del brand.

01

Palette Colori

I colori ufficiali del brand, estratti direttamente dagli asset del logo. Il colore primario è il charcoal #282828 (P del monogramma) con accento rosso #C41200 (B del monogramma).

Brand Primary

#282828
Charcoal
--pb-charcoal
#C41200
Red
--pb-red
#9E0F00
Red Dark
--pb-red-dark
#E8301A
Red Light
--pb-red-light
#FFF0EE
Red Subtle
--pb-red-subtle

Charcoal Scale

#1A1A1A
Black
--pb-black
#3D3D3D
Charcoal Light
--pb-charcoal-light
#555555
Charcoal Medium
--pb-charcoal-medium
#8A8A8A
Warm Gray
--pb-warm-gray

Neutrals

#666666
Medium Gray
--pb-medium-gray
#E0E0E0
Light Gray
--pb-light-gray
#F0F0F0
Lighter Gray
--pb-lighter-gray
#F8F8F8
Off White
--pb-off-white

Semantic

#2E7D32
Success
--pb-success
#F57F17
Warning
--pb-warning
#C41200
Error
--pb-error (= red)
#1565C0
Info
--pb-info
02

Logo System

Il monogramma PB interlacciato: la P in charcoal e la B in rosso. Varianti per sfondo chiaro, scuro e accento rosso.

Logo Orizzontale

Logo Color
Logo-orizzontale-Color.png
Uso primario — sfondo chiaro
Logo White+Red
Logo-orizzontale-white+red.png
Sfondo scuro — bianco + rosso
Logo White
Logo-orizzontale-white.png
Sfondo scuro — monocolore bianco

Logo Verticale

Logo V Color
Logo-verticale---Color.png
Spazi quadrati — sfondo chiaro
Logo V W+R
Logo-verticale-white+red.png
Spazi quadrati — sfondo scuro
Logo V White
Logo-verticale-white.png
Spazi quadrati — monocolore

Favicon & Monogramma

Favicon Color
Favicon-color.png
Favicon, icone, avatar
Favicon W+R
Favicon-white+red.png
Favicon su sfondo scuro
Monogramma
PB logo monogramma.png
Editoriale / ludico

Profilo & Social

Profilo
Immagine-profilo.jpg
Profili social — 900×900
Favicon profilo
Favicon-immagine-profilo-400x400.jpg
Avatar piccolo — 400×400

Sub-Brand

PB News
PB News.png
Sezione news / editoriale
PassionePoints
PassionePoints.png
Sistema crediti virtuali
PP W+R
PassionePoints W e R.png
PassionePoints su sfondo scuro
Powered by PB
powered by PB.png
Badge partner — sfondo chiaro
Powered by PB White
powered by PB white.png
Badge partner — sfondo scuro
PP Ideogramma
PassionePoints ideogramma.png
Solo icona cuore PB
03

Tipografia

Gerarchia tipografica del brand. Montserrat per headings, Open Sans per body, Comfortaa per stile display logo-like, Playfair Display per accenti editoriali.

Heading Montserrat 700 3.5rem
La piazza virtuale del Bridge
H2 Montserrat 700 2.5rem
Chi siamo & Iniziative
H3 Montserrat 600 2rem
Per i Giocatori, Docenti e Curiosi
Body Open Sans 400 1rem / 1.6
Passione Bridge nasce dall'idea di un gruppo di professionisti che, pur vivendo in diverse e distanti zone in Italia, sono entrati in contatto grazie al bridge ed hanno deciso di dare il proprio contributo allo sviluppo di questa fantastica disciplina.
Display Comfortaa 700 Simile al logotipo
PASSIONE BRIDGE
Editorial Playfair Display 400i Citazioni, accenti
"Sosteniamo l'innovazione rimanendo nel solco della tradizione."
Mono JetBrains Mono 400 Code, bidding, dati
♠ AKQ85   ♥ J74   ♦ A9   ♣ K32
04

Componenti UI

Buttons

Badges

Novità Evento Online Coming Soon

Cards

Giocatori
Perfeziona la tua tecnica

Scopri su Passione Bridge come migliorare, quale che sia il tuo livello.

Associazioni
Supporta le tue idee

Conta su un network che saprà aiutarti a far crescere la tua associazione.

Coming Soon
Skills Calculator

Testa le tue competenze brigistiche e seguine le evoluzioni nel tempo.

Form Inputs

05

Componenti Bridge

Componenti specializzati per la visualizzazione di mani, bidding e dati bridge. I semi rossi (♥♦) coincidono con il rosso brand.

Mano di Bridge

♠ A K Q 8 5
♥ J 7 4
♦ A 9
♣ K 3 2

Bidding Table

NordEstSudOvest
——1♠Passo
2♦Passo2♥Passo
4♠PassoPassoPasso

Semi — Colori

♠
#282828
♥
#C41200
♦
#C41200
♣
#282828
06

Sezione Scura — Demo

Esempio di sezione con sfondo charcoal. Usata per hero, footer e sezioni di impatto. Testo bianco, link e CTA in rosso chiaro.

Hero Red — Variante

Usata per call-to-action di forte impatto. Il rosso brand domina lo sfondo.

07

Regole per Agenti AI

MAI usare
  • Verde, blu o viola come colore primario
  • Font generici (Arial, Inter, Roboto)
  • Logo color su sfondo scuro
  • Gradiente viola o schemi AI-generici
  • Stock photo non pertinenti al bridge
SEMPRE usare
  • Charcoal #282828 + Rosso #C41200
  • Montserrat per heading, Open Sans per body
  • CTA e link in rosso brand
  • Footer su sfondo charcoal
  • CSS variables definite nel brand CSS
Tono di voce
  • Professionale ma accessibile
  • Appassionato e inclusivo
  • Italiano come lingua default
  • Orientato alla community
  • Mai freddo o corporate