jam.dev

Jam: Screen recorder for bugs, feedback, and ideassaved 2h ago · captured 2h ago

Twelve details, twelve pinned.

View as Markdown ↗

Colors8 colors · ground #FDFDFD

ground#fdfdfd·86.30%#b0b0b0·4.94%#cfd1d0·2.26%#8f9193·2.12%#6e6f71·0.80%#d0e5fc·0.77%#a4f270·0.76%#545555·0.46%

Sized by coverage · click to copy.

Typography2 families · 4 styles · Onsite Standard Medium, Onsite Standard Regular

The

Onsite Standard Medium · 64/64 · 500 · -2.56px

Capture the moment. Share the full story.

Onsite Standard Medium · 40/48 · 500 · -0.8px

Capture feedback as it happens

Onsite Standard Medium · 20/28 · 500 · -0.4px

Body

Quickly record bugs, issues, and ideas with all the technical context teammates

Onsite Standard Regular · 18/26 · 400 · normal

Specimens are the page's own words at their measured metrics; shown in Inter when the family is not loaded.

ButtonsGet started1 style

Get started

primary · fill #a7f374 · label #202020 · radius 12px · border 0px · padding 8px 16px · height 40px · type 12px / 400

Shape4 radii · 10 uses

9px5 uses · 50%

12px2 uses · 20%

29px2 uses · 20%

18px1 use · 10%

AnalysisJam's landing page is a near-white (#fdfdfd) dev-tool page that stays friendly instead of sterile.

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.

Style recipeBuild 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, li…

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.

Details12 worth noting

jam.dev — the captured page — Landing, 1440 × 900 · captured Oct 28, 2026

1Inline icon chip in headline
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.
2CTA pair boxed with rating
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.
3Inset hairline nav container
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.
4Announcement pill with arrow
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".
5Fading grid backdrop
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.
6Double-bezel app window mock
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.
7Hairline-ruled logo marquee
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.
8Soft bento cards with bleeding mocks
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.
9Colored micro-tag labels
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.
10Dark technical band mid-page
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.
11Color-blocked testimonial pair
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.
12Edge cursor name-tag decals
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.