On this page6
Step by step
Pick representative parts
Choose navigation, headings, body text, cards, buttons and a form if there is one. Skip one-off heroes.
Generate a first draft
Run Sitepeel’s Design MD tool on the page, or paste the link into the free DESIGN.md generator.
Check unclear details
Use Detect fonts, Extract colors and Inspect & measure on anything the draft doesn’t settle.
Record evidence per token
Note each value, where you saw it and the viewport. Find a second instance before calling it shared.
Build one section
Build a small section from the reference and note anything it failed to explain.
Rules versus exceptions
A rule is a decision that repeats: type roles, surface colors, spacing between components. A button radius may repeat across navigation and forms while a promo card deliberately uses a different shape.
- Generate and review your first DESIGN.md file
- Turn extracted website colors into reusable color roles
- Identify the font family and typography hierarchy
Evidence template for each token
Fill it in from the page you inspected, then state what you decided to reuse.
## Token evidence
- Role: [for example, primary action background]
- Observed value: [copy the computed value]
- Source: [page URL and element]
- Viewport and state: [width, default/hover/focus]
- Repeated on: [other components checked]
- Decision: [reuse, adapt or keep as an exception]What the reference should cover
- Color roles and readable combinations.
- Type hierarchy and available weights.
- Spacing rules, content widths and alignment.
- Controls, feedback and keyboard focus.
- Selected states and how components handle longer content.
- When columns stack and how navigation changes on narrow screens.
Build, then revise
Fold what your test section taught you into one maintained Markdown file. Sitepeel gives you evidence from the rendered page; your review turns it into a system.
Questions
Can you extract a design system from any website?
You can extract a reference: the colors, type, spacing and components a page shows. The original token names, source components and hidden states aren’t visible from the browser.
How many pages should I sample?
Enough to see which values repeat. Check a value on a second component or page before treating it as a site-wide rule.
