---
name: regards-design
description: Design from real references with regards.design, a searchable library of real website sections (heroes, navigation, feature grids, pricing, footers…) and their screenshots. Use it before designing, building or rethinking a website, a landing page or a section, when committing to an aesthetic direction, when shaping a brand's look on the web or a design system, and whenever web design inspiration or references are wanted (a style or mood, a UI element or pattern, something experimental, what a section says, sites like a named one). Skip it only when the user has fixed the look with a mockup or a design system to follow. Needs the regards.design MCP server, https://mcp.regards.design/mcp.
---

# Design from real references with regards.design

regards.design holds sections of real, well-made websites, each screenshotted and read for its layout,
typography, colour, imagery, texture, motion and how new it is. Search it in plain words, look at the
pixels, widen from what works, and show the user the sections themselves.

## Brief the search like a designer

Say what you want the way you would brief a designer, from a few words to a paragraph: the kind of
section, the look and feeling, what it must show, what to avoid. For example:

- "pricing table with a highlighted plan, not dark"
- "hero with oversized serif type and one product photo"
- "editorial, monochrome, lots of white space"
- "feature grid that breaks the grid", "something experimental with testimonials"
- "navigation like stripe.com but playful" (named sites anchor a direction)

Novelty runs from 1 (template) to 5 (experimental): ask for "experimental", "unusual" or "conventional"
in words. To find sections that literally say something (a headline, "Get started", a product name), use
`contains`: quotes in `q` don't filter. An empty `q` browses the most distinctive sections, or those of
`roles` and `sites` when you set them.

When the direction is open, a few short searches from different angles (layout, type, imagery, motion,
content) find more than one long one. `understood` says how a query was read; `ignore: ["roles"]` drops
a kind of section it read in wrongly.

## Look before you judge

A summary is one line; the design is in the pixels. Open the promising hits with `view_section` and
compare a few before you choose. `context_px` shows the sections around one; `from_px`/`to_px` zoom
into part of it. `get_section` adds the text it shows and where it sits on its page; `page_sections`
shows a whole page top to bottom, for structure and rhythm.

## Widen from what works

`similar_sections` finds sections like the keys you liked, from any site; add `q` to steer it ("like
these but light"). Deep search (`mode: "deep"`, when the account's plan offers it) has a model look at the
top 60 screenshots and reorder them by fit. It takes about a minute and uses one Deep credit: worth it for
nuanced briefs, "not X", and sites like a named one; Instant suits everything else.

## Whole pages, brands and design systems

- A landing page or a site: settle the mood first with a few searches for the overall feeling, then search
  each section you need in that mood (hero, features, social proof, pricing, footer). `page_sections` on a
  page you like shows its order and rhythm to borrow.
- A brand's look on the web: search for the feeling and the audience ("quiet, architectural, lots of
  white", "playful fintech"), view the strongest, and name what they share in type, colour, imagery and
  layout before you choose.
- A design system: gather references for each part (type pairings and scales, colour, spacing, buttons,
  cards, navigation, forms) across sites that feel right, derive your tokens and components from what they
  have in common, and keep the keys you drew on as the system's references.

## Show what you found

Show the sections, not only their names. Link each to its page on regards.design (`links.app`: its
screenshots, the page around it and a link to the live site) rather than to a screenshot file, and add
`links.live`, the live page near the section, when the user wants to see it running. Say in a line why each
fits the brief. When you design or build from a reference, take the idea, not the copy, brand or assets.

## Good to know

- Keys look like "linear/03" (page/section); a page id is the part before the slash.
- Pass a search's `searchId` as `search_id` to the tools you use on its results: it tells regards.design
  which results helped.
- Screenshots are from regards.design's capture of each page (`page.shotAt`, 1440×900), not from today's
  live page, which may have changed.
- Instant searches come with the plan of the account that connected the agent, and Deep ones use its
  credits; searches are rate-limited per minute, viewing and reading sections are free.