Linee guida del brand GitHub 2026 - Sistema completo di identità visiva che copre attributi del brand, loghi, sub-branding, co-branding, illustrazioni, colori, mascotte, icone, diagrammi, tipografia, layout e design esperienziale
Navigazione Rapida
Tag
Condividi le slide
Linee guida del brand GitHub 2026 - Sistema completo di identità visiva che copre attributi del brand, loghi, sub-branding, co-branding, illustrazioni, colori, mascotte, icone, diagrammi, tipografia, layout e design esperienziale
Vista dettagliata di ogni pagina di slide, inclusi layout, contenuto chiave ed elementi visivi.
Copertina con logo GitHub, titolo delle Linee guida del brand 2026, cubi isometrici 3D verdi con icone di prodotto e la mascotte Mona
Sfondo con gradiente chiaro con grande tipografia nera a sinistra, illustrazione 3D a destra
Quattro sezioni: Brand Visual Strategy, Visuals and Illustration, Graphic Devices, Events and Experiential
Sfondo scuro con quattro quadranti separati da linee verdi
Titolo della sezione: Brand Attributes
Sfondo completamente scuro con grande testo bianco in basso a sinistra
Cinque attributi del brand con icone: Nerdy, Confident, Authentic, Imaginative, Empathetic
Diviso: testo introduttivo a sinistra, cinque righe di attributi a destra su sfondo scuro
Come si applicano gli attributi: GitHub Universe, Copilot, Shop, contesti Enterprise
Quattro schede fotografiche con tag e descrizioni degli attributi
Attributo Nerdy: appassionato, ingegnerizzato, tecnico con esempi
Definizione dell'attributo in alto a sinistra, quattro esempi fotografici che coprono l'intera larghezza
Copy: preciso, tecnico. Design: monospace, griglie. Experiences: contenuti approfonditi, workshop
Diviso: introduzione all'attributo a sinistra, tre sezioni di linee guida a destra
Attributo Confident: ambizioso, affidabile, intelligente con esempi
Definizione dell'attributo in alto a sinistra, cinque esempi di foto/illustrazioni
Copy: chiaro, autorevole. Design: colorato, sorprendente. Experiences: mantenere le promesse
Diviso: introduzione all'attributo a sinistra, tre sezioni di linee guida a destra
Attributo Authentic: affidabile, vibrante, luminoso con esempi
Definizione dell'attributo in alto a sinistra, cinque esempi fotografici
Testo: colloquiale, semplice. Design: pulito, espressivo. Esperienze: incoraggiare l'interazione
Diviso: introduzione dell'attributo a sinistra, tre sezioni di linee guida a destra
Attributo fantasioso: giocoso, trasformativo, adattabile con esempi
Definizione dell'attributo in alto a sinistra, tre grandi foto
Testo: ambizioso. Design: rompere le convenzioni. Esperienze: trasformare gli spazi
Diviso: introduzione dell'attributo a sinistra, tre sezioni di linee guida a destra
Attributo empatico: accessibile, interconnesso, pragmatico con esempi
Definizione dell'attributo in alto a sinistra, foto e campioni di colore
Testo: accessibilità al primo posto. Design: contrasto, contesto. Esperienze: segnaletica chiara, relatori diversi
Diviso: introduzione dell'attributo a sinistra, tre sezioni di linee guida a destra
Titolo della sezione: Logo
Sfondo completamente scuro con testo bianco grande in basso a sinistra, PG 15
Il logo primario è l'Invertocat (Mona the Octocat). Regole dello spazio libero del 25%
Diviso: descrizione a sinistra con diagramma della spaziatura, grande marchio Invertocat a destra
Logo GitHub completo (Invertocat + wordmark) per uso esterno. Spazio libero del 50% dell'altezza
Descrizione a sinistra, grande blocco wordmark GitHub al centro
Posizionamento del logo: prominente ma non predominante. Logotipo completo, solo Invertocat, posizionamento nell'angolo
Tre esempi di posizionamento con sovrapposizioni di griglia
Varianti di colore del logo tra temi Chiaro, Grigio Chiaro, Scuro con colori primari/secondari/accento
Griglia a tre righe che mostra nove varianti di colore del logo
Cosa non fare: ritagliare, sovrapporre, logo colorato, proporzioni alterate, effetti, rotazione
Sei esempi proibiti con icone di divieto rosse
Utilizzo del tagline: standalone e con lockup Invertocat. Solo posizionamento strategico
Descrizione a sinistra, molteplici varianti di layout del tagline a destra
Titolo della sezione: Sub-branding
Sfondo completamente scuro con testo bianco grande in basso a sinistra, PG 23
Gerarchia del marchio: logotipo GitHub (predefinito), lockup del sub-brand, icone di prodotto per in-platform
Descrizione a sinistra, marchio, lockup (Advanced Security, Copilot, Actions), griglia di icone di prodotto a destra
Flessibilità del lockup: solo Invertocat, lockup del sub-brand, lockup espanso in base al contesto
Confronto a tre colonne con esempi di UI del prodotto
Gerarchia concentrica: GitHub Core, Sub-Brands, Events. Tutte le varianti di lockup del prodotto mostrate
Diagramma di Venn a sinistra, sistema di lockup a quattro colonne a destra
Lockup del sub-brand (Mona Sans Display Medium) e varianti di lockup estese per tutti i prodotti
Layout a due livelli che mostra i lockup per Security, Copilot, Spark, Enterprise, Actions, Issues
Albero decisionale: evento? prodotto all'interno di GitHub? Copilot/Security standalone? marketing del prodotto?
Diagramma di flusso verticale con rami SÌ/NO
Hero section di Copilot con cubi verdi isometrici 3D e la mascot di Copilot
Titolo grande di Copilot con illustrazione isometrica 3D a tutta larghezza, PG 30
Copilot Purple (#8534F3), lockup del prodotto, varianti dell'icona, illustrazione della mascot 3D
Descrizione e campione di colore a sinistra, lockup/icona/illustrazione a destra, PG 32
Texture viola con dithering, fallback del tema principale, rapporto di colore 80/10/5/5
Layout multi-esempio che mostra dithering, tema principale, approcci senza branding, PG 33
Stabile ambientale (dither + screenshot) vs forte (illustrazioni di key art) per i lanci
Confronto affiancato, PG 34
Sezione Sicurezza con cubi verdi isometrici 3D, icona scudo blu
Titolo grande Sicurezza con illustrazione 3D, PG 35
Blu Sicurezza (#3094FF), product lockup, varianti dell'icona scudo, illustrazione 3D
Descrizione e campione blu a sinistra, lockup/icona/illustrazione a destra, PG 37
Texture blu con dithering, fallback del tema principale, esempi di UI di scansione del codice
Multi-esempio che mostra dithering blu e approcci senza branding, PG 38
Titolo sezione: Co-branding
Sfondo scuro completo con testo bianco grande, PG 39
Predefinito (icone + separatore), impilati, lockup orizzontali. Dimensione ottica uguale
Tre varianti di lockup con loghi Microsoft + GitHub, PG 40
Cosa non fare: lockup di estensione, sovrapposizione, sub-branding, mascotte, impilamento, logo Universe
Sei esempi proibiti con icone rosse, PG 41
Sei FAQ sul co-branding: social media, linguaggio di partnership, presentazioni, nomi di prodotti, landing page, gadget
Formato elenco di domande e risposte, PG 42
Titolo sezione: Illustrazione
Sfondo scuro completo con testo bianco grande, PG 43
Tre stili: Illustrazioni chiave (3D), Grafico di contributo (astrazione creativa), Texture (bitmap)
Tre colonne uguali con esempi, PG 44
Dettagliato, 3D, isometrico. Metti in risalto il grafico di contributo con icone di prodotto, dithering, mascotte
Descrizione a sinistra, grande illustrazione 3D a destra, PG 45
Composizioni flessibili con Mona, Duckie, cubi verdi in diverse disposizioni
Griglia di sei varianti di illustrazione, PG 46
Trasforma l'UI del grafico di contributo in visual brand. Quadrati verdi/grigi/rosa, mascotte
Illustrazione completa con annotazioni, PG 47
Cosa non fare: isolare, usare come sfondo, sovradimensionare, mescolare con dither. Cosa fare: animare, stampare
Sei esempi di utilizzo con segni di spunta/divieti, PG 48
Texture dithering più semplici per sfondi e motivi di superficie
Descrizione a sinistra, due esempi di applicazione a destra, PG 49
Sei pattern di dithering: Cerchio, Heatmap, Gradiente, Mezzo Cerchio, Onda, Ovale
Sei esempi di texture in griglia 2x3, PG 50
Texture a due tonalità: coppie triadiche/complementari audaci più opzioni monocromatiche
Righe audaci a due tonalità in alto, colonne monocromatiche in basso, PG 51
Titolo della sezione: Colore
Sfondo scuro completo con testo bianco grande, PG 52
Brand neutro con accenti verdi. Primario (neutri + verde), secondario (6 famiglie di colori)
Descrizione a sinistra, tavolozza primaria al centro, griglia secondaria a destra, PG 53
HEX/RGB/CMYK/Spot per Bianco, Nero, Grigio 0-9, Verde 1-6. 90% neutro, 10% verde
Griglia completa di campioni di colore con specifiche, PG 54
Palette di temi: DevX (verde+rosa), Copilot (viola), Security (blu+arancione+lime)
Ampia griglia di colori con specifiche complete, PG 55
Tre temi: Bianco, Grigio Chiaro, Nero. Testo su neutri; colore per icone/illustrazioni
Tre esempi di agenti di codifica Copilot su sfondi diversi, PG 56
Tutto il testo è conforme a WCAG AA. Il testo Primario, Secondario e Accent passano AA su tutti gli sfondi
Tre pannelli di accessibilità con conformità AA, PG 57
Titolo della sezione: Mascotte
Sfondo completamente scuro con testo bianco grande, PG 58
Tre mascotte: Mona (GitHub), Copilot (AI/innovazione), Ducky (sviluppatori)
Tre colonne con rendering 3D delle mascotte, PG 59
Ambasciatore principale del brand. Palette viola/rosa. Cinque viste angolari
Descrizione a sinistra, cinque rendering 3D a destra, PG 60
AI Pair Programmer. Viola/blu con rosa. Cinque viste angolari
Descrizione a sinistra, cinque rendering 3D a destra, PG 61
Saluto di debug con la papera di gomma. Usato meno frequentemente. Cinque viste angolari
Descrizione a sinistra, cinque rendering 3D a destra, PG 62
Fare: community, internamente, ispirare. Non fare: come loghi, spingere/vendere, argomenti seri
Griglia fare/non fare a tre righe, PG 63
Deprecato: Octocat 1.0, Octocat 2.0, Monamoji, stile Outline
Griglia a quattro quadranti con icone di divieto, PG 64
Titolo sezione: Icone
Sfondo completamente scuro con testo bianco grande, PG 65
Octicons (24px) predefinito. Spot Octicons (60px) icone di marketing più grandi da forme gitline
Griglia Octicons in basso a sinistra, griglia Spot Octicons a destra, PG 66
Octicons 16-30px, zona morta 31-54px, icone Marketing 55-96px, illustrazioni 128px+
Quattro livelli di dimensione con esempi, PG 67
Set completo di 60+ Spot Octicons costruito da forme gitline (timeline + cerchio di commit)
Griglia completa della galleria di icone, PG 68
Varianti di icone per temi scuri, bianchi, verde chiaro, grigio chiaro più versioni flat
Confronto di temi a quattro colonne, PG 69
Costruire composizioni con icone: fondare l'argomento, aggiungere colori del sub-brand
Descrizione a sinistra, due esempi di schede blog a destra, PG 70
Titolo sezione: Diagrammi
Sfondo completamente scuro con testo bianco grande, PG 71
Accurato, informativo. Ogni linea e scelta di colore conta. Grafici a barre, diagrammi a dispersione, griglie partner
Descrizione a sinistra, tre esempi di grafici a destra, PG 72
Icone spot + testo per affermazioni non comparative. A tema viola per Copilot. Bordo con accento verde
Tre schede statistiche con annotazioni, PG 73
Titolo della sezione: Tipografia
Sfondo completamente scuro con testo bianco grande, PG 74
Primario: Mona Sans (Regular + Medium). Complementare: Mona Sans Mono per codice/stile
Descrizione a sinistra, esempi di alfabeto in basso, PG 75
Asse OPSZ V2.08+. H0 Display 110/110, Body Large 17/26, Pullquote Mono 58/68
Esempi di scala tipografica con specifiche di dimensione/peso, PG 76
Gerarchia da H0 a H6 (da 160px a 19px). Display Regular per dimensioni maggiori, Medium per dimensioni minori
Gerarchia completa dei titoli da H0 a H6 con grafico a barre, PG 77
Body da XL a Footnote. Blockquote Mono 58/68. Stili Caption, Eyebrow, Footnote
Griglia completa di esempi di testo del corpo, PG 78
Abbinamenti: Eyebrow+Headline, Medium+Medium, Eyebrow giustificato, Headline+Body
Sei esempi di abbinamento di tipi di carattere, PG 79
Da evitare: altri stili di larghezza, mono maiuscolo multiline, legature, tracking manuale
Quattro esempi proibiti con confronti, PG 80
Titolo della sezione: Layout
Sfondo completamente scuro con testo bianco grande, PG 81
Rigorosa aderenza alla griglia. Griglie/margini (rosso), proporzioni (1/3, 1/2, 2/3), bordo di accento
Sovrapposizione della griglia sull'esempio di Copilot con annotazioni, PG 82
Bordo predefinito 2px, sottile 2px, accento 4px verde. Un accento per composizione
Tessera partecipante Universe con sovrapposizione della griglia, PG 83
Il contenuto fluttua verso i bordi, grande spazio vuoto al centro. Footer/header dall'aspetto coerente e tecnico
Due esempi di layout con annotazioni di allineamento, PG 84
Cosa evitare: combinazioni di colori nei titoli, contenuto troppo vicino ai bordi
Due esempi proibiti con confronti, PG 85
Titolo della sezione: Esperienziale
Sfondo completamente scuro con testo bianco grande, PG 86
Sei principi: Brand forward, Material honesty, Interactive, Comfortable, Modular, Visionary
Testo introduttivo in alto, sei card dei principi in griglia 2x3, PG 87
Cosa fare: materiali in legno/metallo, dettagli 3D, LED. Cosa evitare: vinile piatto, arredamento generico. Richiesto un momento 'hero'
Elenco Cosa fare/Cosa evitare a sinistra, nove foto di stand a destra, PG 88
Ogni stand ha bisogno di almeno un elemento interattivo: gonfiabili, adesivi, giochi, demo
Descrizione a sinistra, sei foto di stand interattivi a destra, PG 89
Illuminazione ambientale tonale per la separazione visiva. La temperatura del colore definisce l'atmosfera
Descrizione a sinistra, quattro foto di illuminazione a destra, PG 90
Tre livelli: Lightweight Presence, Mid-Tier Booth, Custom High-Impact
Tre colonne di livelli con foto e descrizioni, PG 91
Contatti: brand.github.com toolkit, brand-marketing-design@github.com
Sfondo scuro con dettagli di contatto, PG 92
Domande comuni su questa slide e il contenuto della presentazione sottostante.
Si tratta di un sistema completo di identità del brand di 89 pagine che copre tutti gli aspetti dell'identità visiva di GitHub per il 2026. È organizzato in quattro sezioni principali: Strategia visiva del brand (attributi del brand, loghi, sub-branding, co-branding), Elementi visivi e illustrazione (sistema di illustrazione, colori, mascotte), Dispositivi grafici (icone, diagrammi, tipografia, layout) ed Eventi ed esperienziale (progettazione di stand, costruzione, installazioni interattive, illuminazione).
GitHub definisce cinque attributi del brand: 1) Nerdy (appassionato di codice, ingegnerizzato, tecnico), 2) Confident (ambizioso, affidabile, intelligente), 3) Authentic (fedele a se stesso e alla comunità), 4) Imaginative (giocoso, trasformativo, adattabile), 5) Empathetic (accessibile, interconnesso, pragmatico). Ognuno include linee guida per Copy, Design ed Experiences.
GitHub utilizza un design system dark-first con la famiglia di caratteri Mona Sans (sans-serif + monospace), una palette primaria neutra ancorata da grigi/neri/bianchi con accenti verdi (#0FBF3E) e palette secondarie specifiche per prodotto (viola per Copilot, blu per Security). Il sistema visivo presenta illustrazioni isometriche 3D, motivi del grafico dei contributi, texture di dithering e tre mascotte 3D (Mona, Copilot, Duckie).
GitHub utilizza una gerarchia di marchi a più livelli: solo Invertocat quando il contesto è chiaro, lockup del sub-brand (Invertocat + nome del prodotto) per il marketing autonomo e lockup estesi (Invertocat + GitHub + nome del prodotto) quando il pubblico potrebbe non conoscere GitHub. Copilot ha il suo tema viola (#8534F3), Security ha il blu (#3094FF). Un diagramma di flusso dell'albero decisionale guida la selezione del lockup.
Mona Sans con optical sizing (OPSZ V2.08+). I titoli utilizzano Display Regular (H0 a 110px) e Medium (H3-H6). Il corpo utilizza Regular (15/25 main) e Medium (17/26 large). Mona Sans Mono per codice, citazioni, sopracciglia e note a piè di pagina. Le legature devono essere disattivate; il tracking manuale è vietato a favore di OPSZ.
Tre stili: 1) Illustrazioni chiave - scene isometriche 3D dettagliate con cubi verdi, icone di prodotti e mascotte per i grandi momenti del brand. 2) Grafico dei contributi - astrazione creativa della griglia del profilo GitHub utilizzando quadrati verdi/grigi/rosa. 3) Texture - pattern di dithering bitmap (cerchio, heatmap, gradiente, onda, ovale, mezzo cerchio) in varie combinazioni di colori.
Mona - Octocat rosa/viola (parte gatto, parte polpo), il principale ambasciatore del brand. Copilot - casco robot blu/viola che rappresenta l'AI e l'innovazione. Duckie - paperella di gomma gialla che saluta la tradizione del debug degli sviluppatori, usata con parsimonia.
Copre sei principi di progettazione, tre livelli di budget (leggero alla fabbricazione personalizzata), guida ai materiali (includere sempre un elemento premium non stampato), direzione dell'illuminazione (ambientale tonale + temperatura del colore) e un mandato per almeno un'installazione interattiva in ogni stand.
Create Your Own Slides
Turn your ideas into professional presentations in seconds with 2slides AI.
Fai riferimento a design professionali, scegli il tuo stile e genera slide con rendering del testo perfetto. Alimentato da Nano Banana—inizia a creare la tua presentazione ora.
Your AI Agent for slides. Save time, shine faster with intelligent presentation creation.
© 2026 2slides. All rights reserved.