Begin Wallet

Overview

Begin Wallet is a self-custodial, open-source cryptocurrency wallet designed for the modern DeFi user who values transparency, control, and accessibility. The brand embodies a "Minimalist-Technical" aesthetic—clean, purposeful, and uncluttered—where a vibrant teal accent (#0abab5) cuts through a neutral white canvas to signal trust, action, and forward momentum. The interface prioritizes clarity over decoration: generous whitespace, precise typography in Open Sauce One, and a restrained color palette create an environment where complex financial operations feel intuitive and approachable. The emotional response is one of confidence and empowerment: users feel they are in control of their digital assets, never overwhelmed by jargon or visual noise.

Begin's voice is direct, educational, and optimistic without being breathless. The brand speaks to users as peers embarking on a shared journey into decentralized finance—using language like "Your Crypto Journey Begins Here" and "Everything You Need in One Wallet" that emphasizes agency and completeness. Vocabulary favors clarity over hype: "self-custodial" instead of "revolutionary," "open-source" instead of "cutting-edge." Example sentence in Begin's voice: "Stake your ADA, explore dApps, and manage Bitcoin and Solana—all from one wallet you control."

Colors

Begin's color system is anchored by a signature teal primary (#0abab5), used exclusively for call-to-action buttons, active states, and brand-critical interactive elements. This accent appears sparingly but decisively—the "Get Started" button in the hero, hover states on navigation links, and focus rings on form inputs. The secondary accent, a deep indigo (#3414fc), provides a supporting role for secondary actions, badges, and emphasis in data visualization. The tertiary cyan (#00e5ff) serves as a lighter, more energetic variant of the primary, used for hover states and elevated surfaces. The surface stack is deliberately minimal: white (#ffffff) as the primary surface, with a carefully calibrated gray scale (surface-container-low: #f3f4f6, surface-container: #eeeff2, surface-container-hig

Typography

Begin's type system is built on Open Sauce One, a geometric sans-serif that balances technical precision with approachable warmth. Display (60px, 700 weight, -0.04em letter-spacing) is reserved for hero headlines and major section breaks, commanding attention without aggression. Headline-lg (48px, 600 weight) anchors feature sections and card titles, while headline-md (32px, 600 weight) is used for subsection headers. Body text (16px regular, 24px line-height) is set at a generous measure to ensure readability on both mobile and desktop; the 1.5 line-height ratio (24px) provides breathing room in dense content blocks. Labels and UI text (14px, 600 weight, 0.01em letter-spacing) are slightly tighter to maintain visual hierarchy and reduce cognitive load in interactive elements. On small lab

Layout

Begin uses a fluid, mobile-first grid system with a maximum container width of 1280px, ensuring the interface remains readable and navigable across all device sizes. The 12-column grid adapts at breakpoints (640px, 768px, 1024px, 1280px, 1536px), with content typically spanning 10–12 columns on desktop to maintain comfortable line lengths and white-space ratios. The spacing scale is semantic: unit (8px) is the base increment, with sm (12px) for tight grouping, md (24px) for standard section separation, lg (40px) for major section breaks, and xl (64px) for hero-to-content transitions. Gutter width is consistently 24px on desktop, reducing to 12px on mobile to preserve screen real estate. The hero section uses a centered, single-column layout with a max-width of 1000px to focus user attentio

Elevation & Depth

Begin eschews traditional drop shadows in favor of a flat, layered approach that relies on color, borders, and subtle depth cues. The elevation system uses three levels: Level 1 (Base) is the white surface (#ffffff) with no shadow; Level 2 (Cards & Containers) applies a 1px solid border in surface-variant (#e5e7eb) and a soft shadow (0 1px 2px rgba(0, 0, 0, 0.06)) to create gentle separation from the background; Level 3 (Modals & Overlays) uses a stronger shadow (0 16px 40px rgba(0, 0, 0, 0.12)) and a slightly darker background (surface-container-high: #e5e7eb) to establish clear visual hierar

Shapes

Begin's shape philosophy is "Geometric Clarity"—rounded corners are used strategically to soften the technical nature of financial software without sacrificing precision or professionalism. Buttons use full border-radius (9999px), creating pill-shaped forms that feel friendly and inviting while remaining distinctly modern. Cards and containers use lg radius (1rem / 16px), providing enough rounding to feel contemporary without appearing playful or casual. Input fields use DEFAULT radius (0.5rem / 8px), a subtle curve that signals interactivity without dominating the visual hierarchy. Modals and

Components

Action Elements Buttons are the primary call-to-action mechanism and come in two main variants. The primary button (button-primary) uses the signature teal background (#0abab5) with white text, 12px vertical padding, 24px horizontal padding, and full border-radius (9999px). On hover, the background transitions to primary-fixed-dim (#0abab5 darkened) over 200ms, providing clear feedback without changing the button's shape or size. The secondary button (button-secondary) has a transparent background with a 1px outline in outline color (#9ca3af) and teal text; on hover, it fills with surface-container-high (#e5e7eb) to indicate interactivity. Both buttons use label-md typography (14px, 600 weight) and a minimum height of 44px to meet touch-target accessibility standards. Ghost buttons (bu

Do's and Don'ts

**Do**

• Do use the teal primary (#0abab5) exclusively for high-priority CTAs, focus states, and brand-critical interactive elements—never dilute its impact by overusing it.
• Do maintain at least 24px of whitespace (md spacing) between major sections to create visual breathing room and prevent cognitive overload.
• Do apply the full border-radius (9999px) only to buttons; use lg radius (16px) for cards and DEFAULT radius (8px) for inputs to maintain clear functional hierarchy.
• Do use Open Sauce One at 600 weight for all interactive labels and headings; reserve 400 weight for body copy and 700 only for display-level emphasis.
• Do test all interactive elements at 44px minimum height to ensure they meet touch-target accessibility standards on mobile devices.

**Don't**

• Don't use the secondary indigo (#3414fc) or tertiary cyan (#00e5ff) as primary CTAs—these are supporting accents only and will confuse users about action priority.
• Don't apply shadows stronger than md elevation (0 4px 12px rgba(0, 0, 0, 0.08)) to standard cards; reserve lg elevation (0 16px 40px rgba(0, 0, 0, 0.12)) for modals and overlays only.
• Don't mix border-radius values arbitrarily—use the defined scale (sm, DEFAULT, md, lg, xl, full) to maintain visual consistency and reinforce functional hierarchy.
• Don't reduce line-height below 1.5 (24px) for body text; this compromises readability and accessibility, especially for users with dyslexia or vision impairments.
• Don't use color alone to communicate state changes—always pair color shifts with shape, shadow, or animation changes to ensure clarity for colorblind users.