Craigslist Redesign

the client

Craigslist — The world-renowned, high-utility classified advertisements platform facilitating community connections, housing, jobs, local services, and global peer-to-peer commerce.

keywords

Web Design / UI/UX Redesign / Figma Prototype / Design System / Information Architecture / Component Library / Design Tokens

the objective

Modernize the Craigslist interface to eliminate visual clutter and reduce friction across browsing and ad submission flows, while strictly respecting its hallmark utilitarian speed, fast load times, and iconic brand recognition.

the solution

Architected a comprehensive design token system centering on Craigslist's signature purple (#6A2C82), pairing heritage Times New Roman serif with contemporary Inter sans-serif, introducing pill-shaped search components (37px radius), structured mega-menus, and an interactive Figma prototype.

Foundation & Tokens

Design System & Brand Tokens

Figma Design System

Color System Tokens

Primary Purple #6A2C82 Primary brand anchor, CTA buttons, active tabs Click to copy

Brand Hover #86449B Tab hover background, secondary buttons Click to copy

Brand Dark #6A2983 Top header bottom divider & footer canvas Click to copy

Brand Light #CBA8FF Nav hover highlights on dark surfaces Click to copy

Hyperlink Blue #0000EE Action icon hover (Fav, Flag, Share, Hide) Click to copy

Surface Input #F2F0F1 Search container fill & form textareas Click to copy

Typographic Hierarchy

Brand Wordmark Serif

craigslist

Preserves the iconic heritage wordmark in Times New Roman, ensuring immediate brand recognition while feeling refined and intentional.

Times New Roman · Regular (400) · 36px Header / 52px Footer

Interface & System Sans

Community · Housing · Jobs · For Sale

Inter delivers unmatched legibility across high-density directory listings, filter pills, action icons, and multi-input contact forms.

Inter · 400 Regular / 600 SemiBold · 14px–36px Responsive Scale

UI Component Library

01 / Input Components

Pill Search & Filter Bar

Rounded 37px container featuring keyword inputs, location radius tags, and instant category filters for streamlined classified queries.

radius: 37px · #F2F0F1

02 / Navigation

Tabbed Category Header

High-contrast 44px purple tabs (#6A2C82) with smooth #86449B hover transitions, supporting multi-column mega-menu overlays.

height: 44px · #6A2C82

03 / Interactive Micro-Actions

Post Quick Actions Group

Unified post utility buttons (Favorite, Hide, Flag, Share) featuring classic web blue (#0000EE) interactive hover triggers.

hover: #0000EE · Inter 19px

the client

keywords

the objective

the solution

Design System & Brand Tokens

Color System Tokens

Typographic Hierarchy

UI Component Library

Redesigned Classifieds Homepage

Explore the Interactive Figma Prototype

Luminary Light Counseling

Maria Mejia Law

Dermbubble