Inside the substack.com design system

This is a design teardown of substack.com: a describe-and-tokenize read of its public homepage, pulled apart into the color, type, and spacing tokens it actually ships, the section-by-section structure it uses to tell its story, and a reference-grounded prompt your AI can build from. We render and describe the page; we never copy or re-host its assets.

Under the surface, substack.com runs on a 9-color palette ranked by surface area and a 7-step type scale. The token inspector below breaks each one out with copyable values, so you can read the system the way the team that built it would.

Structurally, the page resolves into 1 distinct sections and a stack that fingerprints as Google Analytics. Skim the section map and the build prompt to lift the parts that fit your own product, then point your AI at the prompt instead of the generic defaults everyone else ships.