Skip to main content
PikSpec

Measured design systems

Design systems of well-known websites

The fonts, colours, type scales, spacing and radii of 116 well-known websites, measured from their home pages with PikSpec. Each page names the fonts and their free alternatives.

In short: Each page lists what a website’s home page actually rendered: its fonts (and whether they are free), its colour palette with each colour’s role, its type scale, spacing and corner radii, plus the values as CSS variables and a DESIGN.md for Claude Code, Cursor and Lovable. They are independent measurements, not the companies’ official design systems.

Updated

Dark designs

Light designs

About these measurements

Each design was measured with PikSpec’s scanner from the site’s public home page at 1440px wide. The values are what the page displayed on the capture date; websites change, and the companies’ internal design systems may name things differently.

The company names are their owners’ trademarks. These pages are not affiliated with or endorsed by them, and show no logos, copy or images from their sites. To use a style, take the values, swap licensed fonts for the free matches listed, and bring your own name, words and pictures.

Contact PikSpec

Email support@pikspec.com for support, privacy requests or content reports.