# Design from Reference: Nord VPN Multi-factor authentication Settings Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation. ## Reference - **Product:** Nord VPN - **Category:** Settings - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acb6aedbf2e69a0c03b6c63_6acb6a1c834771b57d15060a_cms-4531e3746c574f48c00f412b.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:** Clean, functional account-security settings with blue controls, light surfaces and a prominent orange warning. ### Page composition - **Canvas:** 2880 × 1776 screenshot pixels; CSS estimates assume approximately 2× scale. - **Structure:** White left service sidebar, pale main workspace, top title/account utilities and three settings tabs. Main content splits into authentication methods and a narrower FAQ column. ### Information hierarchy - **Priority:** Active MFA tab and warning establish account status. Two methods each receive an icon, explanation and Set up action. - **Support:** Seven collapsed FAQ rows sit alongside the method card; legal/language links align near the bottom. ### Typography - **Family:** Rounded neutral sans-serif; exact family is unverified. - **Scale:** Estimated CSS page title 24px, method headings 17–18px, body/tabs 15–16px and sidebar/footer 12–14px. ### Colors & surfaces - **Sampled palette:** Workspace #F8F8F8; cards/sidebar #FFFFFF; blue #2888FF; warning fill #FFF0E8; dark text #373C43; borders #E8E8E9. - **Contrast:** Blue tab underline and filled actions mark the active workflow; orange icon/text make the warning conspicuous. ### Components - **Method card:** White rounded rectangle with subtle border/shadow, two rows divided by a thin rule and right-aligned blue buttons. - **FAQ:** Plain horizontal rows with small right chevrons. Sidebar uses icons, service labels and a small dismissible referral card. - **Geometry:** Estimated 10–12px card radius, 4px button radius, 40px action height and 24px internal padding. ### Visual rhythm - **Spacing:** Regular 24px gaps separate tabs, alert and method card. Large blank lower workspace keeps attention on setup. - **Alignment:** Both method buttons share size and right edge; FAQ rules establish an independent vertical rhythm. ### Responsive - **Guidance:** Mobile is not shown. Place FAQ below methods, collapse service navigation and allow warning copy to wrap without crowding actions. ### Adaptation guidance - **Transfer:** Retain status-first security communication and clearly differentiated method choices. Use accurate account states and the target product's authentication methods. 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.