Avere una collezione di risorse di marca utilizzate social network, in modo che possiamo incorporarle nei nostri progetti, è abbastanza utile.
È qualcosa che cerchiamo su Google ogni volta quando sviluppiamo un’app o un sito Web (qual è il colore utilizzato da Facebook ?, Qual è il codice colore di Facebook ?, o semplicemente, Facebook blu)
Beh, non ti farò aspettare. Diamo un’occhiata ai colori e ai caratteri utilizzati da Facebook, Twitter, Pinterest, Instagram, Snapchat, LinkedIn, Facebook Messenger, YouTube e Google Material Design.
Mostrami solo i colori principali (Facebook, Twitter, Instagram, YouTube, Pinterest).
“Facebook Blu” Codici Colore
- Hex: #4267b2
- RGB: 66,103,178
Font Facebook
- Windows: Segoe UI
- macOS: San Francisco
- iOS: San Francisco
- Android: Roboto
Facebook utilizza il font Segoe UI per la versione Windows del proprio sito Web desktop e il font San Francisco creato da Apple per la versione macOS (entrambi sono i font di sistema predefiniti).
Per iOS e Android, sono rispettivamente San Francisco e Roboto (ancora, entrambi i font di sistema, per la leggibilità e la familiarità), che stanno diventando uno standard.
Twitter Codici Colore
- Hex: #38A1F3
- RGB: 56,161,243
Combinato con le varianti di “Twitter Grey” (che contiene un mix di tonalità blu, nero e bianco), Twitter blu (#38A1F3) viene utilizzato come colore principale del marchio.
Font Twitter
- Windows: Helvetica
- macOS: Helvetica Neue
- iOS: San Francisco
- Android: Roboto
Mentre Twitter ha anche impostato automaticamente i font di sistema per le loro app mobili (come la maggior parte dei social network), la versione Windows del sito web utilizza Helvetica e la versione macOS Helvetica Neue – un po ‘obsoleta ma siamo sicuri che abbiano le loro ragioni.
Pinterest Codici Colore
- Hex: #BD081C
- RGB: 189,8,28
Il classico colore rosso di Pinterest non è mai cambiato!
Font Pinterest
- Windows: Segoe UI
- macOS: San Francisco
- iOS: San Francisco
- Android: Roboto
Mentre Pinterest utilizza all’incirca gli stessi caratteri standard degli altri social network, Pinterest usa il font Hiragino per il giapponese e altre lingue orientali, che si legge meglio rispetto ai caratteri usati con le lingue romane. Sapevi?
“Instagram Grey” Codici Colore
- Hex: #231F20
- RGB: 35,31,32
Instagram usa anche una combinazione di diversi gradienti. È difficile capire quali sono i singoli colori e in quale scenario dovrebbero essere utilizzati, ma qui puoi trovare tutti gli asset del brand di Instagram. Per essere onesti, è raro vedere questi colori in natura – quelli che fanno riferimento ai loro canali di social media tendono a utilizzare “Instagram Gray”.
Font Instagram
- Windows: Segoe UI
- macOS: San Francisco
- iOS: San Francisco
- Android: Roboto
Niente di straordinario qui. Come vedi, Segoe UI, San Francisco e Roboto sono diventati uno standard dei social network, con Instagram non c’è diverso. 🙂
Snapchat
Snapchat Codici Colore
- Hex: #FFFC00
- RGB: 255,252,0
Font Snapchat
- Windows: Avenir Next
- macOS: Avenir Next
- iOS: San Francisco
- Android: Roboto
Stranamente, il font utilizzato nella versione web di Snapchat è un po ‘diverso dalla maggior parte, poiché la maggior parte tende a tornare al font di sistema. Il logo Snapchat, tuttavia, utilizza Avenir Next.
Facebook Messenger
Facebook Messenger Codici Colore
Sebbene sia un’app Facebook, il blu utilizzato da Messenger è leggermente diverso:
- Hex: #0084FF
- RGB: 0,132,255
E il logo usa anche questo colore:
- Hex: #00C6FF
- RGB: 0,198,255
Facebook Messenger Font
Messenger utilizza lo stesso set di caratteri di Facebook:
- Windows: Segoe UI
- macOS: San Francisco
- iOS: San Francisco
- Android: Roboto
LinkedIn Codici Colore
- Hex: #0077B5
- RGB: 0,119,181
LinkedIn Font
LinkedIn usa Source Sans in esclusiva (con Arial come backup), in particolare con i pesi tra luce e semi-grassetto. Leggi le linee guida sui marchi di Linkedin qui.
Nota: Source Sans non ha uno stile corsivo, quindi sub per Georgia. Lo so, strano!
YouTube
YouTube Codici Colore
- Hex: #ED3833
- RGB: 237,56,51
YouTube Font
YouTube, proprietà di Google, utilizza solo Roboto.
Bonus: Google Material Design
Sì, è vero. Tutte le app Google e molte app Android di terze parti (per familiarità e coerenza) utilizzano il sistema di progettazione Google noto come Material Design System.
Il design del materiale contiene un sistema di colori, di colori accettabili (non richiesto ma consigliato) e il carattere predefinito e ampiamente riconosciuto di Google, Roboto.
