# Design from Reference: Folk Grant Access To Google 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:** Folk - **Category:** Empty - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acbb9f0d37e66e942ffba87_6acb70813156cd8dbc479f97_cms-cb5fcaeaabc2f1437263f993.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 CRM connection page is dimmed beneath a white permission-guidance modal, using black text, blue links and green check imagery. - **Evidence:** The screenshot is 1440 × 821 pixels. Approximate CSS sizes assume an unverified 1× capture density. ### Page composition - **Background:** A roughly 240-pixel settings sidebar sits beside a Google-account connection page. - **Modal:** A centered approximately 576 × 658-pixel white panel contains a title, large permission illustration, explanation, three data-category labels, help link and primary action. - **Utilities:** Onboarding and chat controls remain visible at the lower right beneath the dimmed backdrop. ### Information hierarchy - **Task title:** Grant access to set up your CRM data is the modal's strongest text. - **Illustration:** Seven gray permission lines and check circles dominate the middle, with the lower four checks green. - **Next action:** A short explanatory sentence and category icons precede the black Synchronise my data button. ### Typography - **Title:** Approximately 24 pixels semibold, centered. - **Supporting content:** Around 13–14 pixels with 20-pixel leading; the primary button uses compact bold white text. - **Identity:** A neutral sans-serif is visible, but its family is unverified. ### Colors & surfaces - **Measured composite:** ICC-to-sRGB sampling identifies #ACAEB0 as the dominant dimmed backdrop, #FFFFFF as the modal and #F4F5F5 as illustration surface. - **Measured support:** #C2C3C4 supplies gray illustration lines/checks; #ABADAF and #A0A2A5 occur in dimmed regions. - **Accents:** Green check circles contrast with gray rows; blue marks help links and black fills the primary action. - **Depth:** The modal has roughly 8-pixel radii and a soft shadow. ### Components - **Permission diagram:** A large pale rounded rectangle contains seven horizontal placeholder-like lines with right-aligned circular checks and a small pointer-hand drawing. - **Data labels:** Contacts, Emails and Calendar events appear in a compact centered icon-and-label row. - **Action:** A small black rounded button sits below the blue explanatory link. - **Background settings:** Icon-and-label navigation shows Accounts selected; the connection row has a plus affordance. ### Visual rhythm - **Centering:** Modal title, illustration, explanatory content and action align around one vertical axis. - **Spacing:** The illustration has generous internal row cadence; supporting controls below are more tightly grouped. - **Focus:** The large gray overlay reduces competing background contrast. ### Responsive - **Observed scope:** One desktop modal state is visible; the actual provider authorization screen is not shown. - **Recommended layout:** Fit the modal within padded viewport bounds, allow vertical scrolling and scale the illustration without shrinking explanatory text. - **Recommended access:** Manage focus within the modal and provide a clear dismiss/back path. ### Adaptation guidance - **Guidance pattern:** Explain connection scope before handing off to provider authorization. - **Evidence limit:** The diagram is explanatory artwork, not a list of verified live permission settings. - **Implementation:** Confirm font/scale and present accurate authorization scopes and accessible category labels. 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.