About SiteStyleGuide

SiteStyleGuide turns any website into a one-page style guide: its colours with hex codes, typefaces, type scale, logo, favicons, title and description, and the design tokens to go with them.

What is a website style guide?

A website style guide is a single reference to how a site looks: which colours it uses and where, which typefaces at which sizes, its logo and icons, and the small rules (corner radius, spacing, breakpoints) that keep every page consistent. Teams use one so that new pages, emails and ads match the site. Many sites never write one down. SiteStyleGuide reads it from the site itself.

What’s in each guide

• Colour: every brand colour with its name, hex and RGB codes, where it’s used, and its contrast against text and white (WCAG).
• Typefaces: the fonts for headings and body text, their weights, and where they’re served from.
• Type scale: heading and body sizes, line heights and letter spacing.
• Logo and favicons: the logo on light, dark and brand backgrounds, and every icon size the site serves.
• Title and description: what search results and shared links show, with character counts.
• Shape and layout: corner radius, shadows, breakpoints and content widths.
• Design tokens: all of it as CSS variables and JSON, ready to paste into a project.

Browse style guide examples picked by industry, the latest guides, or every guide from A to Z.

How a guide is made

When someone adds a website, our software visits its homepage once, the way a browser would. It reads the page’s own code: the stylesheets, the meta tags, the icons and the logo. It works out which colours and typefaces the site uses most, and where, and takes screenshots on a desktop and a phone. It usually takes under a minute.

Nothing is made up: every colour and font in a guide comes from the site itself. Because it’s read from code rather than seen like a person sees it, a guide can occasionally miss something, especially on sites built entirely with JavaScript. Each guide shows the date it was captured, and anyone with an account can refresh a guide after 90 days.

Who it’s for

Designers checking a client’s brand before a pitch. Developers who need the exact hex codes and font stack. Marketers who want to see what a competitor’s site is made of. Anyone curious about how their favourite sites are put together.

Adding sites

Anyone can read guides. With a free account you can add up to 10 new websites a day, save the guides you like, and get the best new ones in our fortnightly newsletter.

We don’t make guides for adult, gambling, drug, violent or malicious websites. Every new guide waits an hour before it appears on the homepage, so we can catch anything that slips through, and anyone can report a guide.

If you run a website

Guides describe public websites for reference. SiteStyleGuide isn’t affiliated with, or endorsed by, the sites it describes. If you’d rather your site wasn’t here, use the form to remove a guide and we’ll take it down. Our crawler is called SiteStyleGuideBot and follows robots.txt; here’s how our crawler works.

Who we are

SiteStyleGuide is made by Deliberate Pty Ltd, PO Box 32, Bassendean WA 6054, Australia. Get in touch at hello@sitestyleguide.com.