afterhour.com

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.

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.