ascente.design

A near-monochrome, Apple-grade product page for a browser design editor that lets the product do all the shouting. The page itself is an off-white #fbfbfa sheet set in SF Pro Display at weight 500 throughout, with one rhetorical trick repeated on every section: a short ink lead sentence followed by gray continuation copy in the same run. Color, texture and drama are rationed out to the content: near-black #141415 app frames floating on pale gray mattes, Swiss-style type studies (fluted-glass wordmarks, bar charts with a single orange-red bar, a green VHS "SIGNAL"), and a moody night photo split into a before/after. The chrome stays out of the way: a floating hairline pill nav, pill buttons, 28px cards and hairline FAQ rows.

Build on a warm off-white page (#fbfbfa) with near-black ink (#141415) and a gray ramp of #2d2d2d, #555554, #70716f, #91918f, #b0b0ae and #d4d4d3 for hairlines. Keep the interface fully achromatic and let color come only from content such as imagery, demos and illustrations. If you need a hue for a single highlight, use one small orange-red mark rather than a brand color. Set everything in SF Pro Display (fallback Inter) at weight 500, with no bold and no light. The display size is 56px with a 1.07 line-height and -0.03em tracking, h2 is 37px with -0.025em tracking, body is 16px with a 1.45 line-height, and buttons are 15px with -0.2px tracking. Write every heading and caption as a short ink lead sentence followed by gray continuation text in the same paragraph and size. Use a 999px radius for every button, chip and the nav, and 28px for every card, matte and media block, with 12px and 6px only for small inner controls. Make the primary button a 38–48px solid #111111 pill with white text and a trailing arrow. Make the secondary a pale gray tonal pill, and the tertiary a gray text link with an arrow. Float the nav as an inset white pill with a 1px hairline that goes translucent over imagery. Present screenshots as dark frames inside light gray 28px mattes with generous padding and a soft, wide shadow. Lay content on a centered column of about 960px with large vertical gaps between sections. Use flat tonal tiles instead of bordered cards, and hairline rows for lists and FAQs. Caption media with precise, number-quoting specs.