Gemini

Overview

Gemini is a crypto super app that combines trading, prediction markets, and financial products into a single, accessible platform. The design aesthetic is **Minimalist Brutalism with Precision Accents**—a deliberate rejection of ornament in favor of stark, high-contrast surfaces (pure black #000000 and white #ffffff) punctuated by strategic accent colors (electric blue #005ff9, warm orange #f9a631) that signal actionable moments. The interface evokes confidence and clarity: every element earns its space, every color choice drives intent. The emotional response is one of control and transparency—users feel they are navigating a financial instrument designed for power users, not a toy.

The brand voice is direct, confident, and jargon-aware without being exclusionary. Gemini speaks to both crypto natives and newcomers with equal respect, using precise language ("prediction markets," "staking," "smart contracts") but never condescending. The tone is calm under pressure—even during market volatility, the UI remains composed. Example sentence: "Lock in your prediction before the market closes at 3 PM UTC."

Colors

The color system is built on a foundation of absolute contrast: **Primary (#000000)** is used for all primary CTAs ("Get started", "Download the app"), navigation, and text hierarchy. It commands attention through sheer contrast against the white surface. **On-Primary (#ffffff)** ensures legibility on dark backgrounds. **Secondary (#005ff9)**, a vivid electric blue, is reserved for interactive highlights, active states, and secondary CTAs that require distinction without the weight of primary black. It appears in prediction odds displays, active tabs, and accent borders. **Tertiary (#f9a631)**, a warm orange, signals status updates, gains, or promotional highlights—used sparingly to avoid visual noise. **Error (#dd2632)**, a deep red, communicates losses, warnings, and destructive actions.

Typography

The type system uses **Geist** exclusively across all weights (100–900), a geometric sans-serif that conveys modernity and precision. Display (60px, 700 weight, -0.02em tracking) anchors hero sections with commanding presence; Headline-lg (40px, 600 weight) breaks major sections; Headline-md (28px, 600 weight) introduces subsections; Title-lg (20px, 600 weight) labels cards and components. Body-lg (18px, 400 weight, 28px line-height) and Body-md (16px, 400 weight, 24px line-height) carry content with generous line-height (1.5–1.75x) for readability on screens. Label-md (14px, 600 weight, 0.01em tracking) and Label-sm (12px, 500 weight, 0.02em tracking) handle UI labels, buttons, and metadata. Weight hierarchy is strict: 600+ for interactive elements and headings, 400 for body copy. On smal

Layout

The layout uses a **12-column fluid grid** with a max-width of 1280px, centered with symmetric gutters of 24px. The page rhythm alternates between hero sections (full-bleed or contained), content cards (arranged in 2–4 column grids depending on viewport), and modal overlays for prediction entry. White-space is generous: section separation uses lg spacing (40px) vertically, md spacing (24px) horizontally between card columns. The hero section (visible in the screenshot) spans full width with a semi-transparent overlay (rgba(1, 3, 4, 0.5)) over a photographic background, creating depth without sacrificing readability. Cards are consistently padded with md spacing (24px) and use rounded corners (lg: 1rem) to soften the brutalist edges. Modals center on screen with a fixed overlay and use xl s

Elevation & Depth

Depth is conveyed through **layered shadows and borders**, not color gradients. The elevation system uses three levels: **Level 1 (sm)** — 0 1px 2px rgba(0, 0, 0, 0.06) — applied to subtle interactive elements like hover states on list items. **Level 2 (md)** — 0 4px 12px rgba(0, 0, 0, 0.08) — the default for cards, input fields, and standard containers; this shadow is tight and controlled, suggesting proximity without drama. **Level 3 (lg)** — 0 16px 40px rgba(0, 0, 0, 0.12) — reserved for modals, dropdowns, and floating panels that must visually separate from the page. All surfaces use a 1px

Shapes

The shape philosophy is **Precision Minimalism**: rounded corners are used strategically to soften brutalist geometry without compromising clarity. **Buttons** use full radius (9999px) to create pill-shaped affordances that feel modern and approachable—the extreme rounding signals "clickable" instantly. **Cards and containers** use lg radius (1rem / 16px) to provide subtle softness while maintaining architectural clarity. **Input fields** use DEFAULT radius (0.5rem / 8px), a tighter curve that suggests data entry without distraction. **Modals and overlays** use xl radius (1.5rem / 24px) to emp

Components

Action Elements **Buttons** are the primary interaction mechanism. Primary buttons (button-primary) use {colors.primary} (#000000) background with {colors.on-primary} (#ffffff) text, full radius (9999px), and 12px vertical / 24px horizontal padding, resulting in a 44px height. On hover (button-primary-hover), the background shifts to {colors.primary-container} (#343536), a subtle darkening that maintains contrast. On active/pressed state (button-primary-active), background becomes {colors.primary-fixed-dim} (#1a1a1a). Secondary buttons (button-secondary) use transparent background with a 1px border in {colors.outline} (#4d4f4f), text in {colors.primary}, and the same padding and radius. Accent buttons (button-accent) use {colors.secondary} (#005ff9) background with white text for high-

Do's and Don'ts

**Do**

• Do use {colors.primary} (#000000) for all primary CTAs and navigation—it commands attention through contrast and signals authority.
• Do apply full radius (9999px) to buttons and badges to create instant affordance recognition; users should know these are clickable at a glance.
• Do maintain generous white-space: use lg spacing (40px) between major sections and md spacing (24px) between card columns to avoid visual congestion.
• Do use {colors.secondary} (#005ff9) sparingly for active states, secondary CTAs, and highlights—overuse dilutes its signal strength.
• Do apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) to small labels over busy backgrounds (e.g., prediction odds) to ensure legibility.
• Do use the three-level shadow system consistently: sm for subtle hovers, md for cards, lg for modals—never mix shadow scales.
• Do keep all borders at 1px in {colors.outline-variant} (#b3b3b4) to define edges crisply without visual noise.

**Don't**

• Don't use rounded corners on the page background, structural grids, or large containers—reserve rounding for interactive elements and cards to maintain minimalist clarity.
• Don't apply color gradients or inner shadows; the system relies on flat surfaces, precise borders, and layered shadows for depth.
• Don't mix typefaces; Geist is the sole font family across all weights—consistency reinforces the precision aesthetic.
• Don't use {colors.tertiary} (#f9a631) or {colors.error} (#dd2632) as primary colors; they are status indicators and should appear sparingly to maintain visual hierarchy.
• Don't apply hover effects to non-interactive elements (text, images, static containers)—reserve transitions for buttons, links, and form fields.
• Don't exceed lg spacing (40px) for section separation or use spacing values outside the defined scale (xs, sm, md, lg, xl)—consistency prevents layout fragmentation.
• Don't use opacity or transparency on text; always use solid colors from the palette to ensure accessibility and readability.