# Parse A Site: Starter Kit (LLM-ready, beginner)

**What this is**: a complete, copy-paste prompt sequence for measuring a website you think looks expensive, and rebuilding its design layer on your own site, for free. Written to be pasted whole into Claude, ChatGPT, Gemini, Copilot, Cursor, or any coding agent.

**You do not need to know CSS.** You need an assistant that can read files.

**How to use it**: paste this entire file into your assistant, then say which site you want to measure and where your own site lives. Everything the assistant needs is below, including the full measured reference dataset so it can sanity-check its own findings.

**License**: use it, adapt it, ship it. Originally published at https://jwatte.com/blog/parse-premium-sites-beginner/

**Companions**: `premium-design-system-spec.md` (the measured design values), `parse-a-site-advanced-pipeline.md` (the full pipeline), `design-retrofit-audit-kit.md` (what breaks and how to catch it).

---

## INSTRUCTIONS FOR THE ASSISTANT

You are helping a non-technical owner measure a website's design and apply those values to their own site.

**Hard rules:**
1. **Numbers, never adjectives.** Never answer "what makes this look good" with words like elegant, clean, modern, premium or sleek. Extract declared values with counts.
2. **Presentation only.** Do not change templates, structured data, page titles, meta descriptions, canonicals, or anything machine-readable. If a change appears to need that, stop and ask.
3. **Additive and reversible.** One new stylesheet, loaded after the existing one, redefining the custom properties the site already uses. The owner must be able to undo everything by deleting one `<link>` tag.
4. **Calculate contrast, never estimate it.** Section 5 is mandatory and the job is not done until it returns zero failures.
5. **Copy values, never identity.** Type scales, spacing, easing curves and color relationships are craft conventions. Logos, brand names, photography, copy and overall trade dress are not. Never reproduce those.
6. **Do not fetch anything automatically unless the owner asks AND it is permitted.** This kit is designed around pages the owner saved by hand in a browser, which is always allowed and is entirely sufficient. If they ask you to fetch instead:
   - read `https://<domain>/robots.txt` and honor it ([RFC 9309](https://www.rfc-editor.org/rfc/rfc9309.html));
   - find and read the site's Terms of Service, usually footer-linked, and **STOP if it prohibits automated access, crawling or scraping**, telling the owner plainly and offering the manual route;
   - never fetch anything behind a login or paywall, and never collect personal data about identifiable people;
   - treat a block, challenge page, CAPTCHA or `429` as an answer and stop; never work around it.
7. **Explain in plain language.** The owner is not a developer. Say what changed and why, without jargon.

**Do not**: add a CSS framework, add a dependency, add a build step, or install a component library. None of this needs one.

---

## STEP 0: THIRTY SECONDS OF HOUSEKEEPING

Before saving anybody's page, tell the owner to check two things. This keeps the whole exercise uncontroversial.

1. **The site's Terms of Service**, usually linked in the footer. Many prohibit automated access, crawling or scraping. **If they do, do not automate anything against that site.** Opening the page in a browser and looking at it is always fine, and is all this kit needs.
2. **Whether they actually need to automate at all.** This method needs two or three pages. That is a browser and "Save Page As", not a script.

Also, always: nothing behind a login or paywall, no personal data about identifiable people, and if a site pushes back with a block or a challenge page, that is an answer.

**Take values, never identity.** Measuring that a heading is weight 400 at 1.03 line-height is reading a published fact, and studying proportion is how designers have always learned. A logo, brand name, photograph, piece of copy, or a distinctive overall look customers associate with that company is not yours to take.

*This is not legal advice and the author is not a lawyer. If the owner is doing this commercially or against a direct competitor, they should ask a lawyer first.*

---

## STEP 1: GET THE PAGE

Tell the owner to do one of these. **The first two are always safe. Only use the third after Step 0 has cleared it.**

- Browser: **File → Save Page As → Web Page, Complete**
- Or: right-click → **View Page Source**, select all, paste into a `.txt` file
- Or, only if terms and `robots.txt` permit: `curl -sL "URL" -o saved-page.html`

**Also look for the design system file.** This is the step most people miss and it is where the real values live. In the saved HTML, find every `<link rel="stylesheet">`. If one points at a *different host* to the page (usually a CDN subdomain), fetch that file too. It commonly contains the entire token contract, while the page contains only one instantiation of it.

*Real example: grepping seventeen saved pages for `clamp()` found almost none, and the near-conclusion was "premium sites do not use fluid type". False. Their shared design-system stylesheet used `clamp()` 120 times including a full heading scale. Always look for the system file.*

---

## STEP 2: THE MEASUREMENT PROMPT

Paste this at your assistant, with the saved files available:

> Read the saved HTML and any stylesheets in this folder. Do not describe the design in adjectives. Extract the actual declared values and give me counts of each so I can see which dominate:
>
> 1. Every `font-family`, and which are used for headings vs body
> 2. Every `font-weight`, with counts
> 3. Every `line-height` on headings and on body text
> 4. Every `font-size`, noting any `clamp()` fluid scales in full
> 5. Every `letter-spacing`, and what it is applied to
> 6. Every hex color with counts, and tell me which is the page background, which is the body text, and which is the accent
> 7. Every `border-radius` value with counts
> 8. Every section `padding` and `margin` value, and any large spacing tokens
> 9. Every `transition` duration and every `cubic-bezier` easing curve, with counts
> 10. Every `@media` breakpoint, with counts
> 11. Whether the page includes `prefers-reduced-motion`, `prefers-color-scheme`, or `(hover: hover)`
> 12. Any CSS custom properties (`--name: value`) declared, resolved to their actual values
>
> Present it as tables. Where a value appears once, say so; I care about what dominates.

---

## STEP 3: RECONCILE AGAINST THE MEASURED REFERENCE

Give the assistant the reference data in Section A below, then ask:

> Compare my extracted values against this measured reference dataset. For each of type weight, line-height, ground color, ink color, accent count, spacing scale, radius and motion: say whether the site I picked agrees with the reference or differs, and by how much. Where it differs, tell me which is more likely to suit my business and why. Flag anything in the site I picked that is measurably worse than the reference, especially missing accessibility features.

---

## STEP 4: APPLY IT

> Apply the agreed values to my site by writing ONE new stylesheet that loads after my existing one, redefining the CSS custom properties my site already uses. Do not edit my templates. Do not change any structured data, page titles, or meta descriptions. Add a comment at the top of the file explaining what it does and how to remove it. I want to be able to undo this by deleting one line.
>
> Before you start, tell me: does my site already use CSS custom properties for its colors? If yes, list their names. If no, tell me, because that changes how much work this is.

**If the assistant says the site does NOT use custom properties**, the job is bigger. Ask it to say how much bigger before continuing.

---

## STEP 5: THE CONTRAST CHECK (mandatory)

> Check every text and background color pair you introduced, and every one already on the page. For each pair:
> - Composite the background properly: if a background is semi-transparent (`rgba` with alpha below 1), walk up the parent elements combining them until you reach a solid color. Do not treat a translucent color as solid.
> - Calculate the WCAG contrast ratio. Do not estimate it.
> - Required: **4.5 to 1** for normal text, **3 to 1** for large text (24px and above, or 18.66px and above at weight 700+), **3 to 1** for non-text UI including input borders and focus rings.
> - Fix everything that fails by darkening or lightening along the same hue until it clears on EVERY background it appears on, not just the page background.
> - Show me a table of every pair, its ratio, and pass or fail.

*This one instruction, run on a real site, found that **every primary button was at 4.0 to 1**, below the accessible minimum, and had been for months. It is the highest-value question in this kit.*

---

## STEP 6: DEPLOY

Free or near-free, verified 22 August 2026:

| Host | Free tier | Paid entry |
|---|---|---|
| Netlify | "$0 forever" | Pro **$20/month**, unlimited members |
| Vercel | Hobby tier | Pro **$20/mo**, includes $20 usage credit |
| Cloudflare Workers | Yes | **$5/month** account minimum, 10M requests included, +$0.30/additional million, **no bandwidth or egress charges** |

> Deploy this as a static site. Walk me through it one command at a time, and tell me what each command does before I run it.

---

## SECTION A: THE FULL MEASURED REFERENCE DATASET

Measured 21 and 22 August 2026 across **51 pages in four corpora**. Counts are declarations found in saved markup and inline styles: they weight heavily-repeated declarations, so read them as evidence of what is in each system rather than a measure of visual area.

Corpora: **A** = 16 high-end client sites in one vertical. **B** = 15 platform vendors selling websites into that vertical. **C** = 15 creator and personal-brand platform pages. **D** = 5 developer infrastructure host pages.

### A.1 Page weight (HTML document only)

| Corpus | Median | Range |
|---|---|---|
| A high-end client sites | 605 KB | 425 to 951 KB |
| B vendor marketing | 250 KB | 73 to 1262 KB |
| C creator platforms | 419 KB | 6 to 2059 KB |
| D developer hosts | 566 KB | 224 to 1238 KB |

### A.2 Font weight (the clearest signal of register)

| Corpus | Weights by frequency |
|---|---|
| **A** high-end client | **400 (108)**, normal (62), 700 (49), bold (49), 500 (46), 300 (41), 600 (21), 200 (12) |
| **B** vendors | **700 (235)**, 600 (170), 500 (136), 400 (83), 800 (54), 300 (39), 900 (31), normal (30) |
| **C** creators | **400 (245)**, 500 (223), 700 (116), 600 (96), normal (52), 900 (20), 800 (19), 100 (12) |
| **D** hosts | 600 (18), 500 (15), 400 (1) |

**Read this:** expensive client work is LIGHT. The companies selling it are BOLD on their own marketing. Two different jobs. Pick deliberately.

### A.3 The full fluid type scale from the commercial design system

```
h1   clamp(4rem,     4.453125vw, 14.25rem)   weight 400   line-height 1.03
h2   clamp(3.25rem,  3.125vw,    10rem)      weight 400   line-height 1.15
h3   clamp(2.625rem, 2.343vw,    7.5rem)     weight 400   line-height 1.14
h4   clamp(2rem,     1.093vw,    3.5rem)     weight 300   line-height 1.12
h5   clamp(1.5rem,   0.78125vw,  2.5rem)     weight 300   line-height 1.17
h6   clamp(1.25rem,  0.664vw,    2.125rem)   weight 300   line-height 1.3
body clamp(1rem,     0.625vw,    2rem)       weight 300   line-height 1.38
```

Headings set `letter-spacing: normal`. Tracking (1.5px, 1px, 0.5px, 2px, 3px, or 0.2em) belongs ONLY on small uppercase eyebrow labels.

**Adapt:** those upper bounds suit a page with six words on it. On a content-dense site keep the **weights and line-heights exactly** and pull the sizes down. For long-form reading, body line-height 1.6 to 1.65 beats 1.38; what matters is that the gap between heading and body leading stays wide.

### A.4 Color, by corpus (hex with counts)

**A, high-end client sites** (the "expensive" palette):
`#ffffff (298)`, `#000000 (250)`, `#848484 (180)`, `#1a1a1a (93)`, `#403e3f (54)`, `#f1f0eb (54)`, `#5f5d61 (37)`, `#e2e0d9 (36)`, `#fbfbf9 (35)`, `#f47e14 (33)`, `#141414 (32)`, `#3e1214 (30)`, `#e4dfd8 (29)`, `#c28563 (28)`, `#fbf9f7 (27)`, `#c09b57 (21)`

Grounds are bone (`#f1f0eb`, `#fbfbf9`, `#e2e0d9`, `#e4dfd8`, `#fbf9f7`). Inks are charcoal (`#1a1a1a`, `#141414`, `#403e3f`). Accents are muted earth (`#c09b57` old gold, `#c28563` clay, `#3e1214` oxblood).

**B, vendor marketing** (conversion-oriented, saturated):
`#ffffff (182)`, `#e0e4e7 (144)`, `#3ec49d (87)`, `#000000 (86)`, `#d3e5f3 (81)`, `#23355b (69)`, `#f8fafd (61)`, `#05205e (42)`, `#d7ae6b (40)`, `#ebf3f8 (36)`, `#131c31 (31)`, `#fafdff (27)`, `#dc0000 (27)`, `#fb8400 (26)`, `#0693e3 (26)`, `#d2421a (26)`

Note the mint green, the bright blues, the reds and oranges. This is a state palette, not a brand palette.

**C, creator platforms** (bold, high-chroma, personality-forward):
`#101585 (179)`, `#ffffff (108)`, `#000000 (106)`, `#000624 (98)`, `#3899ec (66)`, `#1f1f1e (64)`, `#00524e (56)`, `#405b50 (43)`, `#fdfdfc (43)`, `#ff5c3c (43)`, `#7008e7 (37)`, `#a1a1aa (27)`, `#f4f4f5 (26)`, `#d4d4d8 (22)`, `#121c1e (20)`, `#f7f7f7 (18)`

Deep indigo, electric purple, coral. Creator brands are allowed to be loud in a way property brands are not.

**D, developer hosts** (neutral gray ramp, near-monochrome):
`#a3a3a3 (25)`, `#404040 (25)`, `#171717 (20)`, `#737373 (20)`, `#f5f5f5 (15)`, `#fafafa (12)`, `#d4d4d4 (10)`, `#e5e5e5 (10)`, `#79b8ff (8)`, `#0f0f10 (5)`, `#171719 (5)`, `#111113 (5)`, `#525252 (5)`, `#f6821f (5)`, `#4f46e5 (5)`, `#818cf8 (5)`

A precise neutral ramp plus one or two brand hues. Almost no decorative color.

### A.5 Corner radius (the fastest read of category)

| Corpus | Radii by frequency |
|---|---|
| **D** hosts | **3px (83)**, 8px (31), 1.5px (16), .25rem (7), .5rem (7), 12px (5) |
| **A** high-end client | 8px (60), 50% (30), 16px (29), 999px (25), 25px (7), 12px (7) |
| **B** vendors | 50% (75), 4px (33), 999px (31), 2px (23), 8px (22), 16px (20) |
| **C** creators | **15px (57)**, 8px (50), 50% (40), 30px (24), 100px (20), 10px (19) |

Sharper reads technical and serious. Rounder reads friendly and consumer.

### A.6 Motion

**Easing curves, by corpus:**

- **A** high-end client: `cubic-bezier(0.645,0.045,0.355,1)` (24), `cubic-bezier(0.23,1,0.32,1)` (18), `cubic-bezier(0.835,0,0.19,1)` (16)
- **B** vendors: `cubic-bezier(0.42,0,0.58,1)` (39), `cubic-bezier(.2,.7,.2,1)` (11), `cubic-bezier(.34,1.56,.64,1)` (5)
- **C** creators: `cubic-bezier(0.433,0.217,0.355,1)` (28), `cubic-bezier(.87,0,.13,1)` (10), `cubic-bezier(.4,0,.2,1)` (4)
- **D** hosts: `cubic-bezier(0.25,0.46,0.45,0.94)` (69), `cubic-bezier(0.55,0.085,0.68,0.53)` (47), `cubic-bezier(0.32,0.72,0,1)` (2)

Note corpus B contains `cubic-bezier(.34,1.56,.64,1)`, which overshoots past 1 and produces a bounce. That is a conversion-marketing choice; it does not appear in the high-end client corpus at all.

**Durations, by corpus:**

- **A**: 3s (369), 0.3s (163), 0.2s (145), 2s (72), 0s (56)
- **B**: 2s (41), 3s (40), 0.1s (33), 0.2s (28), 0.25s (24)
- **C**: 0.2s (224), 0s (56), 50ms (42), 0.3s (34), 700ms (29)
- **D**: **0.16s (69)**, 0.1s (47), 2000ms (10), 15s (8), 3s (2)

Interface motion clusters at 0.2s to 0.3s. Developer hosts run faster (0.16s, 0.1s). Anything from 2s upward is an image pan or marquee, never an interface transition.

### A.7 Accessibility discipline (inverted from price)

| Corpus | `prefers-reduced-motion` | `prefers-color-scheme` | hover gated |
|---|---|---|---|
| **A** high-end client | **0 of 16** | 0 of 16 | 13 of 16 |
| **B** vendors | 7 of 15 | 2 of 15 | 1 of 15 |
| **C** creators | 3 of 15 | 6 of 15 | 2 of 15 |
| **D** hosts | 1 of 5 | **5 of 5** | 0 of 5 |

**Not one of the sixteen most expensive sites ships a reduced-motion block.** They are the most animated and the least willing to turn it off. Five lines puts you ahead of your reference material.

### A.8 Typeface families observed

- **A** high-end client: Montserrat (9 of 16 via Google Fonts), Inter (3), Arapey (2), Lato (2), Cormorant Garamond (2), Tenor Sans (2); self-hosted Butler, Saol Display, Italiana, brokerage-custom faces
- **B** vendors: Montserrat (3), Open Sans (2), Source Sans Pro, Plus Jakarta Sans, Albert Sans; custom "mundial", "roc-grotesk"
- **C** creators: Inter dominant (265 declarations), plus platform-custom families
- **D** hosts: near-universally self-hosted; Inter Variable and monospace faces

**Montserrat is the most recognizable "we bought a template" face in this category.** Keep the structural formula (one display face, one neutral sans, never three) and pick a less saturated pairing.

### A.9 Breakpoints

`max-width: 768px` (551), `560px` (316), `767px` (201), `992px` (143), `1024px` (134), `1200px` (58), `900px` (55). Three stops are enough: roughly 768, 560, and one of 992/1024.

### A.10 Spacing tokens from the commercial system

```
--grid-gap-xsmall: .5rem     --grid-gap-large:  3.875rem
--grid-gap-small:  1rem      --grid-gap-xlarge: 15rem      /* 240px */
--grid-gap-medium: 1.5rem

--spacing-large:  clamp(8.5rem,  9.4531vw, 30.25rem)   /* 136 to 484px */
--spacing-xlarge: clamp(11.5rem, 6.8554vw, 21.9375rem)

--container-small:  67.875rem  /* 1086px */
--container-medium: 82rem      /* 1312px */
--container-large:  90rem      /* 1440px */
```

Also observed: flat `176px` section padding, and `7.8vw`. **Nobody reaches 240px of empty space by instinct.** It looks like a mistake while you build it. You only get there by deciding the value in advance and trusting it. Halve it below your primary breakpoint.

---

## SECTION B: PICK YOUR REGISTER

Use the corpus that matches what you are, not the one that looks nicest.

| If you are | Use corpus | Weights | Radius | Ground | Accent | Motion |
|---|---|---|---|---|---|---|
| Property, luxury goods, law, wealth, high-ticket services | **A** | 300 to 400 | 2 to 8px | bone `#f1f0eb` | one muted earth | 0.3s, restrained |
| Creator, influencer, coach, course, personal brand | **C** | 400 to 500 | 15 to 30px | white or deep saturated | one bold hue, high chroma | 0.2s, snappier |
| SaaS, developer tools, technical products | **D** | 500 to 600 | 3px | neutral gray ramp | one brand hue, sparing | 0.1 to 0.16s |
| Local service business, trades, clinics | **A** softened | 400 | 4 to 8px | bone or warm white | one muted hue | 0.3s |
| Anything selling TO businesses, conversion-led | **B** | 500 to 700 | 4 to 8px | white with tinted sections | brand plus state colors | 0.2s, may bounce |

**Rules that hold across every register:**
1. One accent, in three shades. Never five.
2. Separate `--accent` (readable as TEXT) from `--accent-fill` (a BACKGROUND behind dark text). One token cannot do both jobs.
3. Ink is never pure `#000` on pure `#fff`.
4. Gate hover on `(hover: hover) and (pointer: fine)` or it sticks after a tap.
5. Always ship `prefers-reduced-motion`.

---

## SECTION C: WHAT THESE PLATFORMS CHARGE

Read from vendors' own public pages, 22 August 2026. Prices change; verify before deciding.

**Vertical platforms (15 sampled). 13 of 15 publish no price at all**, showing "Book a demo" or "Talk to sales" instead. The four that publish something:

| Published | Model |
|---|---|
| $299.95 / $399.95 / $599.95 per month | tiered, setup fee mentioned separately |
| from $1,299 per month | platform bundle |
| $89 per user per month | per-seat, CRM-led |
| $12k-24k / 24k-48k / 48k-96k / $96k+ | project budget bands in the contact form |

**Creator and personal-brand platforms (15 sampled). Almost all publish openly:**

| Published tiers |
|---|
| $8 / $15 / $35 per month, free tier |
| $30 per month, free tier |
| $42 / $84 / $150 per month |
| $15 to $499 per month |
| $33 / $66 / $99 per month |
| $9 to $39 per month |
| $29 / $79 / $299 per month |
| $17 / $29 / $39 / $159 per month |

**The pattern:** the vertical platforms are roughly three to forty times the price of the general-purpose ones, and the more expensive category is the one that will not tell you the price up front.

**The honest read:** a platform bundling a licensed industry data feed, lead routing and a customer database is selling software, not a website. That can be worth it. But the *design* portion of that invoice is what this kit reproduces, and knowing which part is which is how you price the rest fairly.

---

## SECTION D: FINAL CHECKLIST

Ask the assistant to confirm each, with evidence:

- [ ] Contrast: zero failures, calculated with alpha compositing, in **every** theme
- [ ] `prefers-reduced-motion` block present
- [ ] Hover effects gated on `(hover: hover) and (pointer: fine)`
- [ ] No horizontal scrolling at 390px, 768px and 1440px
- [ ] Nothing hidden: no element left at opacity 0 that should be visible
- [ ] Input borders reach 3:1 against their background
- [ ] Page titles, meta descriptions and structured data unchanged
- [ ] The whole change can be undone by deleting one `<link>` tag
- [ ] Tap targets at least 44px tall
- [ ] Fonts self-hosted or preloaded, so text does not flash

---

## LIMITS AND HONESTY

- All counts are from 51 saved pages on 21 and 22 August 2026 and are that sample's numbers, not universal constants. The **relationships** between corpora are the transferable part.
- Companies measured are deliberately unnamed. They are private businesses illustrating a pattern, not case studies.
- **You can reproduce the design layer completely. You cannot trivially reproduce** a licensed industry data feed, a customer database with years of history, automated follow-up, an on-call team, or a compliance layer. Some invoices are fair.
- **A passing contrast sweep is a floor, not proof of accessibility.** It does not test keyboard operability, screen-reader semantics, focus order, or cognitive load. Get a real audit if the stakes justify it.
- **Measure published presentation values on public pages, and prefer saving them by hand.** If you automate, read the Terms of Service and `robots.txt` first and honor both. Human pace, cache what you take, nothing behind a login or paywall, no personal data about identifiable people. A block or challenge page is an answer, not an obstacle.
- **Do not copy brand identity**: logos, names, photography, written copy, or a distinctive overall look. Take proportions and relationships; build your own brand on top.
- **This is not legal advice and the author is not a lawyer.** The law on automated access varies by jurisdiction. Commercially, at scale, or against a competitor: take legal advice before starting.