# Design from Reference: EigenPal Create your EigenPal account Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation. ## Reference - **Product:** EigenPal - **Category:** Signup - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acad04f34c900e8fc1b4981_6ac5740a9e3792c70ef151e7_richtext-366f3c2c327a4c9eca94.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:** A white signup card sits over a light pixel-grid background with an oversized green brand motif. - **Tone:** Rounded controls, subtle shadows and a warm dark primary action balance the vivid technical-looking backdrop. ### Page composition - **Capture scale:** The source measures 2880 × 1624 image pixels. CSS estimates below assume a 2× capture; device-pixel ratio is unverified. - **Brand placement:** A small EigenPal symbol/wordmark sits at the upper left. - **Background graphic:** A very large green asterisk-like mark, built from small rounded cells, fills most of the left and central canvas. - **Signup panel:** A roughly 400 px CSS wide card sits right of center, with identity/title, provider action, divider, email/password fields and continuation button. - **Lower bands:** Existing-account and authentication-provider attribution occupy two separate pale footer bands beneath the main form. ### Information hierarchy - **Account title:** A small green symbol leads into a bold creation heading and muted welcome line. - **Authentication routes:** Google signup appears first; email/password follow a ruled or divider. - **Primary action:** A dark full-width Continue control closes the form. - **Secondary details:** Sign in and provider attribution are separated below, visually quieter than the main action. - **Background identity:** The oversized green motif establishes brand without adding text. ### Typography - **Family:** A neutral sans serif is visible; exact identity is unverified. - **Title:** Approximately 18–20 px CSS, bold. - **Labels and controls:** Approximately 13–14 px with 18–20 px leading. - **Supporting copy:** Small gray text introduces the form and labels the lower bands. - **Wordmark:** The upper-left brand name is larger and medium weight beside the symbol. ### Colors & surfaces - **Measured foundation:** ICC-aware sRGB sampling yields white #FFFFFF and warm pale #F1EFEB. - **Measured near-whites:** #FBFBFA, #FAF9F8 and #FBFAF9 support the softly varied background. - **Measured accent:** Green #2DB52E appears in the large pixel motif. - **Controls:** Dark warm charcoal fills Continue; fine gray borders and pale surfaces define inputs and footer bands. - **Depth:** A soft broad shadow lifts the card above the patterned canvas. ### Components - **Signup shell:** A white rounded card has approximately 20 px CSS corners and a fine border. - **Provider action:** A full-width outlined button combines the multicolor Google mark and centered label. - **Inputs:** Rounded fields approximately 34 px high have muted placeholders; the password field includes a right-side eye icon. - **Continue:** A dark subtle-gradient button uses white text and a small right-pointing arrow. - **Footer bands:** Thin horizontal rules separate login and provider-attribution rows. - **Pixel motif:** Small evenly spaced rounded squares form a large green symbol with fading intensity near its edges. ### Visual rhythm - **Form cadence:** Labels sit close to fields, while larger gaps distinguish provider, email and password groups. - **Centering:** Symbol, title and introductory copy are centered within the card; field content is left aligned. - **Asymmetry:** The large left-side graphic balances the right-positioned form. - **Texture restraint:** The pale background grid remains low contrast beneath the stronger green motif. ### Responsive - **Evidence boundary:** Only a desktop state is shown; responsive behaviors are recommendations. - **Card priority:** Center the form on narrow screens and reduce or crop the decorative motif. - **Fluid controls:** Keep fields and actions full width within safe gutters. - **Password access:** Preserve the reveal-control target and clear keyboard focus. ### Adaptation guidance - **Branded authentication:** Reuse a restrained form card over a distinctive but low-contrast identity graphic. - **State completeness:** Define validation, loading and password-visibility states separately. - **Accessible controls:** Provide persistent labels, provider text and meaningful eye-control naming. - **Content boundaries:** Authentication attribution is visible interface content, not independent verification of security properties. - **Scale calibration:** Validate the assumed 2× scale before implementing CSS dimensions. 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.