# afterhour.com

Source: https://www.afterhour.com/
Captured: 2026-09-13
Tags: saas, landing, dark, both, dark-techno, playful, energetic, confident, playful, edgy, rebellious
Colors: #0e0f0f, #2c2e2e, #4d4f4e, #6f30f4, #f0f0f1, #6e726e, #909090, #cfd0d0
Type (h1): Pprightgrotesk · 99.99px/79.992px · 900 · tracking -1.9998px — "Copy the best trades"
Type (h2): Pprightgrotesk · 179.982px/120.588px · 900 · tracking -3.59964px — "Super app"
Type (h3): Pprightgrotesk · 31.9968px/25.5974px · 900 · tracking -0.639936px — "Backed by"
Type (body): Passengersans · 18px/25.2px · 400 — "A place where genuine, unique, actionable conversations happen everyday. AfterHo"
Radii: 11.9988px (24), 19.998px (9), 159.984px (3), 31.9968px (3), 100% (3)

## Images

- Hero (desktop): https://media.lvly.design/library/afterhour-com/hero.webp?v=77ad17a2
- Page crop (mid-1): https://media.lvly.design/library/afterhour-com/mid-1.webp?v=90c4780f
- Page crop (mid-2): https://media.lvly.design/library/afterhour-com/mid-2.webp?v=7e1d774b
- Hero (mobile): https://media.lvly.design/library/afterhour-com/mobile-hero.webp?v=a36624d3
- Full page (desktop): https://media.lvly.design/library/afterhour-com/full.jpg?v=08702839
- Full page (mobile): https://media.lvly.design/library/afterhour-com/mobile-full.jpg?v=b228dd4b
- Clip preview (mp4): https://media.lvly.design/library/afterhour-com/video-wsuxti.preview.mp4?v=82fc05ba

AfterHour sells a social copy-trading app to retail traders, and the page talks like its users do: near-black ground (#0c0c0d), a 180px ultra-heavy grotesk headline ("Copy the best trades") set at weight 900 with -3.6px tracking, and a single loud violet (#6f30f4) reserved for the CTA pill and in-app accents. The seriousness of a finance product is deliberately undercut by toy-like marks — a yellow smiley baked into the logotype, giant yellow blob shapes that peek in from the hero's edge, and pastel-pink emoji rings (a brain in a ring for "Feed") floating as blurred, out-of-focus shapes behind each feature section. Product proof does the heavy lifting: a tilted iPhone showing verified positions with green/red sparklines sits directly in the hero, wrapped by a press logo strip (Fortune, Forbes, WSJ, TechCrunch) and a "Join 200,000+" eyebrow with the number highlighted in yellow. Feature sections repeat one template — phone on one side, a one-word display headline on the other, one line of cheeky copy ("No fake screenshots allowed. Save that for Twitter.") — inside slightly lifted rounded panels that layer tonally on the black.

## Steal-worthy details

- Headline scale as the identity: 180px / weight 900 / -2% tracking, two lines max, pure white on near-black; body stays a modest 18px/1.4 in a friendly humanist sans (Passenger Sans) so the contrast in scale is the whole hierarchy.
- Floating, pill-shaped nav (fully rounded, dark translucent, four items) centered on the page with the primary action as a filled violet pill inside it; the logo sits loose at the far left and a bordered QR tile at the far right.
- One-word feature headlines ("Feed") at display scale paired with a single emoji locked in a thick pastel ring — a branded icon system made from nothing but emoji + stroke.
- Depth without shadows: blurred ghost duplicates of the emoji marks and dimmed, de-focused UI cards drift behind the main content, so the layers read as bokeh rather than elevation.
- Yellow (#f5d90a-ish) used only as a highlight color in the eyebrow numbers and in the logo's smiley — a second accent that never becomes a button.
- Product UI is the illustration: real feed cards with avatar, verified-balance badge, ticker chips in green, and tiny green/red sparklines in a rounded ticker card — the app's actual visual language sells the product.
- The 12px panel radius (24 uses) vs 20px card radius vs full-round pills — three radii, each tied to a role.
- Cheeky microcopy in the sub-heads ("puts their money where their mouth is", "yap in stock chat rooms") gives a finance product a group-chat voice.

## Style recipe

Build on a near-black canvas (#0c0c0d page, #0e0f0f–#2c2e2e for lifted panels; no pure black, no borders — layer tone on tone). Headlines in an ultra-heavy geometric grotesk (weight 900, e.g. PP Right Grotesk / Druk-adjacent), hero at 160–180px with 0.67 line-height and -2% letter-spacing, section heads at 96–120px, often a single word; body in a humanist sans at 18px/1.4, weight 400, color #cfd0d0 on dark. One electric violet accent (#6f30f4) for every primary action and in-UI highlight; one warm yellow (#f5d90a) as a text highlight and mascot color only — never as a button. Positive/negative data in saturated green/red. Radii: 12px for panels, 20px for cards, 9999px for nav, buttons and chips. Nav is a floating centered pill with the CTA filled inside it. Illustrate with product UI on a tilted device mock, and build an icon system from single emoji inside a 12px pastel-pink ring; scatter blurred (24–40px blur, 30–50% opacity) copies of those marks and of UI cards behind the content for bokeh depth instead of drop shadows. Keep type white, copy short and irreverent, and let scale contrast — giant heading vs modest body — carry the hierarchy.