How to Generate and Download a Style Guide with Stylify Me

Updated

Stylify Me is a free online tool that scans a target website and produces a style guide covering its background colours, text colours, typography, and image dimensions. To use it, you enter the URL of the site you want to analyse, review the generated sections, and use the download option to save the result. It is aimed at designers who need a quick overview of another site's visual system rather than a full design audit.

What Stylify Me Extracts

The generated guide is organised into four main sections, each pulling a specific type of style information from the target page.

Section What it shows
Background Colours A set of background colours found on the page, each listed with its HEX value
Text Colours A set of text colours, each listed with its HEX value
Typography Header 1 through Header 6 plus Body text, each with font, style, size, leading, and colour
Image Dimensions Dimensions of images on the page, shown in pixels (width x height)

The Typography section renders sample text for each level — the familiar "quick brown fox" line for headings and placeholder body copy — so you can see the actual font, weight, size, line height, and colour in context rather than reading raw values alone.

Step-by-Step: Generating a Guide

  1. Open Stylify Me. Go to stylifyme.com in your browser.
  2. Enter the target URL. Provide the address of the website you want to analyse. This is the input the tool scans.
  3. Generate the guide. The tool processes the page and returns the style guide, split into the Background Colours, Text Colours, Typography, and Image Dimensions sections described above.
  4. Review each section. Check the HEX values for colours, the font/style/size/leading/colour rows for each heading level and body text, and the pixel dimensions for images.
  5. Download the guide. Use the Download option to save the style guide for later reference or to share with a team.

The page also includes a "Back to top" link for navigating long results, and a "Buy us a beer" link (the site accepts PayPal) if you want to support the creators.

What to Check Before Relying on the Output

  • Colour values are HEX only. The guide lists colours as HEX codes, so you will need to convert them if your workflow uses RGB, HSL, or design-tool swatches.
  • Typography is limited to standard levels. The tool reports Header 1–6 and Body. Styles applied to other elements (buttons, captions, navigation links) may not appear as separate rows.
  • Image dimensions are raw pixel sizes. They reflect the images found on the page, not responsive variants or CSS-scaled display sizes.
  • The result reflects the page as scanned. Dynamic content, hover states, or styles loaded after interaction are not part of a static scan.

When to Use It

Stylify Me fits quick reconnaissance: you want the colour palette, type scale, and image sizes of a site in one pass without opening dev tools element by element. It is less suited to auditing interactive states or extracting a complete design token system. If you need the latter, treat the Stylify Me output as a starting inventory and verify specific components in the browser's inspector.

The tool was created by Annabelle Yoon and Michael Mrowetz, and the version shown on the homepage is 3.0.