← Previous20 / 24Next →

Guru Invite Team Members

GuruKnowledge Base Software

Design with AI

Create a new design inspired by Guru Invite Team Members, 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,346 words

# Design from Reference: Guru Invite Team Members

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

## Reference

- **Product:** Guru
- **Category:** Invite Team Members
- **Screenshot:** attached to this message (also available at https://media.saasframe.io/o/d19e49eeac35ac80dadb.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:** A team-administration screen uses a dark global navigation bar, white settings sidebar, bright blue active states, and a sparse member list.
- **Tone:** Compact controls and flat surfaces give it a practical administrative feel. A purple announcement strip adds a separate promotional layer.
- **Observed scale:** The source measures 1440 × 821 pixels. Sizes below refer to image pixels; CSS estimates assume an unverified 1× capture.
- **Capture scope:** The visible screen is the members/settings list with an Add Member(s) action; no invitation dialog is open.

### Page composition
- **Announcement:** A slim full-width purple strip promotes a browser extension with centered white text and an underlined link.
- **Global bar:** A dark horizontal bar contains product navigation, a wide card-search field, plus/help controls, and an avatar.
- **Settings sidebar:** A roughly 250-pixel left rail begins with team name, then grouped Team Settings, Tools, and Integrations links.
- **Main tabs:** Members, Groups, Collections, and Admins form a horizontal row above the content. Members is active with a blue underline and count.
- **Toolbar:** A name/email search field sits beside a sort selector and direction icon. Add Member(s) and Export All Users align to the far right.
- **Member row:** One visible row contains a circular initial avatar, name/email block, two role badges, and a gear control.
- **Lower area:** Most of the workspace beneath the single row is empty white.

### Information hierarchy
- **Administrative context:** The team name and selected Users & Collections sidebar item establish the settings area.
- **List state:** The active Members tab and count indicate one visible member; other tabs show their own small counts where present.
- **User identity:** A bold name is the primary row label, with a lighter email beneath.
- **Role information:** Small Admins and Experts pills sit at the right of the row.
- **Creation versus export:** Add Member(s) is blue; Export All Users is dark and paired with an export icon.
- **State limit:** No invited-user status, role menu, export result, or add-member form is visible.
- **Privacy:** Captured name, email, and team label are contextual account data and should not be reused as design content.

### Typography
- **Typeface appearance:** A neutral sans-serif is used throughout. Exact family is unverified.
- **Global navigation:** Around 14 pixels, medium, on dark background.
- **Sidebar roles:** Team name is approximately 20 pixels and bold; group labels are around 11–12 pixels, uppercase, and muted.
- **Tabs and toolbar:** Around 13–14 pixels, with active labels emphasized by blue and weight.
- **Member row:** Name is around 16 pixels and bold; email around 13 pixels and pale gray.
- **Badges:** Approximately 11–12 pixels, compact, with regular/medium weight.

### Colors & surfaces
- **Measured base:** #FFFFFF dominates the settings and list areas.
- **Measured dark bar:** #242C38 supplies the global navigation surface.
- **Measured purple:** #7549E6 forms the announcement strip.
- **Measured search neutral:** #525A66 appears in the dark-bar search field.
- **Measured pale tones:** #F5F7FA and #CED2D9 support badges, borders, and quiet controls.
- **Accent:** Bright blue marks the active settings item, Members underline, Add Member(s), and sort direction. Mint outlines the global plus control.
- **Depth:** The page is mostly flat, with fine gray rules and a subtle shadow beneath the global bar.

### Components
- **Global search:** A wide dark-gray field contains a white prompt and small filter symbol.
- **Global utilities:** A mint-outlined circular plus, boxed help symbol, divider, and blue initial avatar sit at right.
- **Sidebar groups:** Icon-label links are separated by uppercase section headings. The active item has blue text/icon and a narrow blue indicator at the far-left edge.
- **Tab strip:** Four text tabs sit above a fine horizontal rule; the selected tab has a short blue underline.
- **Member search:** A compact white outlined input includes a magnifying glass and muted name/email prompt.
- **Sort:** A labeled First Name dropdown sits beside an up/down arrow treatment.
- **Add action:** A blue plus-in-circle icon precedes Add Member(s).
- **Export action:** An outlined export symbol precedes Export All Users.
- **Member row:** A roughly 40-pixel blue circular avatar sits beside two text lines; small role pills and a gear align to the right.
- **Unshown states:** Search results, sorting changes, selected user, settings menu, and invitation workflow are not visible.

### Visual rhythm
- **Dense header:** Announcement and global navigation create two compact top bands.
- **Sidebar cadence:** Regular row spacing and separated groups organize a long settings list.
- **Horizontal alignment:** Tabs, toolbar, and member row share the main content’s left boundary.
- **Sparse list:** A single row and large lower whitespace emphasize the current small team state.
- **Accent restraint:** Blue identifies navigation and actions while most controls remain neutral.

### Responsive
- **Evidence limit:** Only a desktop administration screen is captured. Mobile and sticky behavior are unverified.
- **Recommended navigation:** Collapse global/settings navigation into accessible menus on narrow screens.
- **Recommended toolbar:** Stack search and sort, and group add/export actions without shrinking targets.
- **Recommended member row:** Wrap role badges and actions beneath identity details when space is limited.
- **Recommended accessibility:** Provide clear focus, current-page/tab states, labeled icon controls, and meaningful row actions.

### Adaptation guidance
- **Preserve administration levels:** Keep global product navigation, team settings, member tabs, and row actions distinct.
- **Define invitation separately:** The Add Member(s) entry point is visible, but its form and behavior need independent specification.
- **Use safe examples:** Replace account identifiers and role data with approved sample or live state.
- **Support data variation:** Design for long names/emails, multiple roles, pending invitations, empty results, and larger lists.
- **Build from measured tokens:** White content, dark global bar, purple announcement, blue selection, and fine gray borders provide the core system.
- **Validate permissions:** Role editing and export availability should follow actual product authorization, not inferred screenshot behavior.

## 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.