Reopen References From Your Website Mood Board

You can reopen references from a website mood board by searching your saved library with the detail you remember, then narrowing the results by page structure, typography, color, or visual style. If you only remember the overall feeling, start with a description such as "dark SaaS landing page with a grid hero and restrained CTA" rather than a site name.

Start with the detail you remember

Use the most concrete phrase available:

• Layout: "landing page with oversized hero, proof section, and feature grid"
• Color: "dark background with bright green accents and soft gradients"
• Typography: "large geometric sans headings with compact body text"
• Component: "pricing cards with rounded borders and a comparison table"
• Visual treatment: "product UI shown inside a floating browser frame"
• Page area: "mobile navigation and the first screen of a marketing page"

Search more than once when your first memory is vague. Try a broad visual description first, then add one detail such as "large type," "thin borders," or "three-column grid." This gives you a practical way to recover a reference even when you do not remember its URL or title.

Compare the examples before borrowing a pattern

Open the examples below and compare the first screen before copying a direction. Vercel AI is a useful reference for a dark grid, restrained CTA, and composed visuals. Braintrust shows a different approach built around oversized proof and generous whitespace. json-render makes the product itself the hero through a live code-and-render demonstration. AI SDK uses a compact feature grid and concise installation instructions.

Treat these as separate decisions, not a single style to copy. You might borrow the spacing from Braintrust, the product demonstration idea from json-render, and the restrained call to action from Vercel AI while keeping your own colors and content.

Reopen and check the full page

Once you find a likely match, check more than the thumbnail. Review:

1. The first screen and the order of major sections.
2. Heading sizes, body text, weights, and line spacing.
3. Background colors, accent colors, borders, radii, and shadows.
4. How images, product screens, and videos are cropped.
5. Whether the design changes on smaller viewports.
6. The interaction state that made the reference useful, such as an open menu or visible demo.

This keeps a mood board from becoming a collection of attractive screenshots with no usable design notes. Save a short note beside each reference explaining the specific idea you want to revisit, such as "use the proof section spacing" or "study the product demo framing."

Build a small decision list

For each reopened reference, record four things: keep, adapt, avoid, and test. For example:

• Keep: generous whitespace around proof.
• Adapt: use the live demo idea with your own product flow.
• Avoid: copying a dark palette when it reduces text contrast.
• Test: whether the compact feature grid remains readable on mobile.

A useful mood board usually contains three to six references with different jobs. One can guide layout, one typography, one product presentation, and one detail such as cards or navigation. If every reference suggests the same treatment, you may be collecting variations instead of exploring options.

Use this in your AI agent

> Search my saved website references for a dark SaaS landing page with a grid-based hero, restrained CTA, generous whitespace, and a live product demonstration. Reopen the closest matches, compare their first-screen layout, typography, colors, and responsive behavior, then summarize which pattern best fits my project and what I should adapt rather than copy.

Install Fudge for your AI agent to reopen and compare saved website references from your project library.

Describe the mood with two or three visible traits, then add the page type. For example, try "calm editorial portfolio with warm neutrals and generous margins" or "bold startup homepage with oversized type, bright accents, and animated product UI."

Avoid abstract phrases on their own, such as "premium" or "modern." Pair them with things you could point to on the page:

• "premium dark page with thin borders and muted gold accents"
• "playful homepage with rounded cards, oversized headings, and bright illustrations"
• "technical documentation site with compact type, dense navigation, and code panels"

If the results are too broad, add one structural clue: hero, pricing section, navigation, testimonial block, footer, or mobile menu. If they are too narrow, remove the color and keep the layout. You can also search separately for typography or color when the page itself is hard to identify. The goal is to turn a feeling into observable details that can lead you back to the right reference.

Write a short design note that explains why the reference matters and where you might use the idea. A practical template is:

• Reference: the saved site or page title.
• Useful pattern: one specific choice, such as a live product demo or oversized proof section.
• Evidence: the visible details that make the pattern work, such as spacing, type scale, contrast, or crop.
• Adaptation: how your content, product, and audience would change it.
• Test: the screen size or content variation you still need to check.

For example: "Use the product-as-hero approach, but show our onboarding flow instead of code. Keep the demo prominent, shorten the supporting copy, and test whether the controls remain clear on a narrow screen."

This turns a mood board into an active reference list. When you reopen it later, you can quickly separate ideas to reuse from details that only worked because of the original brand, content, or page state.

Related questions

• Save Websites to Your Collection of Captured Website Designs
• Reopen References From Your Saved Website Reference Library
• Save Websites to a Design Inspiration Collection
• Save Websites to a Project Website Library