superscale.ai

A warm-cream AI marketing platform that spends its color budget on exactly one thing. The whole page sits on #fdfbf8 — paper, not white — and the only saturated element anywhere is #ff5500: the second line of the headline, the primary button, the inline text links, and finally the entire footer, which flips to a full-bleed orange takeover. Everything between is warm neutral: taupe #d7cdc6 hairlines, #baaca0 muted text, near-black ink. The type is a single geometric grotesque at one weight band (400/500) with negative tracking that tightens as size grows, from 18px/-0.36px body up to a 100px/105px/-1px display line, so the page reads as one voice rather than a hierarchy of fonts. The hero avoids the usual product screenshot by scattering eight overlapping app windows, each with a gray title bar carrying a literal filename — people-campaign.png, campaign-video.mp4, prompt your way — which sells "this thing makes assets" far better than a dashboard would. Below the fold the structure is deliberately un-carded: sections become large-radius warm-gray panels inset from the page edge, and features sit in hairline-divided columns with no card chrome at all. The playfulness is rationed and thematic — a pixel-block photo dissolve under "Campaigns as fast as pixels render," a bitmap-styled orange display line — so a page that is fundamentally a restrained warm minimal system still feels like it has a pulse.

Build on warm paper, not white. Page ground #fdfbf8; sections that need separation become a panel of #f1eeea inset ~32px from the page edge with a 30px radius, so the cream frames them — never a bordered card. Ink is near-black #1a1a1a; muted text #baaca0; every rule and divider is a 1px #d7cdc6 hairline. One accent only: #ff5500, used for the second line of a headline, the primary button, inline links, active carousel segments, and the footer ground — nothing else in the palette is saturated.

Type: one geometric grotesque for everything, two weights (400 and 500) plus a single 700 for micro-labels. Scale with tracking that tightens as size grows — display 100px/105px/-1px weight 500, h1 40px/44px/-0.8px weight 500, body 18px/22.5px/-0.36px weight 400, buttons 16px/20px/-0.32px weight 400, micro-label 10px/10.4px weight 700 uppercase with · separators. Emphasis is done with color, never with bold or italic: split a headline across two lines and set the second in the accent.

Radii are small and few: 5px on buttons, 8px on media and mockups, 30px on section panels. Buttons are 40px tall, 0 20px padding, zero border, solid fill — primary in accent with white label, secondary in near-black with white label, tertiary as accent text plus a →. Feature grids use no card chrome: a hairline above the row, hairlines between columns, a ~36px white rounded tile for each icon, title at 16px, one muted line beneath. Shadows only on floating mockups — soft, large-radius, low-opacity — and nowhere on flat UI.

Two moves make it recognizable. First, dress product imagery as loose files: overlap five to eight windows at varying depths, each with a gray title bar carrying a lowercase filename with its extension, rather than showing one clean dashboard. Second, pick a single graphic motif tied to the product's claim (here, square pixel blocks) and run it in exactly two places — a headline treatment and one image dissolve — in the accent plus the page neutrals. Motion stays subtle: fade-and-rise on scroll, the dissolve animating in on view. Close the page with a full-bleed accent footer, white links, headings at 60% white, and an oversized wordmark as the last thing on screen.