AfterHour

Overview

AfterHour is a fintech social trading platform built on a **High-Energy Maximalism** aesthetic—bold, neon-forward, and unapologetically youth-centric. The brand personality channels the energy of a trading floor meets a gaming community: fast-paced, confident, and irreverent. The UI celebrates contrast: a near-black canvas (#0c0c0d) acts as the stage for electric accent colors—a signature purple (#6f2bff) for primary actions, a high-visibility yellow (#feef1b) for secondary highlights, and vibrant magenta (#e12bff) for error and alert states. The design evokes the feeling of real-time market data, community energy, and the thrill of executing a winning trade.

The voice is conversational, direct, and playful—never corporate. Vocabulary skews toward trading vernacular and internet culture: "yap," "signals," "verified," "skew." Typography is deliberately heavy and geometric (Pprightgrotesk at 900 weight for headlines), creating visual weight and authority. Example sentence in brand voice: "We've raised $4.5M—now let's make some money together."

Colors

The color system is built on a **dark-first, accent-driven** philosophy. The surface stack anchors to near-black (#0c0c0d for base, #0e0e0f for container-lowest, #232426 for container-high), creating a recessive canvas that makes accent colors sing. Primary (#6f2bff, a vivid purple) is reserved exclusively for CTAs, interactive states, and brand moments—it appears on the main "Download" button, focus rings, and hover states. Secondary (#feef1b, a high-contrast yellow) is used for callouts, badges, and secondary actions; it creates visual pop without competing with primary. Tertiary (#1aacff, a cyan blue) supports data visualization and secondary interactive elements. Error (#e12bff, a hot magenta) is used for alerts and destructive actions, maintaining the high-energy palette. On-surface t

Typography

The type system is built on a **weight-forward, contrast-maximized** model. Headlines use Pprightgrotesk at 900 weight (display: 88px / 96px line-height, headline-lg: 56px / 64px), creating visual dominance and brand recognition. Body copy uses Passengersans at 400 weight (body-lg: 20px / 28px, body-md: 16px / 24px), providing legibility and breathing room. The pairing communicates confidence and clarity: heavy, geometric headlines anchor the page, while clean, approachable body text invites engagement. Letter-spacing is tightened on headlines (-0.04em to -0.01em) to increase visual impact and reduce perceived size, while body text maintains neutral spacing (0em) for readability. Apply text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) on small labels (label-sm: 12px) when layered over gradient bac

Layout

The layout system uses a **fluid 12-column grid** with a max-width of 1280px, scaling responsively via a --spacing-scale variable (1.0 on desktop, 0.75 on tablet, 0.5 on mobile). The hero section anchors the page with a full-bleed gradient background and a phone mockup positioned right, creating asymmetrical balance. Section separation uses lg spacing (40px on desktop, 30px on tablet, 20px on mobile) to create breathing room and visual rhythm. The gutter (24px) is applied consistently to all container padding, ensuring alignment and predictability. White-space is used aggressively: the hero headline "Copy the best trades" sits in isolation with 48px margin-bottom, allowing the message to land with impact. Cards and content blocks use md spacing (24px) for internal padding, creating a consi

Elevation & Depth

Depth is conveyed through a **layered shadow and gradient system** rather than flat design. Level 1 (Base): The background is a solid near-black (#0c0c0d) with subtle grain texture applied via CSS. Level 2 (Standard Cards): Cards use box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) and a 1px border at rgba(255, 255, 255, 0.05) to define edges without harsh contrast. Level 3 (Elevated/Modals): Modals and overlays use box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25) and a 2px border at rgba(111, 43, 255, 0.2) to signal prominence. Interactive hover states elevate cards with box-shadow: 0 8px 24px rgba(111,

Shapes

The shape philosophy is **Geometric Precision with Soft Affordances**—sharp enough to feel modern and technical, rounded enough to feel approachable. Buttons use full radius (border-radius: 9999px) to create pill-shaped affordances that signal clickability and reduce visual harshness. Cards use lg radius (1.25rem / 20px) to soften corners while maintaining definition. Input fields use md radius (1rem / 16px) to balance functionality and visual softness. Small UI elements (badges, tags) use full radius (9999px) to create compact, recognizable shapes. The rationale: full-radius buttons create a

Components

Action Elements Buttons are the primary affordance system. The button-primary component uses {colors.primary} (#6f2bff) with full radius (9999px), 16px vertical padding, and 32px horizontal padding, creating a 48px height. On hover, the background shifts to {colors.primary-fixed-dim} and a box-shadow: 0 8px 24px rgba(111, 43, 255, 0.3) is applied, creating a subtle lift. The transition duration is 200ms (transition: all 200ms ease-out). Button text uses {typography.label-md} with font-weight: 600 and letter-spacing: 0.01em. Secondary buttons use a transparent background with a 2px border at {colors.secondary} (#feef1b) and full radius; on hover, the background becomes rgba(254, 239, 27, 0.1). Ghost buttons use rgba(232, 232, 232, 0.05) background with {rounded.lg} (20px) and no border;

Do's and Don'ts

**Do**

• Do use {colors.primary} (#6f2bff) exclusively for primary CTAs and interactive states—it's the brand's signature accent and should never be diluted.
• Do apply full radius (9999px) to all buttons to create a visual shorthand for interactivity and maintain brand consistency.
• Do use Pprightgrotesk at 900 weight for all headlines to create visual dominance and brand recognition.
• Do maintain the dark surface stack (#0c0c0d to #232426) as the foundation—it's the canvas that makes accent colors sing.
• Do apply box-shadow: 0 8px 24px rgba(111, 43, 255, 0.3) on hover states to create subtle depth and visual feedback.
• Do use {colors.secondary} (#feef1b) for callouts and secondary actions to create visual pop without competing with primary.
• Do apply 200ms transition: all ease-out on interactive elements to create smooth, responsive feedback.

**Don't**

• Don't use pure white (#ffffff) for text—use {colors.on-surface} (#e8e8e8) to reduce eye strain on dark backgrounds.
• Don't apply sharp corners (0px radius) to buttons or cards—the brand uses full or lg radius exclusively.
• Don't use {colors.primary} (#6f2bff) for body text or secondary elements—reserve it for primary actions only.
• Don't apply box-shadow: 0 0 0 0 to any interactive element—always include a subtle shadow (md or lg elevation) to signal depth.
• Don't mix Pprightgrotesk and Passengersans weights arbitrarily—use 900 for headlines, 400 for body, 600 for labels.
• Don't use gradients on text—apply them only to backgrounds, borders, and overlay elements.
• Don't exceed a max-width of 1280px for content containers—maintain focus and readability on ultra-wide displays.