Begin Wallet

Overview

Begin Wallet is a self-custodial, open-source cryptocurrency wallet designed for Cardano, Bitcoin, and Solana users who demand transparency, control, and accessibility. The design system embodies a "Tech-Forward Clarity" aesthetic—combining the precision of financial software with the approachability of consumer applications. The visual language prioritizes trust through clean typography, generous whitespace, and a vibrant teal accent (#0abab5) that signals action and forward momentum. The brand personality is confident yet humble: Begin speaks to users as peers, not as experts lecturing novices. The tone is direct, jargon-aware but never gatekeeping, and always action-oriented. Example sentence: "Stake your ADA directly from your wallet—no intermediaries, no surprises."

Colors

Begin's color system is rooted in a light, high-contrast foundation that prioritizes legibility and trust. The primary accent, teal (#0abab5), is deployed on all call-to-action buttons, active navigation states, and interactive focus rings. This color appears frequently but strategically—it's the visual anchor that draws users toward key actions. The secondary accent, deep indigo (#3414fc), is reserved for secondary actions, badges, and supporting UI elements; it provides visual hierarchy without competing for attention. The surface stack uses a pure white base (#ffffff) with carefully calibrated grays: surface-container (#f3f4f6) for card backgrounds, surface-container-high (#e5e7eb) for hover states, and outline (#9ca3af) for borders and dividers. The on-surface text color is near-black

Typography

The type system uses Open Sauce One across all scales, a geometric sans-serif that balances technical precision with human warmth. Display (60px, 700 weight, -0.04em tracking) is reserved for hero headlines and brand moments; Headline-lg (40px, 600 weight) anchors major sections; Headline-md (28px, 600 weight) introduces subsections; Title-lg (20px, 600 weight) labels cards and modals. Body-lg (18px, 400 weight) is used for introductory copy and hero subheadings, while Body-md (16px, 400 weight) is the default for all body text, maintaining a 24px line-height for comfortable reading. Label-md (14px, 600 weight, 0.01em tracking) is applied to button text, form labels, and navigation items; Label-sm (12px, 500 weight, 0.02em tracking) is used for badges, captions, and helper text. All headli

Layout

Begin uses a 12-column grid system with a max-width of 1280px, ensuring content remains readable on ultra-wide displays while maintaining mobile-first responsiveness. The page rhythm is governed by a semantic spacing scale: lg (40px) is used for section separation, creating visual breathing room between major content blocks; md (24px) is the default gutter for card padding and component spacing; sm (12px) is used for internal component spacing (e.g., between icon and label in a button). The container uses a fluid width on mobile (100% with 24px horizontal padding) and snaps to fixed breakpoints at 640px, 768px, 1024px, 1280px, and 1536px. Hero sections occupy 100vh on desktop, with content vertically centered using flexbox. Cards are laid out in a responsive grid: 1 column on mobile, 2 col

Elevation & Depth

Begin uses a minimal shadow system to convey depth without visual heaviness. The elevation scale consists of three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for subtle depth on interactive elements like buttons and small cards; md (0 4px 12px rgba(0, 0, 0, 0.08)) for elevated containers like modals and dropdown menus; lg (0 16px 40px rgba(0, 0, 0, 0.12)) for the most prominent overlays and full-screen modals. Cards use sm elevation by default, transitioning to md on hover (transition: all 200ms ease-in-out). Buttons have no shadow in their resting state, relying on color contrast and rounded

Shapes

Begin employs a "Geometric Precision" shape philosophy: rounded corners are used strategically to soften technical interfaces without sacrificing clarity. Buttons use full radius (9999px), creating pill-shaped affordances that feel modern and approachable; this radius is applied universally to all button variants (primary, secondary, tertiary) for consistency. Cards and containers use lg radius (1rem / 16px), balancing softness with definition—this radius is large enough to feel contemporary but not so large that it appears cartoonish. Input fields and smaller UI elements use DEFAULT radius (0

Components

Action Elements Buttons are the primary interactive element in Begin's interface. Primary buttons use {colors.primary} (#0abab5) background with {colors.on-primary} (white) text, full radius (9999px), and padding of 12px 20px for a 44px total height. The typography is {typography.label-md} (14px, 600 weight). On hover, the background shifts to {colors.primary-fixed-dim} (#0a8a85) with a transition: background-color 200ms ease-in-out. On active/pressed state, apply a 3px inset box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1) to indicate depression. Secondary buttons use transparent background with a 1px border in {colors.primary}, same text color, and the same hover behavior (background shifts to {colors.primary-container} #00e5ff). Tertiary buttons are used for less prominent actions: tr

Do's and Don'ts

**Do**

• Do use {colors.primary} (#0abab5) exclusively for primary CTAs and focus states—it's the visual anchor that guides users toward key actions.
• Do maintain at least 24px (md spacing) between major sections and 12px (sm spacing) within component groups to preserve visual breathing room.
• Do apply full radius (9999px) to all buttons for consistent affordance signaling; never mix rounded and sharp button styles.
• Do use Open Sauce One at 600+ weight for all headlines and labels to create visual hierarchy; reserve 400 weight for body text only.
• Do apply transition: all 200ms ease-in-out to interactive elements (buttons, cards, inputs) to signal responsiveness without feeling sluggish.
• Do test all interactive elements at 44px minimum height on mobile to meet WCAG touch target guidelines.
• Do use {colors.surface-container-high} (#e5e7eb) for hover states on cards and tertiary buttons—it provides clear feedback without jarring color shifts.

**Don't**

• Don't use {colors.secondary} (#3414fc) or {colors.tertiary} (#374151) as primary CTA colors—they dilute the visual hierarchy and confuse users about which action is primary.
• Don't apply shadows to buttons; rely on color contrast and rounded corners for definition. Shadows are reserved for elevated containers (cards, modals).
• Don't mix border-radius values within the same component family (e.g., don't use md radius on some buttons and lg on others).
• Don't use letter-spacing greater than -0.04em on headlines or less than 0em on body text; extreme tracking values reduce legibility.
• Don't exceed 1280px container max-width on desktop—content becomes difficult to scan and line lengths exceed optimal reading length (50–75 characters).
• Don't apply more than one shadow level to a single element; stacking shadows (e.g., md + lg) creates visual confusion.
• Don't use opacity-based text colors for primary body text; always use explicit color values from the palette to ensure WCAG AAA contrast ratios.