← Previous5 / 12Next →

Vidzflow Profile Settings

VidzflowVideo hosting for Webflow

Design with AI

Create a new design inspired by Vidzflow Profile Settings, 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,216 words

# Design from Reference: Vidzflow Profile Settings

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

## Reference

- **Product:** Vidzflow
- **Category:** Settings
- **Screenshot:** attached to this message (also available at https://media.saasframe.io/v/50ec2bb1e7e2904d6211-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

- **Style:** Spacious account-settings page with a dark navy header, white canvas and vivid blue controls.
- **Character:** Rounded fields, soft input shadows and pale secondary cards soften a practical two-column form layout.
- **Capture:** The screenshot measures 2880 × 2530 pixels. CSS estimates assume a 2× capture, equivalent to approximately 1440 × 1265 CSS pixels; actual scale and font identity are unverified.

### Page composition

- **Header:** A 64-CSS-pixel navy bar contains the logo left and affiliate/account controls right.
- **Page introduction:** A large profile heading and short explanation sit in a centered approximately 1128-pixel container, followed by a thin rule.
- **Two-column forms:** Two approximately 500-pixel columns are separated by a broad gutter.
- **Left column:** Profile name/email fields and Save action lead into an API-key explanation, copy field and regeneration action.
- **Right column:** Three password fields and a Save action sit above a pale password-reset card.
- **Lower left:** A pale account-deletion card includes consequence text and an outlined action.
- **Whitespace:** The lower right remains mostly empty, preserving separation between the independent settings groups.

### Information hierarchy

- **Page title:** Profile is the strongest heading, followed by medium-size section headings.
- **Primary forms:** Profile information and password update have equal top-level status across the two columns.
- **Technical section:** The API-key module explains its extension role and regeneration consequences before the field/action.
- **Recovery:** Password reset is visually enclosed as a secondary alternative to the update form.
- **Destructive option:** Account deletion is isolated in its own lower card with explanatory copy.
- **Action hierarchy:** Filled blue Save and regeneration actions are stronger than outlined reset/delete controls.

### Typography

- **Family:** A clean sans-serif with rounded forms is visible; exact font identity is unverified.
- **Page heading:** Approximately 34-pixel CSS size, semibold, with around 42-pixel line height.
- **Section headings:** Approximately 26 pixels and semibold.
- **Explanatory copy:** Approximately 18 pixels with 28-pixel line height.
- **Field labels:** Approximately 12 pixels, regular, in muted slate.
- **Input values and buttons:** Approximately 16 pixels.
- **Deletion copy:** Slightly smaller than the main explanations, around 16 pixels with 24-pixel line height.

### Colors & surfaces

- **Measured header/text navy:** #1B293A appears in the header and dark heading family.
- **Measured canvas:** White #FFFFFF fills the main area.
- **Measured secondary cards:** Near-white #FAFAFA distinguishes reset and deletion modules.
- **Measured action:** Blue #4A5FFF fills primary controls.
- **Measured field boundaries:** #DDE1EE supports pale input outlines.
- **Measured text:** Black #000000 and muted slate shades distinguish body and secondary labels.
- **Depth:** Inputs use subtle lower shadows; the larger secondary cards remain mostly flat.

### Components

- **Account menu:** An outlined dark-header dropdown shows the current account label and down chevron.
- **Profile fields:** Two approximately 500 × 44 CSS-pixel rounded inputs display name and email values.
- **Password fields:** Three matching inputs are empty in the capture.
- **Save controls:** Small blue rounded buttons, approximately 69 × 41 pixels, sit beneath each form.
- **API field:** A matching wide field appears blank, with a compact blue copy control at its right.
- **Regeneration:** A blue rounded button below the API field provides a separate technical action.
- **Reset card:** A pale rounded panel with roughly 24-pixel padding contains a heading, explanatory paragraph and outlined reset button.
- **Deletion card:** A similar panel contains consequence guidance and a neutral outlined deletion action.
- **State scope:** No success, validation, key value, confirmation dialog or expanded account menu is shown.

### Visual rhythm

- **Container alignment:** Introduction, left forms and lower deletion card share a stable left edge around x156 CSS pixels.
- **Column gap:** Approximately 128 pixels separate the paired 500-pixel columns.
- **Field cadence:** Labels sit closely above inputs, with roughly 28-pixel breaks between field groups.
- **Section spacing:** Larger 64–72-pixel breaks separate profile, API and deletion modules.
- **Card insets:** Secondary panels use consistent 24-pixel padding and roughly 16-pixel corners.
- **Independent flow:** Unequal column heights reflect separate tasks rather than a single continuous form.

### Responsive

- **Recommendation — columns:** Stack profile, password, API, recovery and deletion sections in a deliberate task order.
- **Recommendation — fields:** Make inputs fluid while retaining label/value readability.
- **Recommendation — header:** Collapse affiliate/account utilities without crowding the logo.
- **Recommendation — actions:** Keep each Save or regeneration button attached to its own section.
- **Recommendation — copy:** Allow long API-related explanations to wrap without excessive line length. No mobile layout is evidenced.

### Adaptation guidance

- **Preserve task separation:** Keep profile editing, password update, key management, recovery and deletion independent.
- **Reuse form tokens:** Standardize field height, rounded corners, pale outlines, shadows and blue action styling.
- **Keep consequences adjacent:** Retain regeneration and deletion explanations near their controls.
- **Make API state explicit:** A blank-looking key field should have a deliberate loading, hidden or unavailable state in implementation.
- **Define feedback separately:** Add validation, save confirmation, copy feedback and destructive confirmation beyond the captured default state.
- **Avoid copying personal data:** Treat displayed profile values as example content rather than reusable design details.

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