# jam.dev

Source: https://jam.dev/
Captured: 2026-10-28
Tags: saas, landing, mixed, both, minimal, bento, dark-techno, friendly, technical, confident, optimistic
Colors: #fdfdfd, #b0b0b0, #cfd1d0, #8f9193, #6e6f71, #d0e5fc, #a4f270, #545555
Type (h1): Onsite Standard Medium · 64px/64px · 500 · tracking -2.56px — "The"
Type (h2): Onsite Standard Medium · 40px/48px · 500 · tracking -0.8px — "Capture the moment. Share the full story."
Type (h3): Onsite Standard Medium · 20px/28px · 500 · tracking -0.4px — "Capture feedback as it happens"
Type (body): Onsite Standard Regular · 18px/26px · 400 — "Quickly record bugs, issues, and ideas with all the technical context teammates "
Type (button): sans-serif · 12px/normal · 400 — "Get started"
Button: "Get started" — fill #a7f374, text #202020, radius 12px, border 0px, padding 8px 16px, height 40px, type 12px/400
Radii: 9px (5), 12px (2), 29px (2), 18px (1)

## Images

- Hero (desktop): https://media.lvly.design/library/jam-dev/hero.webp?v=87f59451
- Page crop (mid-1): https://media.lvly.design/library/jam-dev/mid-1.webp?v=2ca34203
- Page crop (mid-2): https://media.lvly.design/library/jam-dev/mid-2.webp?v=5bf9d968
- Hero (mobile): https://media.lvly.design/library/jam-dev/mobile-hero.webp?v=f2c7f0fa
- Full page (desktop): https://media.lvly.design/library/jam-dev/full.jpg?v=cc7799dd
- Full page (mobile): https://media.lvly.design/library/jam-dev/mobile-full.jpg?v=36d1f1ed
- Clip preview (mp4): https://media.lvly.design/library/jam-dev/video-8k3oth.preview.mp4?v=278888aa

Jam's landing page is a near-white (#fdfdfd) dev-tool page that stays friendly instead of sterile. Three things carry the personality: a lime-green CTA (#a7f374) set in near-black type, a pale-blue (#d0e5fc) highlight wash behind one word of the headline, and a cartoonish strawberry-red wordmark. Everything else is gray hairlines, very pale card fills and Onsite Standard at weight 500 with tight negative tracking. The top half is a soft bento of feature cards that hold live product mocks: a browser popover, phone frames, a devtools panel. Partway down, the page drops into a full-bleed near-black band with a faint grid for the SDK and agent story, then comes back to light for testimonials and the closing CTA. The dark band is where the page's technical credibility lives, and the light sections set the approachable tone.

## Steal-worthy details

- Inline icon chip inside the headline. A blue rounded square holding a selection-marquee glyph sits flush against a pale-blue pill wrapped around the word "screen", so one word of the H1 reads like a highlighted UI selection.
- Stacked CTA card. The primary lime button and a white outline secondary sit inside one hairline-bordered card at 12px radius, with a "4.5 · 300,000+ users" star rating underneath, so the decision and the social proof read as one object.
- Floating nav pill. The header is a white rounded rectangle (about 18px radius) with a 1px #e5e5e5 hairline, inset from the viewport edges. Log in is a bordered ghost button and Get started is lime, both 40px tall.
- Announcement chip above the H1. It is a small bordered pill with an Apple glyph, medium-weight text and a trailing ↗ arrow, the lightest possible way to say "new".
- A faint graph-paper grid fades in behind the product mock and dissolves toward the hero copy, adding texture to a white page without adding tone.
- The product window mock has macOS traffic lights on a translucent gray outer frame, with the real app UI nested inside a second white frame, a double-bezel window.
- A grayscale logo marquee is pinned to the fold line and separated by a single hairline. The first and last logos are clipped at the edges to suggest motion.
- Feature cards use a #f7f7f5 fill, a 1px hairline and roughly 29px radius. A small row of faded gray browser icons sits above each title, and the product mock bleeds off the card's right or bottom edge.
- Colored micro-tags (purple, lime, yellow pills) sit above small feature blurbs. Each one is a single splash of hue in an otherwise gray grid.
- A full-bleed near-black (#0a0a0a) section with a subtle grid holds the SDK and agent story. Its cards are #1a1a1a with monospace data rows, green IDs and purple JSON, and a lime eyebrow ("Jam for agents") ties it back to the CTA color.
- Testimonial cards come as color-blocked pairs, one deep blue and one deep green, each with a large quote and a company wordmark, breaking the gray rhythm right before the close.
- Cursor-style name tags (pink, yellow, blue pills) hang off the page edges beside the hero and the final CTA, a multiplayer-presence decal that hints at collaboration.

## Style recipe

Build a light, friendly dev-tool page.

**Color and type**
- Background #fdfdfd, text #202020, secondary text #6e6f71, hairlines #e5e5e5 at 1px, card fills #f7f7f5.
- Use exactly one loud accent, lime #a7f374. Primary buttons get the lime fill with #202020 text at weight 500, 40px tall, 12px radius, 8×16px padding.
- Secondary buttons are white with a 1px hairline at the same radius.
- Pale blue #d0e5fc is the second accent. Use it only as a highlight wash behind a key word or a selected state.
- Set everything in a geometric grotesk at weight 500 (Onsite Standard, or Inter Display or Geist as a substitute). Display type is 64/64 at -2.56px tracking (-0.04em), H2 40/48 at -0.8px, H3 20/28 at -0.4px, body 18/26 regular.

**Layout and components**
- Center the hero copy.
- Put the primary and secondary CTAs inside one hairline card with a rating line under them.
- The nav is an inset white pill with a hairline, not a full-width bar.
- Feature sections are bento grids of pale cards: 1px border, about 28px radius, with real UI mocks that bleed off the card edges.
- Mocks sit in a double-bezel frame: a translucent gray outer frame with traffic lights and a white inner frame.
- Add texture with a faint graph-paper grid that fades out, never with gradients or shadows. Mock popovers get at most a soft 0–8px shadow.
- Radius scale is 9px for chips and inputs, 12px for buttons, 18px for the nav, and about 28px for cards.

**Dark band and decoration**
- For the technical deep dive, switch to a full-bleed near-black band (#0a0a0a with a subtle grid) and #1a1a1a cards. Data rows go in monospace with green and purple syntax tints, and a lime eyebrow ties the band back to the CTA.
- Use saturated color only in small doses: micro-tag pills, one pair of color-blocked testimonial cards (deep blue, deep green), and playful cursor name-tag decals at the page edges.
- Keep icons at a 1.5px stroke in gray.