Outcome

Overview

Outcome is a zero-fee crypto prediction market platform built on Hyperliquid, designed for traders who demand precision, speed, and clarity in complex market environments. The aesthetic is 'Crypto-Minimalist Precision'—a dark-first, data-dense interface that prioritizes information hierarchy and rapid decision-making over decorative flourishes. The UI evokes the feeling of a professional trading terminal: cool, authoritative, and unambiguous. Every element serves a function; every color carries meaning. The brand personality is direct, technical, and respectful of the user's intelligence. Voice: terse, fact-based, never hype. Example: 'Bitcoin Up or Down Daily — settle in 24 hours, zero fees, automated on-chain.'

Colors

The color system is built around a near-black canvas (#0b0c0f) with a luminous primary accent (#f5f8ff, near-white) that creates maximum contrast for CTAs and key data points. Primary (#f5f8ff) is reserved exclusively for the most important interactive elements—the login button, key metrics, and call-to-action text. The secondary accent (#99ffbc, a bright mint green) signals success, gains, and positive outcomes; it appears on 'Up' predictions and profit indicators. Tertiary (#ff8825, a warm orange) conveys urgency, warnings, and neutral-to-negative states. Error (#ff3d5e, a vivid red-pink) is used sparingly for losses and critical alerts. The surface stack uses micro-opacity layers (rgba(194, 214, 255, 0.03) to 0.15)) to create depth without introducing new hues—this maintains the monochr

Typography

The type system uses Inter exclusively, a geometric sans-serif that conveys technical precision and modern efficiency. Display (60px, 700 weight) anchors hero sections and major market announcements. Headline-lg (40px, 600 weight) introduces market cards and section titles. Body-md (16px, 400 weight) is the workhorse for market data, descriptions, and form labels—set at 16px to ensure 1.5x line-height (24px) provides breathing room in dense data tables. Label-md (14px, 500 weight) is applied to buttons, badges, and navigation items; the 0.01em letter-spacing adds subtle technical character. All text over dark backgrounds uses the primary (#f5f8ff) or on-surface-variant (#c2d6ff) colors; apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) on small labels (label-sm, 12px) when layered over busy

Layout

The layout uses a 12-column fluid grid with a max-width of 1280px, centered on desktop and edge-to-edge on mobile. The gutter is 24px (3 units), applied consistently between columns and sections. Page rhythm is driven by lg spacing (40px) for section separation—this creates breathing room between market cards, charts, and data panels. The header is fixed at 125px height (as defined in the HTML style attribute --header-h), leaving ample room for navigation and branding. Container padding is 24px on desktop, 16px on tablet, and 12px on mobile. Cards and modals use md spacing (24px) internally for padding, with sm spacing (12px) between nested elements. The design favors generous whitespace: no section should feel cramped. Use the spacing scale semantically—xs (4px) for micro-interactions lik

Elevation & Depth

Depth is conveyed through layered opacity and subtle shadows rather than dramatic z-index stacking. Level 1 (Base): the dark surface (#0b0c0f) with no shadow. Level 2 (Standard Card): rgba(194, 214, 255, 0.03) background + 1px border in rgba(194, 214, 255, 0.1) + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1). Level 3 (Elevated/Modal): rgba(194, 214, 255, 0.08) background + 1px border in rgba(194, 214, 255, 0.15) + box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12). Hover states on cards increase the background opacity to 0.06 and the border to 0.15, creating a subtle lift without animation. Modals use a

Shapes

The shape philosophy is 'Technical Softness'—rounded corners are used to humanize the interface without sacrificing precision. Buttons use xl radius (1.5rem / 24px), creating a pill-like appearance that signals interactivity and approachability. Cards and modals use xl radius (24px) for consistency with buttons, reinforcing a cohesive component language. Input fields use DEFAULT radius (0.5rem / 8px), a tighter curve that suggests data entry and form-like functionality. Small UI elements (badges, chips, list items) use md radius (0.75rem / 12px) as a middle ground. The full radius (9999px) is

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses the primary color (#f5f8ff) on a dark background, creating maximum contrast. Padding is 8px horizontal × 24px vertical (0 24px in shorthand), height 48px, with xl rounding (24px). On hover, the background shifts to primary-fixed-dim (#c2d6ff) and a subtle shadow (0 4px 12px rgba(0, 0, 0, 0.1)) appears, creating a lift effect. The transition is 200ms ease. Button-secondary uses a transparent background with a 1px border in rgba(194, 214, 255, 0.1) and text in primary (#f5f8ff); on hover, the background becomes rgba(194, 214, 255, 0.08) and the border strengthens to 0.2 opacity. Button-ghost has no border or background, only text in on-surface-variant (#c2d6ff); on hover, a subtle background

Do's and Don'ts

**Do**

• Do use primary (#f5f8ff) exclusively for CTAs, key metrics, and interactive elements—never for body text or backgrounds.
• Do apply the 1px border in rgba(194, 214, 255, 0.1) to all cards and inputs to define edges crisply against the dark canvas.
• Do use secondary (#99ffbc) for gains, 'Up' predictions, and positive outcomes; tertiary (#ff8825) for warnings and neutral states; error (#ff3d5e) for losses and critical alerts.
• Do maintain the 24px gutter between columns and 40px spacing between sections—generous whitespace is a feature, not a bug.
• Do use Inter at 16px body-md for all body text; apply 1.5x line-height (24px) for readability in dense data tables.
• Do round all corners to at least 8px (DEFAULT); use 24px (xl) for buttons, cards, and modals to signal interactivity.
• Do apply box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) on hover states to create a subtle lift effect without animation.
• Do use rgba(194, 214, 255, 0.03) to 0.15) opacity layers for depth—this maintains monochromatic sophistication while allowing visual separation.

**Don't**

• Don't use pure white (#ffffff) or pure black (#000000) as primary colors—use #f5f8ff and #0b0c0f instead for reduced eye strain.
• Don't apply shadows to text; use text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) only on small labels over busy backgrounds.
• Don't mix accent colors on a single element—if a button is primary, the text is on-primary; don't layer secondary or tertiary on top.
• Don't use sharp corners (0px border-radius) anywhere in the interface—even dividers should have subtle rounding.
• Don't exceed 1280px container max-width on desktop; maintain 24px gutters and 40px section spacing to avoid cramped layouts.
• Don't apply animations to non-interactive elements; reserve transitions (200ms ease) for hover, focus, and state changes only.
• Don't use more than 3 accent colors (primary, secondary, tertiary) in a single view—visual noise reduces trust in a trading platform.
• Don't set body text smaller than 16px or larger than 18px; maintain 1.5x line-height (24px) for legibility in data-dense contexts.