ultramock.io

Ultramock's landing page is a near-white (#fdfdfd) canvas that holds almost everything back so two things can carry it: a glossy orange "Open editor" button and the product's own renders — a painterly fisheye-sky photograph with a floating iPhone in a 24px-radius frame, then 3D laptops, phones and dark editor screens. The header is a detached, hairline-bordered tray inset 20px from the top, with small uppercase gray nav links centered in it. Headlines are Overused Grotesk at weight 500 with aggressively tight tracking (60px/57px, -2.4px on section heads, the hero larger still), always paired with a short Geist Sans 18px/27px gray paragraph, either centered beneath or parked in the right column opposite a left-aligned head. Features sit in a nested bento: an outer 24px hairline shell holding inner cards whose top half is a pale gray media well and bottom half a white caption. Proof is layered: a grayscale logo marquee, a hairline-ruled logo grid, a single pull quote, and a three-column masonry wall of X posts. Orange shows up only in small doses outside the CTA: MCP transcript bullets, a BETA pill, the highlighted pricing card. The page ends on a live editor screenshot and a pale, cropped pixel-font wordmark.

Design on a near-white ground (#fdfdfd, with #f5f5f5 to #e9e9e9 for media wells and recessed panels) and keep the chrome almost colorless: ink #101010 for headings, #6e6e6b for body and nav, #b1b0b0 for dates and meta, #dad8d4 or lighter for 1px hairlines. Set display type in a grotesk like Overused Grotesk at weight 500, 60–72px, tracking -0.04em, line-height 0.95; card titles 20–22px at 500–600 with -0.015em; body in Geist Sans 16–18px/1.5 regular in mid-gray; technical labels, eyebrows, badges and step numbers in Geist Mono 10–11px uppercase with 0.12em tracking, bracketed like [01]. Pair every headline with a short gray paragraph — centered beneath it, or placed in the right column opposite a left-aligned head. Put the header in an inset floating tray: 20px from the top, 1px light-gray border, ~16px radius, no shadow, logo left, 13px uppercase gray links centered, CTA right. Reserve exactly one saturated hue, a warm orange around #f4671f, for the primary button, the recommended pricing tier's border, small bullets and badges, and the single active state inside any product UI; build the button as a vertical gradient (lighter orange top, deeper bottom) with a 1px darker border, 16px radius, 8px 14px padding, 14–16px/500 white text and a soft same-hue glow below. Let photography and rendered product imagery supply all other color, framed at 24px radius and full container width. Group features in a nested bento: an outer 24px-radius hairline shell with ~8px padding holding 16px-radius cards, each a pale gray media well above a white caption band. Radii: 9999px for toggles, tags and segmented controls; 24px for media and outer shells; 16px for cards, buttons and the header tray. Present proof as grayscale logos in hairline-ruled grids and as a masonry wall of social-post cards with avatar, name, handle, text and a light-gray date. End pages with an oversized, pale, cropped wordmark bleeding off the bottom edge. The blues in the facts palette (#0774ee, #68acf4) belong to imagery, not the brand; do not use them for UI.