← Previous8 / 14Next →

Sandhill Markets Auctions Onboarding

Sandhill MarketsRobinhood for Private Markets

Design with AI

Create a new design inspired by Sandhill Markets Auctions Onboarding, with your own content.

1Content

2Fidelity to the reference

Keeps its visual language, rearranges freely around your content.

3Your brand Optional

Use the reference style

Brand nameColorsFontsGuidelines

4Output

Prompt 1,001 words

# Design from Reference: Sandhill Markets Auctions Onboarding

Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation.

## Reference

- **Product:** Sandhill Markets
- **Category:** User Onboarding
- **Screenshot:** attached to this message (also available at https://media.saasframe.io/v/e17b7412ee836efe23fe-1600.webp)

Analyze the attached screenshot first. If no image is attached, open the screenshot link; if neither is accessible, ask for it rather than guessing.

## Visual Design Context

### Overall aesthetic
- **Character:** Focused auction onboarding modal with a near-white surface, serif headline and vivid lime progression accent.
- **Layering:** A gray dimmer subdues the underlying auction interface while leaving its layout recognizable.
- **Scale:** The source image is 5760 × 3260 px. Dimensions below estimate a 1440 × 815 CSS layout at 4× scale; device ratio and zoom are unverified.

### Page composition
- **Modal:** A roughly 670 × 605 CSS px centered panel has large rounded corners and a soft shadow.
- **Header:** Brand mark sits left, a small help sentence/link beside it and a close X at the upper right.
- **Instruction stack:** A small lime pill precedes a centered serif heading and two-line explanation.
- **Example:** Two small numeric controls show price and quantity, with multiplication and total arranged on one line.
- **Footer:** A wide lime Next button sits above a four-dot connected progress indicator.
- **Background:** Auction title, winning-bid list, bid form and activity remain dimmed; no bid is placed.

### Information hierarchy
- **Lesson:** The headline introduces setting price and quantity; a small pill distinguishes this auction model.
- **Explanation:** Supporting text states that both values can be adjusted.
- **Example calculation:** Labels above the two controls and a computed total illustrate the relationship.
- **Progress:** The first of four dots is dark; later dots are gray. Next is the clear primary action.
- **State:** This is an instructional first slide, not a completed auction transaction.

### Typography
- **Families:** An editorial serif heading contrasts with neutral sans-serif UI; exact identities are unverified.
- **Heading:** Approximately 30–32 CSS px, regular-to-medium, centered.
- **Body:** Around 16 px with 30 px leading in muted gray.
- **Controls:** Numeric labels/values and button text are about 14–16 px.
- **Small roles:** Help copy and lime pill text are roughly 12–13 px.

### Colors & surfaces
- **Measured modal:** ICC-aware sRGB sampling yields #FAFAFA as the dominant light surface.
- **Measured overlay:** #828282 and #858585 dominate dimmed background areas; these are composite pixels.
- **Measured accent:** Lime #C2FF4E marks progression and the small instructional pill.
- **Measured foreground:** #0A0A0A is a strong dark tone; #757B7C appears in muted details.
- **Depth:** White/light controls have fine gray outlines; the modal shadow separates it from the dimmer.

### Components
- **Modal shell:** Large approximately 24 px corners and generous padding frame a sparse center.
- **Lime pill:** Small fully rounded badge centered above the title.
- **Calculation:** Two compact rounded white input-like boxes display example values, separated by a multiplication symbol and followed by an equals/total label.
- **Next action:** Approximately 220 × 40 CSS px lime rectangle with small rounded corners and dark text.
- **Stepper:** Four circles connect through a thin gray line, with a larger dark first marker.
- **Close/help:** A plain X and underlined help link provide secondary exits.

### Visual rhythm
- **Center axis:** Badge, title, explanation, calculation, action and progress share a centered stack.
- **Whitespace:** Large vertical gaps isolate the calculation from the introduction and button.
- **Header density:** Compact brand/help controls contrast with the airy lesson body.
- **Overlay focus:** Background data recedes through dimming without being reproduced in the modal.

### Responsive
- **Evidence limit:** Only desktop is shown; recommendations follow.
- **Modal:** Constrain width and allow scrolling on short screens.
- **Calculation:** Wrap labels/values without losing the price-times-quantity relationship.
- **Controls:** Keep Next and close reachable with adequate touch targets.

### Adaptation guidance
- **Reusable pattern:** Explain one unfamiliar interaction through a short lesson, simple numeric example and explicit progression.
- **State clarity:** Keep instructional examples separate from real transaction inputs.
- **Accessibility:** Label the dialog, announce slide progress and trap/restore focus.
- **Content truth:** Do not imply a bid or payment occurred from this onboarding view.

## Content

**Instructions:**

Generate realistic example content that fits the selected design reference.

Create appropriate headlines, descriptions, labels, buttons, and supporting copy based on the type of interface being designed.

If a product or business description is provided, use it to guide the content.

Otherwise, invent a plausible fictional SaaS product appropriate for the reference.

Keep the content concise, coherent, and visually balanced.

Do not present fictional statistics, customer names, or testimonials as verified facts.

## Design Direction

**Instructions:**

Use the reference screenshot as the main source of visual inspiration rather than a strict layout template.

Preserve its most distinctive design characteristics, such as typography, visual rhythm, color relationships, component treatments, and overall aesthetic.

Feel free to modify section arrangements, proportions, spacing, and individual components to better suit my content.

Introduce original design decisions where they improve usability, composition, or brand consistency.

The result should clearly reflect the reference's visual language without looking like a direct reproduction.

Follow the visual identity of the reference design.

Use its typography, color palette, component styling, and overall aesthetic as the primary design direction.

Do not introduce an unrelated visual identity.

## Output

**Instructions:**

Generate a high-fidelity visual mockup of the requested interface.

Present the design as a polished, realistic website or product UI screenshot.

Prioritize visual composition, typography, spacing, colors, alignment, and component details.

Use the available image-generation or visual-design capabilities.

Do not replace the mockup with source code, a written design specification, or a textual description.

If direct visual generation is unavailable, clearly explain the limitation.

## Constraints

- Use the actual screenshot as the primary visual reference.
- Preserve essential messaging and factual accuracy.
- Prioritize visual quality and consistency.
- Do not invent unsupported product claims.
- Adapt structure and copy length for visual balance.

Reference imageAttach it to your message: assistants can’t open image links.

Build it in

Opening a tool copies the screenshot so you can paste it with your prompt.