Social login buttons and links to social media channels remain a staple in web and app design even in 2025. In a world where nearly every business maintains a presence on social media, these elements are indispensable for seamless user experiences & brand consistency.
Understanding the design fonts and colors used by popular social networks is crucial. It ensures that your website or app aligns with recognizable branding while maintaining a polished, professional look.
But let’s face it, every designer has found themselves searching for specifics like “Facebook blue hex value,” “Instagram fonts and colors,” or “What’s the font used by YouTube?” It’s a common scenario for projects requiring integration with social platforms.
To save you some Googling, we’ve compiled a quick guide to the fonts and colors used by major social networks, including Messenger, Instagram, WhatsApp, Facebook, Twitter, Pinterest, LinkedIn, Snapchat, Google, TikTok, Telegram, and YouTube.
Fonts and Colors of Facebook
FB Fonts
- Primary Font (App and Branding):
- Facebook uses Facebook Sans, a custom font created specifically for its branding.
- It is clean, modern, and geometric, designed for readability and scalability.
- Fallback and Legacy Fonts:
- Helvetica Neue or Arial (used in older interfaces or fallback situations).
FB Colors
- Primary Brand Color:
- Facebook Blue:
#1877F2 - RGB: (24, 119, 242)
This blue is iconic and integral to Facebook’s identity.
- Facebook Blue:
- Secondary Colors:
- Facebook Dark Blue (Used in the logo)
- Hex:
#4267B2 - RGB: (66, 103, 178)
- Hex:
- Facebook Grey (Background/Interface Elements)
- Hex:
#F0F2F5 - RGB: (240, 242, 245)
- Hex:
- Facebook White (Text/Contrast)
- Hex:
#FFFFFF - RGB: (255, 255, 255)
- Hex:
- Accent Grey (Borders/Text Muting)
- Hex:
#65676B - RGB: (101, 103, 107)
- Hex:
- Facebook Dark Blue (Used in the logo)
MacOS
- Font Used: San Francisco (SF Pro)
- This is the default system font for macOS. Facebook typically uses system fonts for a native look and feel.
iOS
- Font Used: San Francisco (SF Pro)
- As with macOS, iOS uses Apple’s system font, which ensures a seamless and familiar experience for users on Apple devices.
Android
- Font Used: Roboto
- This is the default system font for Android. Facebook aligns with Android’s Material Design principles by using Roboto.
Web and Custom Branding
- Font Used: Facebook Sans
- On the web and in branding materials, Facebook uses its custom Facebook Sans font, regardless of the platform, to maintain consistency in its brand identity.
This platform-specific font adaptation ensures a seamless user experience while maintaining Facebook’s recognizable aesthetic.
Fonts and Colors used by Messenger
Font used in Messenger:
- System Fonts:
- iOS/macOS: San Francisco (SF Pro) ensures a native Apple experience.
- Android: Roboto, in line with Google’s Material Design.
- Windows: System default.
- Brand Fonts:
- Facebook Sans: Messenger uses Facebook’s custom font for web and branding consistency.
Messenger Colors & RGB Values
- Primary Blue
- Hex:
#0084FF - RGB: (0, 132, 255)
- Hex:
- Accent Purple Gradient
- Hex:
#8B1A62to#FF66A3 - RGB: (139, 26, 98) to (255, 102, 163)
- Hex:
Design Philosophy:
Messenger prioritizes ease of communication with minimal distractions, reflected in its clean, modern UI and adaptive themes.
Fonts and Colors of Instagram
Fonts used by Instagram:
- Custom Font: Instagram Sans was introduced in 2022, a geometric sans-serif that’s flexible for dynamic content like stories and reels.
- System Fonts:
- iOS/macOS: San Francisco (SF Pro).
- Android: Roboto.
- Windows: Segoe UI
Colors used by Instagram:
Gradient Palette (Primary Colors)
- Pink:
- Hex:
#E1306C - RGB: (225, 48, 108)
- Hex:
- Purple:
- Hex:
#C13584 - RGB: (193, 53, 132)
- Hex:
- Yellow:
- Hex:
#F77737 - RGB: (247, 119, 55)
- Hex:
- Blue:
- Hex:
#5851DB - RGB: (88, 81, 219)
- Hex:
Design Philosophy:
Focuses on visual content with bold colors, gradients, & a sleek layout to highlight media.
Fonts and Colors used by X (formerly Twitter)
- System Fonts:
- iOS/macOS: San Francisco (SF Pro).
- Android: Roboto.
- Windows: Adapts Helvetica Neue or similar sans-serif fonts.
Colors and RGB Values X:
- Black
- Hex:
#000000 - RGB: (0, 0, 0)
- Hex:
- Blue (legacy)
- Hex:
#1DA1F2 - RGB: (29, 161, 242)
- Hex:
- Gray
- Hex:
#E1E8ED - RGB: (225, 232, 237)
- Hex:
Design Philosophy:
Simplified & text-focused, aligning with its nature as a microblogging platform.
Font and Color used by Whatsapp
WhatsApp Fonts:
- System Fonts:
- iOS/macOS: San Francisco (SF Pro).
- Android: Roboto.
- Windows: Helvetica Neue or Arial for fallback.
Colors and RGB Values of WhatsApp
- WhatsApp Green
- Hex:
#25D366 - RGB: (37, 211, 102)
- Hex:
- Dark Green
- Hex:
#075E54 - RGB: (7, 94, 84)
- Hex:
- Light Grey
- Hex:
#ECE5DD - RGB: (236, 229, 221)
- Hex:
Design Philosophy:
Prioritizes simplicity & functionality with muted tones & a familiar green-based interface.
Fonts and Colors used by Pinterest
Fonts used by Pinterest:
- Primary Font: Modern sans-serif fonts like Helvetica Neue.
- System Fonts:
- iOS/macOS: San Francisco (SF Pro).
- Android: Roboto.
- Windows: Segoe UI
Colors and RGB Values
- Pinterest Red
- Hex:
#E60023 - RGB: (230, 0, 35)
- Hex:
- White
- Hex:
#FFFFFF - RGB: (255, 255, 255)
- Hex:
- Light Grey
- Hex:
#F4F4F4 - RGB: (244, 244, 244)
- Hex:
Design Philosophy:
Focuses on inspiration & creativity with bold visuals & clean typography.
Fonts and Colors of LinkedIn
Fonts used by LinkedIn:
- Primary Font: Source Sans Pro for branding and UI.
- System Fonts:
- iOS/macOS: San Francisco (SF Pro).
- Android: Roboto.
Colors and RGB Values of LinkedIn:
- LinkedIn Blue
- Hex:
#0077B5 - RGB: (0, 119, 181)
- Hex:
- Gray
- Hex:
#F3F6F9 - RGB: (243, 246, 249)
- Hex:
- White
- Hex:
#FFFFFF - RGB: (255, 255, 255)
- Hex:
Design Philosophy:
Professional & functional, LinkedIn uses neutral tones & clean fonts to create a serious yet approachable platform.
Fonts and Colors Used by Snapchat
Fonts used by Snapchat:
- Branding Font: Avenir Next, selected for its fun & youthful appeal.
- System Fonts:
- iOS/macOS: San Francisco (SF Pro).
- Android: Roboto.
- Windows: Segoe UI
Colors and RGB Values of Snapchat:
- Snap Yellow
- Hex:
#FFFC00 - RGB: (255, 252, 0)
- Hex:
- Black
- Hex:
#000000 - RGB: (0, 0, 0)
- Hex:
- White
- Hex:
#FFFFFF - RGB: (255, 255, 255)
- Hex:
Design Philosophy:
A bold, playful interface with bright colors & large typography to resonate with younger audiences.
Fonts and Colors Used by YouTube
Android, Google, & Google-owned apps like YouTube use the design system known as Material Design, which refers to several colors & recommends using the Roboto font.
Fonts used by YouTube:
- Primary Font: Roboto, used across all platforms for consistency.
- Branding Font: Clean sans-serif fonts in logos, such as YouTube Sans.
Colors & RGB Values of YouTube
- Red
- Hex:
#FF0000 - RGB: (255, 0, 0)
- Hex:
- Black
- Hex:
#000000 - RGB: (0, 0, 0)
- Hex:
- White
- Hex:
#FFFFFF - RGB: (255, 255, 255)
- Hex:
Design Philosophy:
A video-first platform emphasizing contrast & clean typography for ease of navigation.
Fonts and Colors Used by Google
Fonts used by Google:
- Branding Font: Product Sans, a custom font used in Google logos & branding for a modern, approachable look.
- Interface Fonts: Roboto, Google’s signature font for apps and web UI.
Colors and RGB Values of Google
- Google Blue Color Value
- Hex:
#4285F4 - RGB: (66, 133, 244)
- Hex:
- Alphabet Red Color Value
- Hex:
#EA4335 - RGB: (234, 67, 53)
- Hex:
- Google Yellow Color Value
- Hex:
#FBBC05 - RGB: (251, 188, 5)
- Hex:
- Google Green Color Value
- Hex:
#34A853 - RGB: (52, 168, 83)
- Hex:
Design Philosophy:
Google emphasizes a clean, user-friendly interface that adapts seamlessly to devices and screens.
Fonts and Colors Used by TikTok
Fonts of TikTok
- Branding Font:
- TikTok uses Proxima Nova & similar clean, modern sans-serif fonts for its branding and promotional materials.
- In recent updates, TikTok also incorporates TikTok Sans, a custom font designed for its UI and branding.
- System Fonts:
- iOS/macOS: San Francisco (SF Pro) ensures native compatibility.
- Android: Roboto, in line with Material Design standards.
- Windows: Segoe UI
Colors and RGB Values of TikTok
- TikTok Black
- Hex:
#000000 - RGB: (0, 0, 0)
- Hex:
- TikTok White
- Hex:
#FFFFFF - RGB: (255, 255, 255)
- Hex:
- Highlight Pink
- Hex:
#FE2C55 - RGB: (254, 44, 85)
- Hex:
- Highlight Cyan
- Hex:
#25F4EE - RGB: (37, 244, 238)
- Hex:
- Background Grey
- Hex:
#F2F2F2 - RGB: (242, 242, 242)
- Hex:
Design Philosophy
TikTok’s design is bold, energetic, and optimized for engaging short-form video content.
- Typography: Clean, readable fonts with subtle animations for modern appeal.
- Interface: A minimalist black or white background that ensures videos remain the focal point.
- Colors: Neon highlights add a youthful, vibrant touch, reflecting the platform’s fun & creative community.
Fonts and Colors Used by Telegram
Fonts of Telegram:
- System Fonts:
- iOS/macOS: San Francisco (SF Pro).
- Android: Roboto.
- Windows: Defaults to Arial or Helvetica Neue for consistency.
Colors and RGB Values of Telegram
- Telegram Blue
- Hex:
#0088CC - RGB: (0, 136, 204)
- Hex:
- White
- Hex:
#FFFFFF - RGB: (255, 255, 255)
- Hex:
- Light Grey
- Hex:
#F4F4F4 - RGB: (244, 244, 244)
- Hex:
Design Philosophy:
Focuses on speed & clarity, reflected in a minimalist design with subtle colors & lightweight fonts.
Fonts and colors play an important role in how users perceive & interact with a brand, as we’ve seen across platforms like TikTok, Facebook, Instagram, and more. Whether it’s the friendly warmth of Snapchat’s yellow or the trust-inducing blue of LinkedIn, every design choice tells a story.
At Draftss, we understand the art & science of design. With our unlimited design services, we help brands craft memorable experiences by combining creativity with functionality.
