Twitter Design System

A complete re-design of Twitter's design language focusing on grounding the system around principles, design techniques, and research. The evolution not only improves the look of Twitter but is an internal tool used by the team to create a unified product. 

Frame-98107

The Before

Before launching the re-design of the product, Twitter felt dated and cluttered. It lacked type hierarchy and contrast. The design didn't align with the brand refresh, which was very expressive.

Twitter_2019

Brand Re-fresh

Twitter's brand new look and feel launched in 2021. The brand reflects the messiness of life online, feeling perfectly imperfect, with textures, halftones, and paper tears at its core. When creating the design system, we had to thoughtfully find ways to incorporate the rebrand into a product space.

unfiltered-rs
Screen-Shot-2022-11-12-at-2.18-1
twitter-font-brands-2021
image-209
tear-chirp-rs

System Foundation
⇩
Principles
Techniques
Color
Type
Accessibility

Principles2
A11y2

Component Library
⇩
Thousands of variants
All platforms
Responsive
Used by the millions

Components

Creative Systems
⇩
Illustrations
Gradients
Iconography
Twemojis

IllustMood

The Big Picture
⇩
Cleaner
Bold
Colorful
On Brand

After

Team: Design Foundation @ Twitter
Timeline: 2021-2022
Role: Lead Visual Design, Building & Maintaining Components,
Product Component Libraries, Documentation & Guidelines
Consulting & Collaborating w/ XFN Partners, Working w/ Eng, Vision work

‹ Prev
› Next
View