Design Systems of Top Brands

A photography-first interface that turns marketing into a museum gallery. Edge-to-edge product tiles alternate light and dark canvases, framed by SF Pro Display headlines with negative letter-spacing and a single Action Blue (#0066cc)…

○ Light· SF Pro Text

Google began as a search engine and now describes a product family used by billions; its stated mission is to organize the world's information and make it universally accessible and useful.

○ Light

Microsoft makes public experiences for people, teams, and organizations across consumer software, cloud services, devices, and developer tools.

○ Light

Netflix is the streaming interface that taught the world what "lean-back" entertainment software should feel like — a dark, cinematic theater where the content is the only thing that glows.

◐ Dark· Netflix Sans

Spotify's web interface is a dark, immersive music player that wraps listeners in a near-black cocoon (#121212, #181818, #1f1f1f) where album art and content become the primary source of color.

◐ Dark· SpotifyMixUI

A warm, generous consumer marketplace anchored on a clean white canvas and Airbnb Rausch (#ff385c), the single brand voltage that carries every primary CTA, search-button orb, and rating dot.

○ Light· Airbnb Cereal VF

An inspired interpretation of Uber's design language — a transportation-and-delivery super-app brand whose web surface is a black-and-white duet, framed by a custom geometric display sans, accented by a single signature pill shape (radius…

○ Light· UberMoveText

An inspired interpretation of Stripe's design language — a financial-infrastructure brand built on a deep navy ink, an electric indigo primary, and a recurring atmospheric gradient mesh that occupies the upper third of nearly every…

○ Light· SF Pro Display

Tesla's website is an exercise in radical subtraction — a digital showroom where the product is everything and the interface is almost nothing.

○ Light· Universal Sans Display

|

○ Light· Helvetica Now Text Medium

Meta's design system spans hardware commerce (Quest VR, Ray-Ban Meta AI glasses) and brand surfaces with a confident product-merchandising voice.

○ Light· Optimistic VF

OpenAI's interface is the visual argument that powerful technology should feel quiet. The canvas is uncompromising near-black-on-white (#0d0d0d text on #ffffff), with the signature teal-green (#10a37f) reserved almost exclusively for the…

○ Light· OpenAI Sans

An inspired interpretation of Anthropic's design language — a warm, paper-toned research brand built on ivory and oat surfaces, near-black ink, a custom serif for statements and a custom sans for everything else, with fully rounded pill…

○ Light· anthropicSans

A warm-canvas editorial interface for Anthropic's Claude product. The system anchors on a tinted cream canvas with serif display headlines, warm coral CTAs, and dark navy product surfaces (code editor mockups, model showcase cards).

○ Light· StyreneB

Notion presents itself as the all-in-one workspace through a confident, illustration-rich brand voice — anchored by a deep navy hero band ({colors.brand-navy}) decorated with brand-colored sticky-note dots and mesh wire illustrations, a…

○ Light· Notion Sans

A confident black-and-white editorial frame interrupted by oversized, hand-cut pastel color blocks. The marketing canvas is rigorously monochrome — figmaSans variable type, pure white surfaces, pure black ink, pill-shaped CTAs — while each…

○ Light· figmaSans

A near-black product-focused marketing canvas built around #010102 (the deepest dark surface of any tool in this collection), light gray text (#f7f8f8), and the signature Linear lavender-blue (#5e6ad2) used as the single chromatic accent.

◐ Dark· Linear Display

An inspired interpretation of Vercel's design language — a developer-platform brand whose surface is a stark black-and-ink duet on near-white canvas, broken at hero scale by a multi-color mesh gradient (cyan / blue / magenta / amber) that…

○ Light· Geist

GitHub is the home of the world's software, and its interface reflects a deliberate engineering aesthetic: precise, legible, and quietly confident.

○ Light· SFMono-Regular

An inspired interpretation of Slack's design language — a workplace messaging brand built on a deep aubergine primary, with cream-lavender hero gradients, blue inline links, and pill CTAs.

○ Light· Salesforce-Sans