Research · Aesthetary Original

Take the rest of the brand from the live code

You’ll be able to read a live site’s type, radii and spacing in the browser’s tools, and record each value with its source.

2 min video · captions on

In this skill

Computed shows what the browser used.

Ask where each value came from

  1. Open Styles on the same element
  2. File and line: someone chose it
  3. User agent: the browser’s default
  4. Check headings, gaps and corners
Every value on the old site
1font Arial, sans-serif ×15
2size 16px ×11 24px ×3 32px ×1
3weight 400 ×11 700 ×4
4radius 0px ×15
5margin-top 16px ×7 0px ×4 19.92px ×3 21.44px ×1

Copy each value with where it came from. A browser default is not the brand.

1 more scene is in the video and the transcript.

Transcript

The colors were one part of the brand. Type, corner radii and spacing live in the old site’s code as well. The browser will show you every value, and where each one came from, which is how you tell a decision from a default.

Right-click the old site’s heading, choose Inspect, and open Computed. It lists what the browser actually used: Arial, thirty-two pixels, bold. Under it, the rendered font names the face that really drew the letters. Here it’s Arial, but if a site’s font fails to load, this is where you’ll see the fallback.

Now switch to Styles, which lists every rule that applies, with its source. The font comes from style.css, line one, the body rule: somebody chose Arial. The size comes from the browser itself: its default for a top heading is two em. Nobody chose thirty-two pixels. The section headings are the same story: the browser’s one and a half em, so twenty-four pixels. The space above each paragraph is its one em, sixteen pixels.

Clicking every element is slow, so ask your agent for a small script that reads the computed values of every element and counts them. On the old site, fifteen elements share one face, three sizes and two weights, and not one has a rounded corner. The only spacing written in the stylesheet is the page’s own: twenty pixels at each side.

Write each value down the way you did the colors: the value, a source precise enough to reopen, and whether it’s brand. Here the answer is no, every time. The face came with a template, the sizes came with the browser, and nothing has a radius.

That’s a finding, not a dead end. It tells design there’s no type to keep, so the face can be chosen fresh. On a site someone did design, the same steps find the real values: a font loaded on purpose, one radius on every button, one gap used everywhere. Copy those exactly, with their file and line, and ask the client whether they’re still current.

Copy each value with where it came from. A browser default is not the brand.