# superx.so

Source: https://superx.so/
Captured: 2026-09-20
Tags: saas, landing, dark, both, dark-techno, bento, technical, confident, energetic, warm
Colors: #1c1b1a, #4d3a2a, #4f4d4e, #734f34, #717070, #92918e, #b1b1b1, #a8704a
Type (h1): Inter · 60px/66px · 500 · tracking -3px — "Grow and monetize your audience, faster"
Type (h2): Inter · 36px/40px · 500 — "Your Growth Dashboard, Built Into 𝕏"
Type (h3): Inter · 30px/36px · 500 · tracking -0.75px — "Start Every Day With Proven Ideas."
Type (body): Inter · 16px/26px · 400 — "Create, schedule posts, and engage strategically. Everything you need to grow on"
Type (button): Inter · 14px/20px · 400 — "Get Started for Free"
Button: "Get Started for Free" — fill #2c2b2b, text #ffffff, radius 11px, border 0px, padding 12px 16px, height 44px, type 14px/400
Radii: 9999px (79), 16px (26), 12px (11), 11px (5)

## Images

- Hero (desktop): https://media.lvly.design/library/superx-so/hero.webp?v=58053852
- Page crop (mid-1): https://media.lvly.design/library/superx-so/mid-1.webp?v=86fc66ef
- Page crop (mid-2): https://media.lvly.design/library/superx-so/mid-2.webp?v=0a56b459
- Hero (mobile): https://media.lvly.design/library/superx-so/mobile-hero.webp?v=9dfb37f5
- Full page (desktop): https://media.lvly.design/library/superx-so/full.jpg?v=183a083e
- Full page (mobile): https://media.lvly.design/library/superx-so/mobile-full.jpg?v=53708462
- Clip preview (mp4): https://media.lvly.design/library/superx-so/video-37kcca.preview.mp4?v=cb4269df

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.

## Steal-worthy details

- Hero headline is Inter **500 at 60/66 with -3px tracking** (≈ -0.05em) — the density comes from negative letter-spacing on a medium weight, not from bold; h3 drops to -0.75px and body runs 16/26 at normal tracking
- One word of the headline is filled with a warm orange-to-amber gradient while the rest stays pure white, so the page has exactly one saturated word above the fold
- The only light source is a soft radial ember bloom low behind the product mockup, fading into #181818 within a third of the viewport — no section fills, no panels, no glass, just that bloom
- Blueprint chrome: 1px vertical rules at the container's left and right margins run the full page, and each section boundary is ticked with a small filled triangle pointing inward from both rules
- Card grids place small plus-shaped crosshairs at their corner intersections instead of borders — the grid is implied by four marks rather than drawn
- Every section head opens with the same eyebrow: a fully rounded pill (radius 9999px, count 79 on this page) holding a ringed icon circle then a 14px label, centered above a 36/40 weight-500 heading
- Feature lists use a small orange dot, a white title line and a gray subline, with a thin vertical hairline dropping from each dot to connect the items into a spine
- A persistent bottom bar floats above the page all the way down — a 16px-radius dark card with a bold promise, a gray trust line and the same gray CTA, never full width, always centered

## Style recipe

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.