# cuelume.dev

Source: https://cuelume.dev/
Captured: 2026-10-13
Tags: saas, landing, light, both, minimal, swiss, calm, technical, confident, elegant
Colors: #faf9f6, #d3d2d0, #737271, #91908e, #b1b0ae, #232323, #555554
Type (h1): Inter-3b369a318bc9c36a · 54px/56.7px · 500 · tracking -1.89px — "Interfaces that sound as good as they feel."
Type (h2): Inter-3b369a318bc9c36a · 30px/34.5px · 500 · tracking -0.84px — "Fourteen cues, one for each job."
Type (body): Inter-3b369a318bc9c36a · 16px/25.6px · 400 · tracking -0.195px — "Fourteen interaction sounds for the web, synthesized live. Nothing to download, "
Type (small): Inter-3b369a318bc9c36a · 11.5px/17.825px · 500 · tracking -0.12px — "Vercel"
Type (button): Inter-3b369a318bc9c36a · 12.5px/normal · 500 · tracking -0.125px — "+ ++ +++:. +++:. ++ + select 3"
Button: "+ ++ +++:. +++:. ++ + select3" — fill #ffffff, text #6b6a68, radius 16px, border 0px, padding 12px 10px 9px 10px, height 116px, type 12.5px/500
Radii: 16px (21), 12px (16), 10px (14), 14px (2), 8px (1)

## Images

- Hero (desktop): https://media.lvly.design/library/cuelume-dev/hero.webp?v=0f146fc1
- Page crop (mid-1): https://media.lvly.design/library/cuelume-dev/mid-1.webp?v=c09d3e33
- Page crop (mid-2): https://media.lvly.design/library/cuelume-dev/mid-2.webp?v=7fc3530c
- Hero (mobile): https://media.lvly.design/library/cuelume-dev/mobile-hero.webp?v=9fd3063c
- Full page (desktop): https://media.lvly.design/library/cuelume-dev/full.jpg?v=a69176a3
- Full page (mobile): https://media.lvly.design/library/cuelume-dev/mobile-full.jpg?v=75f133fe
- Clip preview (mp4): https://media.lvly.design/library/cuelume-dev/video-8438y3.preview.mp4?v=f0cf0feb

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.

## Steal-worthy details

- Split social-proof chip above the H1: a black inset tag ("▲ Vercel") fused to a white outlined label ("uses Cuelume in fx") in a single 1px-bordered pill. It reads as a credential, not a badge
- Header-as-row that collapses into a floating, bordered pill nav centered at about 550px wide once you scroll, with the wordmark, text links and an outlined "agents.md ⧉" copy button kept inside it
- An "agents.md" copy button in the nav. It is a first-class CTA for AI coding agents, styled as a small white bordered chip with a copy icon
- Testimonials as dark chat bubbles (#232323 fill, white 14px text, 8px radius) scattered asymmetrically around a centered "What people said." heading. Each sits over a gray name and a black company name, like a group chat frozen mid-scroll
- ASCII-glyph visualizations (`+ = : .` in a mono face) used as product illustrations. Inactive glyphs are pale gray and active ones turn black, so a single character grid doubles as a waveform and a state indicator
- A 7×2 grid of white sound cards, each with a mini ASCII envelope, a tiny colored status dot and the cue name. Below it, a caption line and a segmented control (Default / Mech / Bubble / Press) re-skin all fourteen at once
- Feature cards pair a live control (a weekday segmented picker, a "Tap the glass" button, Draft/Save/Publish) with a monospace attribute tag like `data-cuelume-emphasis` and a three-line gray explanation. The API is the label
- A stats row of oversized numerals ("9.0 kB", "0", "1", "14") with a tiny unit suffix, a bold label and a muted one-liner, divided by hairline verticals
- A giant pale-gray "cuelume" wordmark bleeding off the bottom of the footer, at a tint barely darker than the page

## Style recipe

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.