Technical Specification: Secure Crypto Seed Phrase Backup Tool

Overview

A clean, professional, and privacy-focused web application designed to help cryptocurrency users record and organize their BIP-39 seed phrases. The tool focuses on providing a structured, print-friendly layout to ensure physical backups are legible and correctly ordered.

Core Features

• Responsive Input Grid: Dynamically generate input fields based on whether the user selects a 12-word or 24-word seed phrase.
• Checksum/Validation Logic: Real-time feedback if the seed word count doesn't match the selection, and basic validation to prevent common formatting errors.
• Print-Optimized View: A clean, CSS-based print layout that hides UI controls and focuses solely on a clear, grid-based layout suitable for paper backups.
• Security Checklist: A non-intrusive sidebar or bottom section providing industry-standard best practices for physical seed phrase storage (e.g., "Never store digitally," "Use metal plates").
• Offline Capability: Designed to work without any network requests. The logic is self-contained.

UI/UX Design

• Theme: Vibrant, clean light-mode aesthetic. Use of soft greys, crisp whites, and a primary "Trust" blue (e.g., #2563eb) for buttons.
• Typography: Sans-serif, high-legibility fonts (Inter or system UI).
• Layout:
  • Header: Simple, descriptive H1 title and a clear "Security First" disclaimer.
  • Main Area: A toggle for 12/24 words, followed by the numbered grid of inputs.
  • Actions: "Clear" and "Print" buttons.
  • Footer (Visual only): No functional footer. Just a brief text line about the tool running locally.

Technical Constraints & Directives

• No Persistent Storage: Absolutely zero use of localStorage, sessionStorage, or IndexedDB. All inputs are volatile memory only.
• Single File: All CSS and JS must be embedded within the single HTML file using <style> and <script> blocks.
• Sandbox Compatibility: Do not use alert(), prompt(), or confirm(). All interactions must occur via standard HTML5 elements (modals/tooltips).
• Accessibility: Ensure high contrast ratios for text. All inputs must be screen-reader friendly with proper labels.
• Performance: No external heavy frameworks. Pure vanilla JavaScript for DOM manipulation.

Color Palette

• Background: #ffffff
• Surface/Card: #f8fafc
• Text Primary: #1e293b
• Text Secondary: #64748b
• Primary Accent: #2563eb
• Success/Border: #e2e8f0

Animations

• Smooth Transitions: Use CSS transition on input field focus and button hover states (e.g., 0.2s ease-in-out).
• Fade-in: Gentle fade-in for the generation of the input grid when switching between 12 and 24-word modes.