Conduktor Signup

# Design from Reference: Conduktor 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:** Conduktor - **Category:** Signup - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acb6768994832179b5606ce_6acb66c110085c2ad17a0056_cms-f5441e1132f6ff976ee3b0b8.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:** Crisp authentication card against a faint violet technical grid and perspective floor. ### Page composition - **Canvas:** 2880 × 1754 screenshot px; CSS estimates assume 2× capture. - **Structure:** Narrow tall centered card with brand symbol, Create Your Account heading, helper, email/Continue, login link, OR divider and three provider actions. ### Information hierarchy - **Priority:** Email route leads; Google, GitHub and Microsoft alternatives appear below a clear divider. ### Typography - **Family:** Neutral sans serif, exact font unverified. - **Scale:** Estimated CSS heading 24 px, body/buttons 14–16 px and divider 12 px. ### Colors & surfaces - **Sampled palette:** White #FFFFFF, primary violet #4F3EEF and nearly white #FCFCFF/#FBFCFF. - **Backdrop:** Very pale lavender grid and soft violet/pink haze; fine gray field/button borders. ### Components - **Geometry:** Estimated CSS card width 400 px, 18 px corners, 40 px padding and soft broad shadow; controls approximately 52 px tall. - **Controls:** Email field, filled violet Continue, underlined/bold login link, and three outlined provider buttons with leading logos. - **Brand:** Small angular violet animal-head symbol above title. ### Visual rhythm - **Spacing:** Approximately 20–28 CSS px between groups; regular provider-button gaps and broad outer margins. ### Responsive - **Observed:** Desktop only. - **Adaptation:** Use fluid card width with 20 px gutters and trim vertical padding on short viewports without hiding provider choices. ### Adaptation guidance - **Preserve:** Clear email/provider separation, pale grid depth and violet action. - **Replace:** Use actual supported providers and brand assets. 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.