Official Trézor Suite — Desktop & Web App for Hardware Wallet

Prototype / Design mockup — not an official page

Need help? Support

Version: prototype

About this design — security, clarity and trust (prototype)

This mockup presents a refreshed visual and content approach for a hardware-wallet login flow that emphasizes clarity, education and user safety. The objective of the design is to reduce ambiguity during the connection phase, to reinforce mental models of how hardware wallets operate, and to present lightweight contextual information so users feel confident they are connecting their actual physical device rather than a malicious clone or phishing page. The overall aesthetic combines a calm deep-teal palette with a warm coral accent, chosen to create a friendly but serious tone: teal for stability and security, coral for actionable elements and attention.

The login card is intentionally compact and focused: the primary call-to-action is "Connect to device" and the fields ask for a human-friendly device name or associated email and a local PIN. Importantly, this screen does not request the seed phrase or any secret recovery phrase at any time — hardware wallets protected by a PIN and seed should never ask for the recovery phrase as part of a connection or authentication flow. When building an actual product, all sensitive operations must be performed by the hardware device itself and never transmitted to a web page. This prototype includes educational hints and links that guide users to official support resources, instructions on safely connecting a device, and a brief explainer about recovery safety.

Accessibility and progressive enhancement are core considerations: inputs use semantic HTML, the form provides clear placeholders and labels, and focus styles are visible for keyboard users. The layout collapses to a single-column flow on smaller screens so the content stays legible on phones and tablets. Visual contrast and legible spacing are prioritized so older or visually impaired users can reliably interact with the interface. In a production implementation, ensure to run WCAG checks, provide ARIA announcements for dynamic events (for instance, when a device is found or fails to connect), and validate that color contrast ratios meet recommended thresholds.

The long informational column to the right is intentionally text-rich — its purpose is to educate and build trust without overwhelming the primary login interaction. It includes a short primer on hardware-wallet safety: hardware wallets isolate private keys from your computer, signing transactions on the device itself; the device displays transaction details for the user to verify; a PIN protects access and the recovery seed should be stored offline. Users are encouraged to verify the fingerprint or device label shown on the physical screen and match it against the app. The informational column can also host a short checklist: (1) Is the device screen lit and showing a connection prompt? (2) Does the PIN entry occur on the device or only in the browser? (3) Are you being asked for your seed phrase? If yes, that is a red flag.

Security-focused microcopy should be visible around the login flow: short, scannable tips that reinforce best practices. For example: never enter your recovery phrase into a web form; only connect trusted devices and confirm transaction details on the device display; keep firmware up to date using official channels. Device attestation and cryptographic verification are ideal technical measures to prevent impersonation; when available, those should be surfaced in the UI with a clear status indicator (trusted/unverified) and a link to learn more. If the application integrates attestation, the onboarding should explain what attestation means in plain language and why "trusted" status matters.

Finally, this prototype intentionally separates authentication from high-risk operations. Authentication here is limited to device discovery and local PIN entry. Transaction signing and seed management are surfaced in clearly labeled screens that require explicit confirmation on the hardware device. Designing for the human element — error messages that are kind and specific, recovery flows that are clear, and visible education — helps reduce costly mistakes. If you want, I can provide a version of this design that integrates a step-by-step connection wizard, or export assets (SVG logo, CSS variables) for handoff to developers.

Trézor App — Login