A brandbook from a website address.
The logo, colours, typography and tone of voice read from the live site, with tokens ready for code.
- Checking you are not a robot (Cloudflare Turnstile)
- Connecting to the site
- Downloading styles, fonts and the logo
- Reading colours, typography and the interface
- Comparing pages
- Taking screenshots (Google PageSpeed Insights)
- Putting the brandbook together
npx sitelens brand https://yourwebsite.com --lang enThis site is built by JavaScript, so little of it shows online. Make the full brandbook in the terminal.
Google PageSpeed Insights took no screenshots (a limit or an error), so the brandbook has none.
In the print window, choose “Save as PDF”.
A sample brandbook
Eight landscape A4 pages, read from sitelens.pl.
Prefer the terminal?
In the terminal the brandbook gets screenshots of the dark theme, the buttons and the navigation straight from the site, works for sites built by JavaScript too, and saves a ready PDF.
npx sitelens brand https://yourwebsite.com --lang enOnline or in the terminal
| Online | In the terminal | |
|---|---|---|
| Logo, colours, typography, tone | yes | yes |
| Interactive version and CSS, JSON and Tailwind tokens | yes | yes |
| Screenshots | from Google PageSpeed Insights | from the browser on your computer |
| Dark theme | colours yes, screenshot no | colours and a screenshot |
| Buttons and navigation | rebuilt from the site’s styles | screenshots of the real elements |
| Sites built by JavaScript | limited mode | full brandbook |
| by printing in the browser | a ready file in the package |
Questions about the brandbook
Can I make a brandbook of someone else’s site?
Yes, for analysis, for example of a competitor or of a client’s site before a project. The logo, marks and fonts belong to their owners; the brandbook only describes them.
Does it replace a designer?
No. The brandbook organises what is already on the site. What the site does not state (clear space, minimum sizes, the character), it does not guess but marks as a proposal to approve.
Do you store anything?
No. The site passes through our proxy only while it is read, Google PageSpeed Insights takes the screenshots, and the brandbook is made in your browser.
Where do the colours and fonts come from?
The colours come from the site’s CSS tokens, the variables in its stylesheets, and their roles from where and how much they show on the homepage. The typefaces come from the stylesheets and the font files the site loads.