Reveal Join company

# Design from Reference: Reveal Join company Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation. ## Reference - **Product:** Reveal - **Category:** Account Setup - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acbbe3c476aea3982e3fab8_6acbbd6f3b6b24eada548f2d_cms-013d3b312a35a4e03df10692.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 - **Style:** Split onboarding screen combining dark customer proof with a warm cream account-confirmation area. - **Character:** Violet branding and a gradient join action add emphasis to a restrained form. - **Capture:** The image measures 1440 × 789 pixels. CSS estimates assume approximately 1:1 capture scale; browser scale and font identity are unverified. ### Page composition - **Left region:** A 600-pixel-wide dark panel contains a small brand mark at upper left, centered social-proof statement and four customer-logo tiles. - **Right region:** A cream background fills the remaining width. - **Join card:** A centered light panel approximately 440 × 427 pixels begins near x800, y181. - **Card sequence:** Personalized greeting, company question, portrait, company-name row, website row, agreement copy and a wide join action. - **Whitespace:** Large empty margins surround both the proof block and join card. ### Information hierarchy - **Trust statement:** A bold multi-line message emphasizes the size of the business community. - **Customer proof:** Four recognizable logos support that statement in a two-by-two grid. - **Personal context:** The greeting and portrait identify the user before company details. - **Company identity:** Two rounded rows display the organization and its website. - **Agreement:** Small legal copy and violet links sit immediately above the action. - **Primary action:** A wide violet-gradient pill combines agreement and company joining. - **State scope:** No company search, alternate selection or successful-join result is shown. ### Typography - **Family:** A compact sans-serif is visible; exact identity is unverified. - **Trust statement:** Approximately 24-pixel CSS size, bold, with 31-pixel line height. - **Greeting:** Approximately 24 pixels and bold. - **Question and details:** Approximately 12–13 pixels with 18-pixel line height. - **Agreement:** Approximately 12 pixels, centered across two lines. - **Action:** Approximately 12–13 pixels, medium weight, white and centered. ### Colors & surfaces - **Measured dark:** #0C151B fills the proof panel; #141C26 supports logo tiles. - **Measured cream:** #F6F2E8 fills the right background. - **Measured card:** Warm near-white #FAFAF6 fills the join panel. - **Measured boundary:** #E1DEDA supports fine outlines. - **Violet samples:** #5151C2 and related violet tones appear in the action gradient; bright violet links provide smaller emphasis. - **Text:** Warm white appears on the dark side; deep blue-black supports the form. - **Depth:** Flat surface contrast defines the split; little shadow is visible. ### Components - **Brand:** A violet line symbol and uppercase wordmark sit near the upper-left corner. - **Logo tiles:** Four dark rounded rectangles, approximately 216 × 79 pixels, hold white customer marks. - **Join card:** A light rounded rectangle with roughly 8-pixel corners and 40-pixel horizontal inset. - **Portrait:** A small rounded-square image, approximately 50 pixels, is centered above company details. - **Company rows:** Two approximately 360 × 36-pixel pill-like outlined fields/summary rows display organization and URL. - **Agreement links:** Terms and privacy references are violet inline text. - **Join action:** Approximately 360 × 36 pixels, fully rounded, with a left-to-right violet gradient. - **State scope:** The rows show populated company data, but editability and validation are not established by the screenshot. ### Visual rhythm - **Split balance:** The dark proof region occupies slightly less than half the viewport. - **Proof spacing:** The centered statement has a large gap before the logo grid. - **Card alignment:** Greeting, portrait, legal copy and action share a central axis. - **Input cadence:** The two compact rows are closely stacked. - **Action separation:** A larger gap distinguishes company details from agreement and submission. ### Responsive - **Recommendation — split:** Stack or reduce the proof region on narrow screens, prioritizing the join task. - **Recommendation — card:** Use fluid width with comfortable side gutters. - **Recommendation — logos:** Wrap customer marks without reducing them below readable sizes. - **Recommendation — legal copy:** Allow links to wrap while retaining clear association with the join action. - **Recommendation — identity:** Keep organization and website values readable. No mobile layout is evidenced. ### Adaptation guidance - **Preserve confirmation context:** Show user identity and organization details before joining. - **Keep proof separate:** Maintain a distinct trust region rather than mixing logos into the form. - **Reuse color contrast:** Pair dark proof, cream canvas, light card and violet primary action. - **Make agreement clear:** Keep legal references immediately above the explicit join control. - **Define missing states:** Company search/editing, validation and join success require separate design. - **Avoid copying personal details:** Treat the displayed portrait, company and URL as example data. 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.