Plausible Analytics Signup

# Design from Reference: Plausible Analytics Signup 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:** Signup - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acadb6c494a081980ea076d_6acada86a2ad6b7cce16de3e_cms-ed705ed9825e020fb57d238f.webp Analyze the screenshot first. If inaccessible, request it rather than guessing. ## Content {{content.instructions}} {{content.data}} Preserve essential messaging and factual accuracy. Adapt structure and copy length for visual balance; never invent product claims. ## Visual Design ### Overall aesthetic - **Character:** Straightforward signup screen combining a compact registration card with a visible setup checklist. ### Page composition - **Canvas:** 2880 × 1808 screenshot pixels. Centered brand and trial introduction sit above a white form card, with a four-step vertical progress list to its right. ### Information hierarchy - **Sequence:** Trial headline leads to personal details, password creation, captcha, primary signup action, and existing-account login. Register is the active checklist step. ### Typography - **Scale:** Estimated CSS sizes at an assumed 2× capture scale: headline 30–32 px bold, subtitle and card heading 20 px, labels 14 px, helper copy 12 px. Sans serif family unverified. ### Colors & surfaces - **Palette:** Sampled sRGB page #F3F4F6, card #FFFFFF, subtle surface #FAFAFA, violet action #5145ED, dark text #1C2938, and borders #D0D5DB. ### Components - **Card:** Approximately 448 CSS px wide with 32 px padding, restrained shadow, and roughly 4 px corners. - **Controls:** Full name, email, password, and confirmation inputs around 38 px high; captcha below. Full-width violet trial button includes a right arrow. ### Visual rhythm - **Spacing:** Consistent label-input-helper groups provide a dense but legible form; the detached checklist adds orientation without interrupting entry. ### Responsive - **Adaptation:** Mobile is not visible. Collapse the checklist above the card, use 20–24 px side padding, and retain full-width controls. ### Adaptation guidance - **Transfer:** Keep the card/checklist relationship and violet emphasis. Replace trial terms, password requirements, and setup steps with verified product requirements. Use this context to reproduce the reference's visual language: layout, typography, colors, spacing, borders, radii, and distinctive elements. The screenshot takes priority if descriptions conflict. ## Direction {{preferences.fidelityInstructions}} ## Output {{output.instructions}} Deliver a polished, cohesive design with precise alignment, hierarchy, and spacing. Produce the requested visual artifact, not just a description. If unsupported, explain the limitation.