Ctrl Wallet

Overview

Ctrl Wallet embodies a design philosophy rooted in **Geometric Precision and High-Contrast Clarity**—a visual language that prioritizes user control and technical transparency in the crypto space. The brand serves security-conscious users who demand both power and simplicity, using a bold palette of vibrant green (#05c92f) against near-black (#0f0f0f) and clean whites (#ffffff) to create an unmistakable, trustworthy presence. The aesthetic rejects soft gradients and ambient blur in favor of sharp edges, deliberate color blocking, and a monospace-inspired typeface (Tomato Grotesk) that evokes both modernity and precision.

The tone is direct, confident, and never patronizing. Ctrl speaks to users as peers—technical but accessible, urgent but calm. The vocabulary emphasizes control, security, and simplicity: "Take Ctrl," "One wallet for all your crypto," "2,500+ chains." Every interaction feels intentional, every color choice purposeful. The brand personality is that of a technical co-founder: opinionated, efficient, and unafraid to make bold design decisions that prioritize function over decoration.

Colors

The Ctrl color system operates on a principle of **maximum contrast and intentional accent deployment**. The primary color, vibrant green (#05c92f), is the signature accent reserved exclusively for interactive elements—buttons, focus states, and key CTAs. This green appears sparingly but decisively, commanding attention without visual noise. The background palette spans from pure white (#ffffff) through carefully calibrated grays (surface-container: #d1d6d2, on-surface-variant: #5a585a) to near-black (#0f0f0f), creating a neutral foundation that lets the green accent sing. Secondary colors—a bold blue (#2a5cd3) for informational hierarchy and a coral-red (#ff5a4d) for alerts and destructive actions—are deployed with equal restraint. The surface stack uses a shallow depth model: surface-con

Typography

Tomato Grotesk is the sole typeface, deployed across all scales from 12px labels to 140px display headlines. The type system follows a strict hierarchy: display (140px, 600 weight, -0.02em letter-spacing) for hero moments; headline-lg (48px, 600 weight) for section titles; body-md (16px, 500 weight) for standard prose; and label-md (14px, 500 weight, 0.01em letter-spacing) for interactive elements. The consistent 500 fontWeight across body and label scales creates visual cohesion—no thin, delicate weights that would undermine the brand's technical confidence. Line-height is generous (28px for 18px body-lg, 56px for 48px headline-lg) to ensure breathing room and legibility in dense layouts. On small labels over busy backgrounds, apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to maintain c

Layout

Ctrl uses a **fluid, mobile-first grid system** with a maximum container width of 1280px (1079px on tablet, 1599px on desktop). The layout rhythm is driven by the spacing scale: gutter (24px) for horizontal padding, lg (40px) for section separation, and md (24px) for component internal padding. The grid is 12 columns on desktop, collapsing to 6 columns on tablet and 4 on mobile. White-space is treated as a design element—sections are separated by lg spacing (40px) to create visual breathing room and reduce cognitive load. Cards and containers use md padding (24px) internally, with surface-container-low (#ecefec) backgrounds to distinguish them from the white page background. The input field (height: 56px, padding: 0 50px 0 31px, border-radius: 31px) is oversized intentionally—it signals im

Elevation & Depth

Depth in Ctrl is achieved through **subtle shadows and strategic background color shifts**, not through layered blur or glassmorphism. The elevation system uses three levels: sm (0 2px 2px rgba(0, 0, 0, 0.16)) for small interactive elements like buttons and badges, md (0 0.2rem 0.6rem rgba(0, 0, 0, 0.18)) for cards and standard containers, and lg (0 3px 8px rgba(0, 0, 0, 0.15)) for modals and overlays. Buttons use sm elevation to indicate clickability without visual heaviness. Cards layer md shadow over surface-container-lowest (#f9faf9) to create subtle separation from the white background. M

Shapes

The Ctrl shape language is **Geometric Sharpness with Intentional Softness**—a hybrid approach that uses sharp corners for technical credibility while employing full-radius (border-radius: 9999px) for primary interactive elements. Buttons use full-radius (border-radius: 9999px) to signal approachability and reduce friction; this pill-shaped form is the most recognizable interactive affordance in the system. Cards and containers use lg radius (1rem / 16px) to soften edges without appearing playful—a professional compromise between sharp and organic. Input fields use a custom 31px radius (approx

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons use full-radius (9999px), padding 11px 23px (height 44px), background #05c92f, text color #001405, and typography label-md (14px, 500 weight). On hover, background shifts to #04a626 with a 200ms ease-out transition. On active/pressed, background darkens to #039620. Secondary buttons mirror the primary structure but use transparent background with a 2px solid border in #05c92f and text color #05c92f; on hover, background becomes #e2f2e5 (primary-container). Both button states include sm elevation (0 2px 2px rgba(0, 0, 0, 0.16)) to indicate clickability.

Containers & Surfaces Cards use surface-container-lowest (#f9faf9) background, lg radius (16px), md padding (24px), and md elevation (0 0.2rem 0.6rem rgba(

Do's and Don'ts

**Do**

• Do use the primary green (#05c92f) exclusively for CTAs, focus states, and key interactive moments—never as a background or decorative element.
• Do maintain the 500 fontWeight baseline across body and label text; avoid thin or light weights that would undermine technical credibility.
• Do apply lg spacing (40px) between major sections to create visual breathing room and reduce cognitive load.
• Do use full-radius (9999px) on all primary buttons to signal approachability and reduce interaction friction.
• Do pair high-contrast text (on-surface #0f0f0f on light backgrounds) with generous line-height (28px for 18px body) for accessibility and legibility.

**Don't**

• Don't use the primary green as a background color or in large decorative areas—it must remain a focused accent that commands attention.
• Don't apply shadows heavier than lg elevation (0 3px 8px rgba(0, 0, 0, 0.15)) or use blur/glassmorphism effects; Ctrl rejects ambient depth in favor of sharp clarity.
• Don't mix typefaces or use system fonts; Tomato Grotesk is the sole typeface across all scales and weights.
• Don't use border-radius values between 1rem and 9999px on buttons; stick to either lg (16px) for cards or full (9999px) for interactive elements.
• Don't exceed a container max-width of 1280px or allow line-length to exceed 80 characters on body text, as this compromises readability and visual hierarchy.