Rabby Wallet

Overview

Rabby Wallet is a game-changing Ethereum and EVM wallet that embodies a philosophy of "Accessible Clarity"—combining technical sophistication with an inviting, approachable interface. The design aesthetic is rooted in clean minimalism with strategic color accents: a vibrant periwinkle blue (#4c65ff) serves as the primary brand accent, paired with a soft, light background (#edf0ff to #ffffff) that evokes trust and transparency. The brand personality is confident yet humble, speaking to both crypto-native users and newcomers with equal respect. The UI prioritizes information hierarchy and cognitive ease, using generous whitespace and a carefully calibrated color system to guide users through complex blockchain interactions without overwhelming them.

The voice is precise, direct, and reassuring—never condescending, never breathless. Example: "Your wallet, your keys, your security. Download Rabby and take control of your Ethereum journey." The tone balances technical accuracy with accessibility, treating users as intelligent partners in their financial sovereignty. Every interaction is designed to reduce friction and build confidence, whether downloading the extension or approving a transaction.

Colors

The Rabby color system is built on a foundation of light, neutral surfaces with a bold periwinkle blue accent that commands attention without aggression. Primary (#4c65ff) is the signature brand color, used exclusively for call-to-action buttons, active states, and key interactive elements—it appears in the header "Download" button, form focus states, and hover effects. The primary container (#dbe0ff) provides a softer, tinted background for secondary actions and informational contexts, while the inverse primary (#7084ff) is reserved for hover and elevated states, creating a subtle depth gradient. On-primary is always pure white (#ffffff) for maximum contrast and readability on the blue accent.

The surface stack progresses from pure white (#ffffff) for primary content areas through increa

Typography

The type system pairs SF Pro (Apple's native system font) for body and display text with Lato for labels and UI microcopy, creating a hierarchy that feels both premium and approachable. Display text (64px, 700 weight, -0.02em tracking) is reserved for hero headlines and major section titles, commanding attention through scale rather than color. Headline-lg (40px, 600 weight) and headline-md (28px, 600 weight) establish section structure with consistent line-height ratios (1.2x font size) that ensure comfortable reading. Body-lg (18px, 400 weight, 28px line-height) and body-md (16px, 400 weight, 24px line-height) form the backbone of content, with generous line-height (1.5x) to support readability on screens. Label-md (14px, 700 weight, Lato) is used for button text, form labels, and UI con

Layout

Rabby's layout follows a 12-column grid system with a maximum container width of 1440px, allowing content to breathe on large displays while maintaining focus on medium screens. The page rhythm is established through consistent spacing: lg spacing (40px) separates major sections (hero, feature cards, download area), md spacing (24px) groups related content within sections, and sm spacing (12px) creates breathing room between interactive elements. The gutter width is 24px, maintaining consistent horizontal padding across all breakpoints. White-space is treated as a first-class design element—the hero section uses 100px+ vertical padding to create a sense of openness and importance, while card layouts employ 40px internal padding to prevent content from feeling cramped. The design favors a s

Elevation & Depth

Rabby employs a subtle shadow system that creates depth through restraint rather than drama. The base elevation uses no shadow, allowing the light background (#ffffff) to serve as the foundation. Level 1 (standard cards and containers) applies a soft shadow: box-shadow: 0 2px 8px rgba(76, 101, 255, 0.1)—a tinted blue shadow that reinforces brand identity while remaining understated. Level 2 (modals, dropdowns, and elevated surfaces) uses a slightly stronger shadow: box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15)—a neutral shadow that creates clear separation from the background. Interactive elements

Shapes

Rabby's shape language is rooted in "Friendly Precision"—rounded corners that feel approachable without sacrificing clarity or professionalism. The rounded scale progresses from sm (4px) for subtle refinement on small UI elements like checkboxes and minor dividers, through DEFAULT (8px) for form inputs and secondary buttons, to lg (16px) for primary buttons and card corners, and xl (20px) for modals and major container elements. The most prominent CTA button ("Download") uses 12px border-radius, striking a balance between softness and authority. Icon buttons and interactive elements use 16px t

Components

Action Elements Buttons are the primary interaction mechanism and come in two main variants. The primary button uses a solid background (#4c65ff) with white text, 12px border-radius, and 12px 24px padding, creating a 48px total height for comfortable touch targets. On hover, the background shifts to the inverse primary (#7084ff) and applies a scale(1.05) transform with a 0.2s transition, providing immediate visual feedback. The secondary button uses a transparent background with a 2px solid border in primary blue, the same padding and height, and transitions to a filled state on hover (background becomes primary, text becomes white). Both button variants use label-md typography (14px, 700 weight, Lato) for consistency and clarity.

Containers & Surfaces Cards are the primary conten

Do's and Don'ts

**Do**

• Do use primary blue (#4c65ff) exclusively for call-to-action buttons and primary interactive states—it's the brand's signature accent and should never be diluted or overused.
• Do maintain at least 24px of white-space between major sections and 12px between related content groups to create visual breathing room and reduce cognitive load.
• Do apply the blue-tinted shadow (0 2px 8px rgba(76, 101, 255, 0.1)) to cards and containers to reinforce brand identity while keeping the aesthetic light and accessible.
• Do use SF Pro for body and display text and Lato exclusively for labels and UI microcopy—never mix typefaces within a single component.
• Do ensure all interactive elements have a minimum touch target of 48px × 48px and provide clear hover/focus states with 0.18–0.2s transitions for tactile feedback.

**Don't**

• Don't use dark backgrounds or high-contrast shadows that contradict the light, accessible aesthetic—Rabby's strength is in clarity and openness, not drama.
• Don't apply primary blue to non-interactive elements or use it for body text, backgrounds, or decorative purposes—reserve it exclusively for CTAs and active states.
• Don't exceed 20px border-radius on any component; excessive rounding undermines the precision and professionalism of the design system.
• Don't mix Lato and SF Pro within a single component or use system fonts like -apple-system as a fallback for body text—always specify the full font stack.
• Don't use secondary colors (green, orange, red) for primary actions or emphasis—they are reserved for semantic states (success, warning, error) and should never compete with the primary blue accent.