superx.so

A near-black product page (#1c1b1a over nearly 90% of the surface) that gets all of its color from a single warm ember bloom sitting low behind the hero mockup, like a sunrise on a horizon. The headline is Inter at 60/66 in weight 500 with a brutal -3px tracking, so it reads as one dense mass rather than a shouted bold line, and the one word that carries the promise is filled with an orange gradient — the only saturated type on the page. Everything structural is drawn with hairlines: two vertical rules mark the container's left and right margins the whole way down, small filled triangles tick every section boundary, and plus-shaped crosshairs sit at the intersections of the card grids, giving the page a drafting-table logic that costs almost nothing in ink. Sections alternate between a centered eyebrow pill plus heading and wide two-up cards whose product screenshots are layered at slight depth and cropped past the container edge, so the UI always looks bigger than the frame. The restraint that makes it work: with an ember glow available, the primary button is still a quiet #2c2b2b gray with a 14px regular label and an arrow — the brand color is atmosphere, never a control.

Build on a single near-black ground, #1c1b1a (page #181818), and let one warm light source carry the entire brand. Type is Inter throughout: h1 60px / 66px line / weight 500 / letter-spacing -3px, h2 36/40/500 normal tracking, h3 30/36/500 at -0.75px, body 16/26/400, controls 14/20/400. Never go above weight 500 — density comes from negative tracking, not from bold. Color roles: text #ffffff at full strength for headings, ~60% white for body and metadata, warm amber #a8704a rising to a hot orange only in (a) a single gradient-filled word in the main headline, (b) list bullets and small status dots, and (c) an out-of-focus radial bloom placed low behind the largest visual, fading to ground within 400px. Surfaces are one step off the ground with a 1px white-at-8% hairline, radius 16px; buttons are radius 11px, height 44px, padding 12px 16px, filled #2c2b2b with white 14px regular text and a trailing arrow — keep the brand color out of controls entirely. Pills are radius 9999px and carry a leading icon inside its own ring circle. Draw structure with a drafting kit, not with boxes: two 1px vertical rules at the layout margins running the full document, small filled triangles ticking each section boundary from both rules, and plus-shaped crosshairs at the corner intersections of any card grid. Rhythm: 160–200px between sections, a centered eyebrow pill plus heading plus one-sentence deck, then a two-up or three-up card row; let product imagery layer at slight depth and bleed past the right container edge so it reads as larger than the frame. Motion is restrained — glow breathes slowly, cards lift 2px on hover, nothing bounces. Float a permanent centered CTA card at the bottom of the viewport in the same surface and radius as the cards. The two moves that make it recognizable: the single warm bloom on an otherwise unlit page, and the hairline-and-tick drafting grid holding everything in place.