sohna.dev/waterlemon

Waterlemon sells icon "Skills" for ChatGPT and Codex, and the page gets out of the way so the icons can sell themselves. A white ground, a single 76px Inter headline at weight 700 and −3px tracking, and a chrome that is entirely black and gray: the key phrases sit in near-black while the connective words fade to a light gray, so the sentence reads as a highlight before it reads as a sentence. Two pills follow — an outlined one with a thick 4px black border and a solid black one — and then the product takes over: a grid of rounded 24px cards, each a 2×2 tile of illustrated icons with a gray caption strip naming the style (Glass, Watercolor, Yarn, Sketchy, Pulse, Candypop). Every bit of color on the page is inside the icons, which is exactly why they pop. It is a gallery pretending to be a landing page, and the restraint is the point.

Set a pure white page (#ffffff) and use Inter for everything. Display headlines at 72–80px, weight 700, tracking −3px, line-height ~1.2; body at 18px weight 600. Color the emphasised words #080808 and the rest of the headline a light gray (#ced0cf–#b0b0b0); never use a second face or size for emphasis. Keep the UI palette to black and a gray ramp (#303030, #505050, #6f6f6f, #909091, #b0b0b0, #ced0cf) — the only saturated color on the page lives inside imagery. Buttons are pills: 20px radius, 16–20px padding, 24px/700 label; the primary is solid #080808 with white text and the secondary is white with a 4px #080808 border. Compose content as a grid of cards with 24px radius and a 1px #ced0cf-ish hairline, subdivided into equal tiles by hairlines, each card closed by a light-gray (#f5f5f5-range) caption strip with a 18px/600 centered label; drop a small 12px "Pro"-style pill badge in a tile corner where needed. Inline small brand glyphs or emoji into headline text at cap height. Use wide gutters (32–40px) and 40–56px radii on outer groups. No gradients, no shadows beyond a faint edge, no color in chrome.