cuelume.dev

A developer-library landing page done almost entirely in warm grays. The page is off-white paper (#faf9f6), the ink is near-black, and there is no brand hue anywhere. Inter at weight 500 with tight negative tracking carries the headlines, and the only texture comes from monospace ASCII "waveform" art drawn in light gray glyphs inside white cards. Sections float in very generous vertical space (roughly 300px+ gaps), so each one reads like an exhibit. The demos are real, small, working controls, and they do the selling where a feature list would usually sit. The one dark mass on the page is a scatter of charcoal chat-bubble testimonials, which gives the social proof a voice rather than a logo wall.

Build on a warm off-white page (#faf9f6) with near-black ink (#111 for headlines and primary fills, #232323 for dark surfaces) and a warm-gray ramp for everything else: #555554 secondary text, #737271 body-muted, #91908e and #b1b0ae for tertiary text and idle glyphs, #d3d2d0 for hairlines. Use no brand hue. If you need one, keep it to tiny status dots on a card, never a fill.

Type is Inter only, plus a monospace for code and attribute tags. Headlines are weight 500 (never bold), 54/57px with -1.9px tracking for the H1 and 30/34.5px with -0.84px for section heads. Body is 16/25.6px, -0.2px tracking, in muted gray. UI labels run 12.5px at weight 500. Section heads sit left-aligned in a two-column row with a short gray paragraph on the right, or centered for the hero and the close.

Surfaces are white cards on the off-white page with a 1px #e6e5e2-ish border and no shadow. Use radii of 16px for cards, 12px for inner panels and 10px for chips and buttons. The primary button is a solid #111 fill with white text, about 32px tall and 8–10px radius. The secondary is white with a hairline border. Small tags (credentials, code attributes) are bordered mini-pills.

Illustrate with characters, not images. Draw ASCII grids in a mono face, with inactive glyphs at #b1b0ae and active ones in ink, so one pattern doubles as the visual and the state. Put a real, working control inside every feature card, then label it with its code identifier in a mono chip.

Space sections extremely far apart (around 300px) so each reads as a standalone exhibit. Keep the header chromeless at the top, then collapse it into a centered, bordered floating pill on scroll. Let social proof be the one dark mass on the page: charcoal speech bubbles in a loose, asymmetric scatter. Close with a giant ghost wordmark in a tint just darker than the page.