mdshop
Back to designs
X

Design System inspired by X (Twitter)

Social media. Black and white rebrand, minimal, text-forward feed.

Usage
npx getdesign@latest add twitter

Run this command from your project root, then ask your AI assistant to use DESIGN.md for UI work.

Installs
15
Bookmarked
0
Not an official X (Twitter) design system. A curated starting point for building X (Twitter)-like UIs with your AI coding agent.

Social media. Black and white rebrand, minimal, text-forward feed.

Preview
twitter.design.md
Brand System Catalog

DESIGN SYSTEM INSPIRATION OF X (TWITTER)

Social media. Black and white rebrand, minimal, text-forward feed.

Explore the systemView tokens

Color Palette

Social media. Black and white rebrand, minimal, text-forward feed.

Primary
Black
#000000
Brand color
White
#ffffff
Brand color
Dark BG
#15202b
Brand color
Dim
#1e2732
Brand color
Blue
#1d9bf0
Brand color
Gray
#536471
Brand color
Border
#2f3336
Brand color
Like Red
#f91880
Brand color

Typography

A type system inspired by X (Twitter).

Chirp
Chirp, Chirp
DISPLAY / 64px / 700 / 1.1
EVERYONE
H1 / 48px / 700 / 1.2
A disciplined editorial voice
H2 / 32px / 600 / 1.3
Section heading
BODY / 16px / 400 / 1.6
Body copy reads at the size and rhythm extracted from the source spec. Lorem ipsum dolor sit amet.
SMALL / 14px / 400 / 1.5
Small
CODE / 14px / 400 / 1.6
Code

Buttons

Buttons, cards, and inputs follow the brand's visual language with consistent use of the primary color palette and border-radius conventions.

Not detected on this URL

Cards

Card patterns inspired by X (Twitter).

Not detected on this URL

Components

Other component primitives mapped from the X (Twitter) spec.

Not detected on this URL