---
title: "Jam design system"
variant: extended
source: https://jam.dev/
captured_at: 2026-10-12
theme: light
industry: devtools
generator: Design DNA (https://four.wiralomi.com/style/jam-dev)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Jam · Design System

> Quiet, bright surfaces for capturing the full story.

**Theme:** light · **Industry:** devtools · **Source:** https://jam.dev/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Jam presents a screen-recording and debugging product through a spacious, light homepage punctuated by vivid lime actions and immersive dark developer sections. Product UI imagery, compact feature cards, and direct calls to action make technical capabilities feel approachable.

## North star

Keep the page airy and product-led, using lime only to direct attention and dark sections to distinguish developer-focused content.

## Overview

The page is built on a near-white canvas, with charcoal typography and pale, warm-gray panels keeping the main experience calm and legible. Lime green is reserved for high-priority actions and small product highlights; occasional violet and blue accents appear as supporting details rather than a competing palette. Onsite Standard’s clean sans-serif character supports large, tightly tracked headlines, while body copy stays moderate in size and muted in color. A centered hero introduces the product above a large recording-interface showcase, then broad content sections alternate between split introductions, pale product cards, and compact feature grids. Product screenshots are the primary imagery: framed as interface demonstrations rather than decorative illustrations. Lower on the page, nearly black developer sections reverse the palette and use dark cards to spotlight technical integrations. Rounded controls, restrained shadows, and fine grid-like backgrounds add depth without clutter.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main canvas and light content areas; preserves the page’s open, bright feel. |
| Soft Charcoal | `#202020` | `--color-soft-charcoal` | neutral | Primary headings, body text, and inverse surfaces in dark feature sections. |
| Quiet Graphite | `#626461` | `--color-quiet-graphite` | neutral | Muted supporting copy and footer text on light backgrounds. |
| Jam Lime | `#a7f374` | `--color-jam-lime` | accent | Primary Chrome Extension CTA and small emphasis details. |
| Pale Sage | `#f9faf7` | `--color-pale-sage` | surface | Feature cards, subtle buttons, and soft section surfaces. |
| Night Ink | `#050605` | `--color-night-ink` | surface | Large dark developer and agent content bands. |
| Silver Ash | `#b1b1b0` | `--color-silver-ash` | neutral | Secondary text and subdued details, especially on dark surfaces. |
| Grid Mist | `#f0f1ed` | `--color-grid-mist` | semantic | Very subtle grid lines and tonal transitions behind content. |
| Fresh Leaf | `#9aea5f` | `--color-fresh-leaf` | accent | Secondary lime emphasis in text and small interface highlights. |
| Deep Moss Ink | `#1c1d1b` | `--color-deep-moss-ink` | neutral | Minor dark interface detail; keep subordinate to the main dark section color. |
| Orchid Signal | `#d470ff` | `--color-orchid-signal` | accent | Occasional small accent within interface visuals, not a dominant page color. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f9faf7` (Pale Sage) · `--color-surface-2` → `#202020` (Soft Charcoal) · `--color-surface-3` → `#050605` (Night Ink) · `--color-surface-4` → `#b1b1b0` (Silver Ash) · `--color-text` → `#202020` (Soft Charcoal) · `--color-text-muted` → `#626461` (Quiet Graphite) · `--color-text-subtle` → `#b1b1b0` (Silver Ash) · `--color-accent` → `#a7f374` (Jam Lime) · `--color-accent-2` → `#9aea5f` (Fresh Leaf) · `--color-accent-3` → `#d470ff` (Orchid Signal) · `--color-on-accent` → `#0000ee`

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#202020` | `#ffffff` | 16.29:1 | AAA |
| `#202020` | `#f9faf7` | 15.55:1 | AAA |
| `#202020` | `#050605` | 1.25:1 | fail |
| `#626461` | `#ffffff` | 5.97:1 | AA |
| `#626461` | `#f9faf7` | 5.7:1 | AA |
| `#626461` | `#202020` | 2.73:1 | fail |
| `#626461` | `#050605` | 3.4:1 | AA-large |
| `#b1b1b0` | `#ffffff` | 2.15:1 | fail |
| `#b1b1b0` | `#f9faf7` | 2.05:1 | fail |
| `#b1b1b0` | `#202020` | 7.59:1 | AAA |

### Gradients

- `linear-gradient(to right, rgba(255, 255, 255, 0.1) 1px, rgba(0, 0, 0, 0) 1px), linear-gradient(rgba(255, 255, 255, 0.1) 1px, rgba(0, 0, 0, 0) 1px)`
- `linear-gradient(to right, rgb(240, 241, 237) 1px, rgba(0, 0, 0, 0) 1px), linear-gradient(rgb(240, 241, 237) 1px, rgba(0, 0, 0, 0) 1px)`
- `linear-gradient(rgba(255, 255, 255, 0.6) 0%, rgba(249, 250, 246, 0.75) 100%)`
- `linear-gradient(to right, rgb(240, 241, 239) 1px, rgba(0, 0, 0, 0) 1px), linear-gradient(rgb(240, 241, 239) 1px, rgba(0, 0, 0, 0) 1px)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Onsite Standard Regular | `--font-body` | webfont | 400 | Body copy and explanatory text | Inter |
| Onsite Standard Medium | `--font-display` | webfont | 500 | Display headlines, headings, captions, and links | Inter |
| Onsite | `--font-onsite` | system | 500 | Compact secondary headings | Inter |

- **Onsite Standard Regular:** Regular weight with open, readable line spacing; sentence case and neutral tracking.
- **Onsite Standard Medium:** Medium weight; display and heading styles use tight negative tracking, with mostly sentence-case text.
- **Onsite:** Medium weight with tight heading tracking; use sparingly for smaller section titles.

### Type scale — Augmented Fourth (ratio ≈ 1.414, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 500 | 1 | -0.04em | — | Onsite Standard Medium | Oversized hero headline and high-impact section statements. |
| h1 | 40px | 500 | 1.2 | -0.02em | — | Onsite Standard Medium | Primary section headings and page-level titles. |
| h2 | 24px | 500 | normal | -0.03em | — | Onsite | Compact secondary headings within content sections. |
| h3 | 20px | 500 | 1.4 | -0.02em | — | Onsite Standard Medium | Feature-card and product-panel titles. |
| body | 16px | 400 | 1.5 | 0 | — | Onsite Standard Regular | Explanatory copy, descriptions, and supporting paragraphs. |
| caption | 14px | 500 | 1.43 | 0 | — | Onsite Standard Medium | Small labels, metadata, and interface annotations. |
| link | 14px | 500 | 1.43 | 0 | — | Onsite Standard Medium | Navigation links and secondary text actions. |

OpenType features in use: `"blwf", "cv03", "cv04", "cv09", "cv11"`.

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 3, 4, 8, 12, 14, 16, 17, 20, 24, 25, 30, 32, 48, 64, 120 px.
- Section rhythm 64px · element gap 8px · card padding — · max content width 1180px.

Use a centered content column with a measured maximum width of 1180px. The hero is centered and generous, with its message, supporting copy, CTA stack, and product screenshot arranged vertically. Below it, alternate broad split-intro sections with feature grids and product showcases. Maintain a comfortable density and clear whitespace between sections; the measured section rhythm is 64px. Use a restrained three-column footer structure, and reserve full-width dark bands for developer-focused content.

## Shape & elevation

- Radius: button `12px` · card `16px` · media `18px` · nav `18px` · link `12px` · xs `5px` · sm `6px` · md `9px` · lg `12px` · xl `16px` · 2xl `18px`
- Shadow `sm` (card): `rgba(37, 73, 0, 0.03) 0px 1px 4px 0px`
- Shadow `inset` (link): `rgba(30, 44, 0, 0.14) 0px 0px 0px 1px, rgba(255, 255, 255, 0.24) 0px 1px 0px 0px inset`
- Shadow `sm-2` (card, button): `rgba(0, 0, 0, 0.01) 0px 0px 0px 1px, rgba(0, 0, 0, 0.27) 0px 0px 1px 0px, rgba(0, 0, 0, 0.09) 0px 1px 2px 0px`
- Shadow `md` (card): `rgba(0, 0, 0, 0.06) 0px 4px 6px -2px, rgba(0, 0, 0, 0.09) 0px 10px 15px -3px, rgba(0, 0, 0, 0.01) 0px 0px 0px 1px, rgba(0, 0, 0, 0.27) 0px 0px 1px 0px`
- Shadow `inset-2` (button): `rgba(255, 255, 255, 0.24) 0px 1px 0px 0px inset, rgba(90, 193, 1, 0.48) 0px 0px 0px 1px`
- Shadow `inset-3` (card): `rgba(0, 0, 0, 0.02) 0px 1px 2px 0px, rgba(0, 0, 0, 0.09) 0px 1px 3px 0px, rgba(0, 0, 0, 0.01) 0px 0px 0px 1px, rgba(0, 0, 0, 0.27) 0px 0px 1px 0px, rgba(255, 255, 255, 0) 0px 0px 0.5px 0px inset, rgba`
- Motion: standard transition `0.4s cubic-bezier(0.44, 0, 0.56, 1)` on interactive elements.

Most surfaces feel flat, with pale card fills and subtle, measured shadows to separate product panels from the canvas. Buttons and links use restrained inset or fine shadow treatments rather than heavy outlines. Layer screenshots as overlapping interface windows, keeping elevation soft and focused on product demonstrations.

## Imagery

Use real-looking product interface captures as the main visual asset, framed inside clean, softly rounded panels. Show enough interface detail to communicate recording and debugging workflows, with layered windows where useful. Avoid decorative stock photography; small icons and colorful interface details should remain subordinate to the product UI. Dark sections use screen captures against near-black backdrops.

## Components

### Primary CTA

Lime-filled button in #a7f374 with blue #0000ee text, rounded 12px corners, and a subtle inset edge; used for the extension download.

### Secondary download link

Light or unfilled control with blue link text, rounded 12px corners, and a restrained inset shadow.

### Announcement pill

Compact pale #f9faf7 announcement control with blue text, rounded corners, and a small icon.

### Feature card

Pale sage #f9faf7 card with rounded 16px corners and a very soft shadow; pairs a product visual with concise copy.

### Product showcase

Large interface screenshot displayed in a softly rounded frame, often layered over a faint grid or pale background.

### Dark developer card

Charcoal panel within a near-black band, presenting technical interface imagery, a short heading, and supporting text.

### Footer columns

Light footer with brand mark and grouped product, company, and contact links arranged in three columns.

### Measured component styles

- **Primary button** (“Get Chrome Extension”): background #a7f374 · text #0000ee · radius 12px · padding 8px 16px · 400 12px sans-serif · shadow rgba(255, 255, 255, 0.24) 0px 1px 0px 0px inset, rgba(90, 193, 1, 0.48) 0px 0px 
- **Secondary button** (“New: Agents can record Jams”): background #f9faf7 · text #0000ee · radius 12px · padding 0px 6px · 400 12px sans-serif · shadow rgba(0, 0, 0, 0.01) 0px 0px 0px 1px, rgba(0, 0, 0, 0.27) 0px 0px 1px 0px, rgba(0
- **Link** (“Download for Mac”): transparent background · text #0000ee · radius 12px · padding 8px 16px · 400 12px sans-serif · shadow rgba(30, 44, 0, 0.14) 0px 0px 0px 1px, rgba(255, 255, 255, 0.24) 0px 1px 0px 0px
- **Card** (“Capture feedback as it happens Record yo”): background #f9faf7 · text #000000 · radius 16px · padding 0px · 400 12px sans-serif · shadow rgba(37, 73, 0, 0.03) 0px 1px 4px 0px
- **Navigation item** (“Product Pricing Contact Blog Docs Log in”): transparent background · text #000000 · radius 0px · padding 8px 20px · 400 12px sans-serif

## Do

- Lead with a centered, concise product message.
- Use lime green for primary actions and selective emphasis.
- Give product screenshots ample whitespace and clear framing.
- Alternate feature cards with broader split-layout sections.
- Use dark bands for developer and agent-focused stories.
- Keep body copy muted, readable, and concise.

## Don't

- Do not fill the page with saturated accent colors.
- Do not use heavy borders or dramatic shadows on every card.
- Do not let decorative imagery overpower the product interface.
- Do not compress the hero and section spacing.
- Do not carry light-page styling unchanged into dark developer bands.
- Do not introduce unsupported palette colors.

## Agent prompt

Build a new page in Jam’s clean, product-led style. Use Gallery White (#ffffff) as the main canvas, Soft Charcoal (#202020) for strong typography, and Quiet Graphite (#626461) for supporting copy. Reserve Jam Lime (#a7f374) for the primary action; use Pale Sage (#f9faf7) for quiet cards. Structure the page around a centered hero, a prominent product-interface showcase, and alternating feature grids or split sections. Keep generous whitespace and use the measured 1180px content maximum and 64px section rhythm. Use rounded controls and subtle shadows rather than thick borders. Add a near-black Night Ink (#050605) band only where technical or developer content benefits from a clear visual change. Product screenshots should explain workflows, not serve as decoration.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | footer | Light footer with a brand mark and three link columns for product, company, and contact. | Grouped navigation, Direct access to key destinations | Three-column link groups, Brand mark, Quiet light surface |

## Source CSS custom properties (selected)

```css
--jam-cookiebot-background: #1f201e;
--jam-cookiebot-text: #ffffff;
--jam-cookiebot-primary-text: #eeeeee;
--jam-cookiebot-secondary-text: #b4b4b4;
--jam-cookiebot-tertiary-text: #7b7b7b;
--jam-cookiebot-muted-text: rgba(255, 255, 255, 0.69);
--jam-cookiebot-green-text: #1c2024;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/jam-dev