Social Blue
Social Blue is a dense, utilitarian design system built for high-volume social content consumption. Anchored by a signature bright blue, it prioritizes information density, clear hierarchy, and fast scanning across feeds, groups, and conversations. The aesthetic is clean and functional — designed to disappear so that people and their content remain front and center.
Color Palette
Typography
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Spacing
Base: 4pxSocial Blue is a dense, utilitarian design system built for high-volume social content consumption. Anchored by a signature bright blue, it prioritizes information density, clear hierarchy, and fast scanning across feeds, groups, and conversations. The aesthetic is clean and functional — designed to disappear so that people and their content remain front and center.
Components
Buttons
Cards
Card Title
Sample body text for the card component.
Card Title
Sample body text for the card component.
Inputs
Chips
Checkboxes
Default
Checked
Focus
Default
Left Sidebar Active Item
Elevation & Depth
Do's & Don'ts
Do
Don't
Use with MCP
Don't have the MCP? Install it here