← Previous7 / 18Next →

Plausible Analytics Select Google Search Console Property

Plausible AnalyticsGoogle Analytics alternative

Design with AI

Create a new design inspired by Plausible Analytics Select Google Search Console Property, 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,061 words

# Design from Reference: Plausible Analytics Select Google Search Console Property

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

## Reference

- **Product:** Plausible Analytics
- **Category:** Integrations
- **Screenshot:** attached to this message (also available at https://media.saasframe.io/v/dae1c8c36daef6f99a05-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:** A dark settings page uses navy surfaces, light text and a compact integration form, followed by a substantial informational footer.
- **Accent hierarchy:** Purple links and Save action contrast with a pale trial badge and red unlink label.

### Page composition
- **Capture scale:** The source measures 2880 × 2382 image pixels. CSS estimates below assume a 2× capture; device-pixel ratio is unverified.
- **Header:** A centered roughly 1090 px CSS container places the Plausible identity left and trial/docs/account utilities right.
- **Settings heading:** A back link and large site-settings title precede a thin full-width divider.
- **Main body:** A narrow left settings menu sits beside a roughly 810 px wide integration panel.
- **Panel sequence:** Integration heading/description, linked-account row, property-selection guidance, dropdown and Save button form a single left-aligned stack.
- **Footer:** A lighter navy full-width band contains a brand/about block and four columns of links.

### Information hierarchy
- **Page identity:** The site-settings title is the strongest heading.
- **Active section:** Search Console is selected with a darker rounded navigation row.
- **Integration state:** The linked-account row shows an existing connection and a separate outlined unlink control.
- **Pending choice:** The property dropdown still displays a choose-property placeholder; Save sits beneath it.
- **Supporting information:** Setup guidance includes a purple inline link and a small information icon at the panel's upper right.

### Typography
- **Family:** A neutral sans serif is visible throughout; exact identity is unverified.
- **Page title:** Approximately 30 px CSS, bold, with around 38 px leading.
- **Panel heading:** Approximately 18 px and medium weight.
- **Body and fields:** Approximately 14–16 px with 20–24 px line height. Linked account text uses local bold emphasis.
- **Footer labels:** Small uppercase category headings use increased tracking above regular link lists.

### Colors & surfaces
- **Measured layers:** ICC-aware sRGB sampling yields dark #18202D for the main page and #1C2938 for panel/footer surfaces.
- **Measured text:** Light #F3F4F6 and #D0D5DB contrast with muted #99A3B0.
- **Measured accent:** Purple #5145ED fills the Save button and supports links.
- **Measured badge:** Pale cream #FFF1C2 highlights the trial-status pill.
- **State contrast:** The unlink label is red within a neutral outlined button; the selected menu row uses a deeper navy.

### Components
- **Settings menu:** Nine stacked text rows use consistent padding; the active row has a dark fill and small radius.
- **Integration panel:** A subtly rounded navy rectangle uses approximately 24 px CSS padding, without a prominent shadow.
- **Unlink control:** A compact outlined rectangle sits inline beside the linked-account summary.
- **Property select:** A roughly 320 × 38 px CSS field has a gray border, small radius and right-side chevron.
- **Save button:** A compact purple control uses white text and approximately 6 px corners.
- **Footer columns:** Regularly spaced links align below uppercase labels; a small brand symbol precedes the footer identity.

### Visual rhythm
- **Panel spacing:** Larger gaps separate connection status, selection guidance and the dropdown/action group.
- **Alignment:** Panel title, paragraphs, select and Save share one left edge.
- **Navigation cadence:** Even menu-row spacing creates a stable vertical reference beside the form.
- **Footer transition:** A broad gap and surface change distinguish product settings from the site's informational links.

### Responsive
- **Evidence boundary:** Only a desktop state is shown; responsive behaviors are recommendations.
- **Menu adaptation:** Move settings navigation into a compact selector or drawer on narrow screens.
- **Panel flow:** Allow linked-account text and unlink control to wrap; make the property field fluid.
- **Footer:** Stack link groups and retain readable spacing rather than compressing five columns.

### Adaptation guidance
- **Integration pattern:** Reuse explicit connection status, setup guidance, resource selection and Save as separate stages.
- **Destructive separation:** Keep unlink visually distinct from the primary save action and label it clearly.
- **Accessible fields:** Provide a persistent dropdown label and announce validation/loading states.
- **State boundaries:** The capture shows a connected account with no property selected; no save or unlink result is verified.
- **Data and scale:** Replace account/site details with application data and validate the assumed 2× capture scale before implementation.

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