What Is Stylify Me and What Does It Do?

Updated

Stylify Me is a free online style guide generator that extracts a website's visual design tokens — background colours, text colours, typography, and image dimensions — into a single overview page. It is aimed at designers who want to quickly understand or document the visual system of an existing site without digging through CSS by hand. You give it a URL; it returns a structured style guide.

What Stylify Me extracts

The tool organises its output into four sections, each answering a different design question:

Section What you get Why it's useful
Background Colours A list of HEX values used as backgrounds Build a palette that matches the site's surfaces
Text Colours A list of HEX values used for text Check contrast and text hierarchy
Typography Header 1–6 and Body, each with font, style, size, leading, and colour Reconstruct the type scale and font stack
Image Dimensions Pixel dimensions (width × height) of images Understand the sizing conventions in use

Each typography entry is shown with sample text — headings use the "quick brown fox" pangram and body text uses Lorem ipsum — so you can see the rendered font, weight, size, leading, and colour together rather than as raw numbers.

How it works in practice

  1. Open stylifyme.com and enter the URL of the site you want to analyse.
  2. The tool loads the page and scans its styles, then renders the style guide.
  3. Review the four sections. Colours appear as HEX swatches; typography appears as labelled specimens (Header 1 through Header 6, plus Body); image dimensions appear as pixel measurements.
  4. Use the Download option if you want to keep or share the generated guide.

The expected result is a compact reference document — not a full design system, but a snapshot of the colours, type, and image sizing a site actually uses.

When it's the right tool

Stylify Me fits situations where you need a fast read on someone else's visual language:

  • Competitive or reference research — pull the palette and type scale of a site whose look you're studying.
  • Auditing an unfamiliar codebase — get a visual summary before opening the stylesheets.
  • Rebuilding or matching a design — collect the exact HEX values and font sizes you need to reproduce.
  • Documenting a site you don't control — capture a style guide without access to the source.

It is less suited to generating a style guide for a site you are actively designing, where you'd typically define tokens first and build from them.

Things to know before you rely on it

  • The output reflects the page as rendered at the time of the scan. Styles applied dynamically after load, or behind interactions, may not appear.
  • The guide is a summary, not an export format — you get HEX values and type specs, not CSS variables or a token file.
  • The site lists PayPal as a payment platform and includes a "Buy us a beer" link, so there is a way to support the creators, but the core generator is presented as a tool for designers to use directly.
  • Stylify Me was created by Annabelle Yoon and Michael Mrowetz, and the homepage identifies the current version as 3.0.

If your goal is a quick, readable overview of a site's colours, fonts, sizing, and spacing, Stylify Me does exactly that in one pass.