Blue Pulse

A minimal, real-time design system built for rapid information consumption and public conversation. Blue Pulse blends the classic bird-era blue with the modern monochromatic X era — creating a hybrid aesthetic that is fast, text-forward, and timeline-driven. The design prioritizes scan speed and microcontent, with a sparse interface that lets short-form text and media speak for itself.

Primary#1DA1F2
Secondary#0F1419
Neutral#536471
Background#FFFFFF
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

DisplayInter · 32px · Extra Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Page TitleInter · 20px · Extra Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Section TitleInter · 20px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Post BodyInter · 15px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Display NameInter · 15px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

HandleInter · 15px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Body SmallInter · 13px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

LabelInter · 13px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

MetadataInter · 13px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Tab InactiveInter · 15px · Medium

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Tab ActiveInter · 15px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

CodeJetBrains Mono · 14px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Spacing

Base: 4px

A minimal, real-time design system built for rapid information consumption and public conversation. Blue Pulse blends the classic bird-era blue with the modern monochromatic X era — creating a hybrid aesthetic that is fast, text-forward, and timeline-driven. The design prioritizes scan speed and microcontent, with a sparse interface that lets short-form text and media speak for itself.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

Inputs

Chips

defaultdefault

Checkbox

unchecked

checked

Tooltips

default

active

hover

Elevation & Depth

Level 1
Level 2

Do's & Don'ts

Do

Keep the timeline sacred — posts are separated by borders only, never wrapped in visual cards
Use circular avatars everywhere — squares are never used for profile images
Show engagement counts compactly next to action icons (reply, repost, like, views)
Implement hover states with background color fill (#F7F9F9), not shadows or borders
Use the dark fill (#0F1419) for the primary Follow button to make it the highest contrast element
Truncate long display names and show full text on hover for timeline scan speed

Don't

Use the blue for large surfaces — reserve it for interactive elements (follow, links, compose)
Use heavy typography — the heaviest weight (800) is reserved for page titles only
Break the 600px main column width — this constraint is what keeps posts scannable
Animate excessively — the only signature animation is the heart burst on Like
Download .md

License MIT
Uploaded 1 months ago
Version v1
File size 7.7 KB
Downloads 43
Copies 2

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/chef/blue-pulse and implement it in my code

Don't have the MCP? Install it here