# Looking at a reference site before you design

> Renders a web page the way a visitor sees it — wide (1440×900) and on a phone (390×844) — into PNGs in your project's design/refs/ folder, and prints what the page is really set in: the faces it loaded, its body and heading type, its ground and text colours. A reference is a page you LOOKED at; this is how you look.

<!-- id: local-looking-at-a-reference · area: local · stability: stable · html: https://osysharp.com/reference/local/looking-at-a-reference/ -->

## Summary        {#summary}

The design method ([[ui-design#direction]]) asks for at least two references from the category's best, each written
down as **its URL and one concrete thing you saw there**. A page's text says nothing about its type, its whitespace or
how its photographs own the screen — which is what a reference is for — so a reference has to be looked at, not read.
`osy design look` renders it in a real browser and saves the pictures in your project.

## Signature      {#signature}

```console
osy design look <url> [--full] [--out <dir>] [--name <name>] [--path <project>]
```

`--full` takes the whole page, top to bottom (up to 7,000px), instead of what the first screen shows. `--out` is where
the pictures go, relative to the project (default `design/refs`); `--name` is the files' stem (default: the URL's host
and path, `example-com-shop`).

## Description    {#description}

### What you get    {#what-you-get}

Two pictures — the page at a laptop's width and on a phone, the phone rendered as a phone (touch, a mobile browser,
2× pixels), so a site that serves phones a different layout shows that layout — and what the page is set in:

```console
$ osy design look https://example.com/shop
✓ wide  1440×900  → design/refs/example-com-shop-wide.png
✓ phone 390×844  → design/refs/example-com-shop-phone.png
  title       Example — Shop
  faces loaded Söhne, Tiempos Headline
  body        Söhne, sans-serif · rgb(20, 20, 20) on rgb(246, 243, 236)
  h1          "Tiempos Headline", serif 64px weight 400 — "Everything for the table"
  Open both pictures and look at them, then write in DESIGN.md the URL and one concrete thing
  you SAW — the type, the ground, how the photographs sit — not what the page says about itself.
```

**Open both pictures.** The faces line is what the browser actually LOADED, not what the stylesheet asked for, so it is
the honest answer to "what is this set in?" — and with it, [Finding a typeface by its character, and shipping it](https://osysharp.com/reference/local/finding-a-font/) finds an open-source face with the
same character.

The page is given time to settle — its network to go quiet, its fonts to load, its entrance animations to finish —
before the picture is taken, so you see the design rather than its first frame.

### What it needs    {#needs}

A browser, found exactly as `osy test --pixels` finds one: Playwright (`npm i -D playwright` in the project), driving
the Google Chrome already installed — or Playwright's own Chromium (`npx playwright install chromium`) when there is no
Chrome. When either is missing it says which, and that one command.

A page that refuses an automated browser, or never finishes loading, is reported as not loaded: take another reference
rather than writing notes about one you did not see.

## See also       {#see-also}
- [Designing an app that looks designed — direction, type, colour, composition and motion](https://osysharp.com/reference/ui/design/) — the method these references feed: first instinct, references, three directions
- [Finding a typeface by its character, and shipping it](https://osysharp.com/reference/local/finding-a-font/) — `osy font find` and `osy font add --fontsource`: a face with the character you saw
- [web fonts — shipping a typeface with your app](https://osysharp.com/reference/ui/web-fonts/) — shipping a typeface with your app
- [theme tokens](https://osysharp.com/reference/ui/theming/) — where what you decided becomes tokens