Crypto/Web3 OTC DEX Single-Page Gateway Design

If you have never designed for crypto/Web3, do not apply. You must understand: Wallet connection flows (MetaMask, WalletConnect) 0x address formats & EIP-55 checksums Non-custodial UX language ("Sign," not "Deposit") Blockchain transaction states (Pending, Confirmed, Reverted) Applications without crypto portfolio links will be ignored. Single-Page Sovereign Gateway REWARD: $100 USD Base + $50 USD Bonus (Paid Upon Live Deployment) TOTAL POTENTIAL: $150 USD DELIVERY: 1 Fully Layered Figma File + 1 SVG Asset Pack 1. The Core Vision We are building a non-custodial gateway for a Proof of Work chain. No centralized exchange history. No custodial risk. Aesthetic: Sovereign Minimalist. Industrial-strength utility (Bitcoin Cash/Zcash style). Palette: Obsidian (#0A0A0A), Slate (#1E293B), Silver (#94A3B8). No gradients. No "crypto-bro" flair. 2. Figma Requirements (Non-Negotiable) To qualify for the $50 deployment bonus, the file must be developer-ready: Auto-Layout: Every container must use Figma Auto-Layout (exact padding/gaps for CSS copy-paste). Global Styles: Define HEX codes and Typography (H1, H2, Body) globally. No one-off values. Component States: Design these 4 states for the main view: Disconnected: Wallet not connected. Connected: Wallet active, data loading. Active: Swap in progress. Error: Insufficient funds or wrong stablecoin selected. 3. The One-Page "Command Center" Components The Gate (Modal): Fullscreen consent modal (Terms of Service) with scroll-to-accept logic. Must be designed. The Depth: Triple-corridor Order Book (USDC, USDT, USD1). Side-by-side. No mixing/aggregation. The Action: Swap module. No "Deposit/Withdraw" buttons. Non-custodial language only. The Ghost Shield: Security warning badge near swap button (Green/Yellow/Red states). The Heartbeat: Time & Sales tape (scrolling list of recent trades with 1-second pulse animation). 4. Compliance UI Elements (Mandatory) Viewing Key Button: Visible in wallet settings (icon + label). Arweave Badge: "Hosted on Permaweb" icon for the footer. Renouncement Proof: Small text field in footer for TX hash placeholder. Offline Indicator: Visual cue that [login to view URL] exists (download icon). 5. Asset Handoff (SVG Only) Icons: Security shield, Wallet, Stablecoin badges (USDT=Green, USDC=Blue, USD1=Gold), Arweave logo. Logo: Use provided Bitnet logo (Bold/Light variants, 1-pixel precision). Export: All icons as clean SVG vectors, no rasterized layers. 6. Payment Terms Milestone Amount Trigger Base Payment $100 USD Upon delivery of approved Figma file + SVG pack Deployment Bonus $50 USD Upon successful live deployment of the site (Arweave CID confirmed) Total Potential: $150 USD Timeline: Base paid within 48h of approval. Bonus paid within 24h of live deployment confirmation. 7. Why This Matters If you deliver a professional Figma Design System, the developer copies code directly. This ensures the platform feels like a surgical tool—precise, honest, and unbreakable. To Apply: DM one link to your most "precise" UI work. If you understand that "Simple is Hard," you are the one for the job. 1. The Core Vision In 2009, users that wanted to buy Bitcoins were forced later into centralized crypto exchanges that went bankrupt. We are fixing that history with a high-fidelity, non-custodial gateway for a Proof of Work chain. Aesthetic: Sovereign Minimalist. Industrial-strength utility like Bitcoin Cash or Zcash. Palette: Obsidian, Slate, and Silver. No "crypto-bro" gradients. 2. Figma Architecture (For the Developer) If you provide a flat image, the bonus is denied. Our developer requires a UI System: Auto-Layout: Every container (Order Book, Tape, Action Module) must use Figma Auto-Layout. We need to see the exact pixel padding and gaps so the CSS can be copied 1:1. Global Styles: Define a fixed set of HEX codes and Typography (H1, H2, Body). No "one-off" font sizes. Component States: You must design the Interactive States: Default: Observer view (wallet disconnected). Hover: Subtle silver glow on the chart’s transaction dots. Active: The button state during a live swap. Disabled: How a "USDT" order looks if the user only has "USDC." 3. The One-Page "Command Center" Components The Pulse: A 10-Day Staircase Chart (Step-line only). Horizontal lines = Market stability. Points on the corners represent individual swap events. The Depth: Triple-corridor Order Book (USDC, USDT, USD1). Side-by-side, perfectly aligned. No cross-swapping of stables. The Action: Swapping now. A non-custodial module. No "Deposit" or "Withdraw" buttons. Money stays in the user's wallet until the signature. The Heartbeat: 10-Day Time & Sales scrolling tape. Design a "New Trade" pulse (a 1-second silver flash) when an entry hits the top. 4. Logic & Safety Visuals The Ghost Shield: Place a high-end security warning near the final action button. It must warn the user if a counterparty address is flagged for "poisoning" or scams. Isolated Corridors: If a user clicks an order they cannot afford or that uses a different stablecoin, the UI must show a professional, clear error state. 5. Asset Handoff (SVG Only) Vector Purity: All icons (Security shield, Wallet icons, Stablecoin badges) must be exported as clean SVG vectors. Logo Integrity: Use the provided logo (Bold text / Light text). It must sit in the header with 1-pixel precision. Why this matters for the Developer If you deliver a professional Figma Design System, the developer can copy the code directly into the engine. This ensures the platform feels like a surgical tool of 2009—precise, honest, and unbreakable. To Apply: DM one link to your most "precise" UI work. If you understand that "Simple is Hard," you are the one for the job.

ID Projek: 40312253