Levera

Overview

Levera is a leveraged memecoin launchpad built on Robinhood Chain, designed for traders seeking high-risk, high-reward opportunities in the crypto ecosystem. The brand embodies a 'Minimalist Precision' aesthetic—a deliberate rejection of flashy gradients in favor of stark, high-contrast monochromatic surfaces punctuated by a single warm accent. The UI evokes clarity and control: a dark canvas (#131514) with crisp white text (#fafafa) and strategic use of a warm beige accent (#ece3d1) that draws the eye to critical actions and data points. The emotional response is one of focused intensity—the interface feels like a professional trading terminal, not a gamified app.

The brand voice is direct, technical, and unapologetic. Levera speaks to experienced traders who understand leverage, volatility, and risk. Vocabulary skews toward precision: 'launch', 'leverage', 'chain', 'waitlist'—never 'fun' or 'easy'. The tone is calm but urgent, never breathless. Example sentence in brand voice: 'Launch coins on Robinhood with up to 2× leverage—join the waitlist for early access.'

Colors

The color system is built on a monochromatic dark foundation with a single warm accent. Primary (#ece3d1) is the brand's signature warm beige, used exclusively on call-to-action buttons, key metrics, and interactive highlights. It appears sparingly—approximately 5–8% of the interface—to maintain visual hierarchy and prevent fatigue. On-primary (#0a0a0a) is near-black, ensuring maximum contrast for text on primary buttons (WCAG AAA compliant at 14.5:1). The surface stack anchors the interface: surface (#131514) is the page background, surface-container-low (#141414) is used for cards and contained elements, and surface-container-highest (#2d2d2d) creates subtle depth for hover states. On-surface (#fafafa) is the primary text color, while on-surface-variant (#a1a1aa) is used for secondary te

Typography

The type system uses Geist exclusively, a geometric sans-serif that conveys modernity and precision. Display (60px, 300 weight, -0.04em tracking) is reserved for hero headlines and major announcements; headline-lg (48px, 300 weight) is used for primary section titles; headline-md (32px, 400 weight) for subsections. Body-lg (18px, 400 weight, 28px line-height) is used for long-form content and descriptions, while body-md (16px, 400 weight, 24px line-height) is the default for UI labels and form text. Label-md (14px, 600 weight, 20px line-height, 0.01em tracking) is used for button text and small UI labels; label-sm (13px, 400 weight) for secondary labels and metadata. The light weight (300) on headlines creates an airy, premium feel that contrasts with the dark background. On small labels o

Layout

The layout uses a 12-column grid with a max-width of 1280px, centered on the viewport. The hero section spans full width with padding of 24px on mobile, 40px on tablet, and 64px on desktop. Section separation uses lg spacing (24px) for visual breathing room. The container model is fluid up to 1280px, then fixed. Gutter spacing between grid columns is 24px. The page rhythm follows a 'hero-first' model: a full-height hero section with centered content (h1, subheading, CTA) occupies the top third, followed by a large animated canvas element (token particles) that fills the remaining space. Below the fold, sections are stacked vertically with md spacing (16px) between cards and lg spacing (24px) between major sections. Horizontal padding uses the gutter token (24px) on all sides, reducing to s

Elevation & Depth

Depth is achieved through subtle layering and minimal shadows, not dramatic drop-shadows. The elevation system uses three levels: Level 1 (Base) is the surface background at #131514 with no shadow. Level 2 (Card/Contained) uses box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) with a 1px solid border at rgba(255, 255, 255, 0.05) to define edges. Level 3 (Modal/Overlay) uses box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) with the same border treatment. Hover states on cards elevate to Level 3 with a transition of 150ms cubic-bezier(0.4, 0, 0.2, 1). The shadow colors use pure black (rgba(0, 0, 0, ...)) rathe

Shapes

The shape philosophy is 'Functional Minimalism'—rounded corners are used sparingly and purposefully, never decoratively. Buttons use full radius (9999px) to create pill-shaped affordances that feel clickable and modern. Cards and containers use lg radius (0.75rem / 12px) to soften edges without appearing playful. Input fields use DEFAULT radius (0.375rem / 6px) for a more utilitarian appearance. Dividers and borders are sharp (0px radius). The rationale: full-radius buttons create a clear visual distinction from rectangular content areas, making CTAs immediately recognizable. Card radius (12px

Components

Action Elements Buttons are the primary interactive element. Button-primary uses background #ece3d1 with text color #0a0a0a, full radius (9999px), padding 10px 20px, and height 40px. Font is label-md (14px, 600 weight). On hover, opacity reduces to 0.9 with a 150ms transition. Button-secondary is transparent with text color #a1a1aa (on-surface-variant), full radius, padding 8px 16px, height 36px. On hover, text color changes to #fafafa (on-surface). Both buttons use transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1) for smooth state changes. Focus state applies a 3px inset ring at rgba(236, 227, 209, 0.1).

Containers & Surfaces Cards use background #141414 (surface-container-low) with 1px border at #252525 (surface-container-high), lg radius (12px), and padding 16px. On hover,

Do's and Don'ts

**Do**

• Do use the primary accent (#ece3d1) sparingly—only on CTAs, key metrics, and interactive highlights. Overuse dilutes its impact.
• Do maintain high contrast between text and background: on-surface (#fafafa) on surface (#131514) achieves 14.5:1 contrast ratio.
• Do apply full radius (9999px) exclusively to buttons to create a clear visual distinction from rectangular content.
• Do use the label-md weight (600) for button text to ensure readability at small sizes and create visual emphasis.
• Do transition all interactive state changes over 150ms using cubic-bezier(0.4, 0, 0.2, 1) for a consistent, snappy feel.

**Don't**

• Don't use the primary accent (#ece3d1) for body text, backgrounds, or non-interactive elements—it's reserved for CTAs and highlights.
• Don't apply shadows larger than 0 8px 24px rgba(0, 0, 0, 0.2); the aesthetic relies on subtlety, not drama.
• Don't mix rounded corners—use full radius for buttons, lg (12px) for cards, DEFAULT (6px) for inputs. Inconsistent radius breaks the system.
• Don't use system fonts or fallbacks in place of Geist; the typeface is core to the brand identity and must load reliably.