---
name: Jam.dev Website
description: Source-backed design system audit for the Jam.dev marketing homepage captured from https://jam.dev/ on May 22, 2026.
colors:
  primary: "#73E5BF"
  primaryAlt: "#73E5A7"
  primaryCookie: "#7CEDC7"
  buttonLarge: "#47B28F"
  accent: "#A37AF5"
  accentDeep: "#744EC2"
  danger: "#FF4070"
  ink: "#130F18"
  black: "#000000"
  blackberry: "#21192A"
  blackberryLight: "#252542"
  textMuted: "#8B94A3"
  textLavender: "#B89FD4"
  textSoft: "#D8DBE2"
  textOnDark: "#FFFFFF"
  headlineHero: "#E4E1F8"
  headlineSection: "#E9E6FC"
  headlineSectionEnd: "#E3DFF9"
  headlinePale: "#F1F0FF"
  borderDefault: "#E5E7EB"
  formBorder: "#3A2C47"
  surfaceLight: "#F9F9F9"
  neutralGlow: "#FAFAFA"
  blueAccent: "#3C81C7"
typography:
  display-hero:
    fontFamily: "Oldschool Grotesk, system-ui, sans-serif"
    fontSize: 88px
    fontWeight: 900
    lineHeight: 88px
    letterSpacing: 0px
  display-section:
    fontFamily: "Oldschool Grotesk, system-ui, sans-serif"
    fontSize: 66px
    fontWeight: 900
    lineHeight: 72.6px
    letterSpacing: 0px
  display-mobile:
    fontFamily: "Oldschool Grotesk, system-ui, sans-serif"
    fontSize: 48px
    fontWeight: 900
    lineHeight: 48px
    letterSpacing: 0px
  heading-mobile:
    fontFamily: "Oldschool Grotesk, system-ui, sans-serif"
    fontSize: 34px
    fontWeight: 900
    lineHeight: 37.4px
    letterSpacing: 0px
  body-md:
    fontFamily: "SF Pro Text, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 28px
    letterSpacing: -0.5px
  nav:
    fontFamily: "SF Pro Text, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 16px
    letterSpacing: 0px
  nav-mobile:
    fontFamily: "SF Pro Text, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0px
  tab:
    fontFamily: "SF Pro Text, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 19.5px
    letterSpacing: 0px
  cta:
    fontFamily: "SF Pro Text, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0px
rounded:
  none: 0px
  sm: 3.5px
  md: 6px
  lg: 8px
  xl: 12px
  media: 23px
  pill: 9999px
spacing:
  hairline: 1px
  focus: 2px
  tabBorder: 2px
  navHeight: 68px
  navMinHeight: 62px
  navPaddingX: 32px
  containerX: 16px
  containerMax: 1280px
  containerWide: 1240px
  heroCtaHeight: 64px
  controlHeight: 48px
  mobileInputHeight: 56px
  gapXs: 4px
  gapSm: 8px
  gapMd: 16px
  gapLg: 24px
  gapXl: 32px
  section: 80px
components:
  nav-link:
    typography: "{typography.nav}"
    textColor: "{colors.textMuted}"
    rounded: "{rounded.none}"
    padding: "{spacing.gapSm}"
  nav-button:
    typography: "{typography.nav}"
    backgroundColor: "{colors.blackberry}"
    textColor: "{colors.textOnDark}"
    rounded: "{rounded.md}"
    height: "{spacing.controlHeight}"
    padding: "{spacing.gapMd}"
  button-primary:
    typography: "{typography.cta}"
    backgroundColor: "{colors.primary}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    height: "{spacing.heroCtaHeight}"
    padding: "{spacing.gapXl}"
  tab:
    typography: "{typography.tab}"
    textColor: "{colors.textMuted}"
    rounded: "{rounded.none}"
    padding: "{spacing.gapSm}"
  glass-pill:
    typography: "{typography.nav}"
    backgroundColor: "{colors.ink}"
    textColor: "{colors.textOnDark}"
    rounded: "{rounded.pill}"
    padding: "{spacing.gapMd}"
---

# Jam.dev Website Design System

## Overview

Jam.dev is a developer-tool marketing site for bug capture, debugging telemetry, and AI-assisted engineering workflows. The homepage is optimized for product comprehension rather than editorial browsing: the first viewport immediately combines brand, product promise, a browser-extension-style product mock, and a single conversion path.

The visual system is dark, dense, and product-led. The dominant page surface is {colors.ink}, with large gradient-clipped Oldschool Grotesk headings in pale lavender tones and compact SF Pro Text UI controls. The palette balances developer-tool seriousness with playful product recognition through the Jam logo colors: {colors.primary}, {colors.accent}, and {colors.danger}.

The page relies on direct product artifacts: extension cards, debug panels, tabs, integration logos, customer logos, and screenshots. Decoration exists, but it is attached to product context: glow behind mockups, pill announcements, logo rails, and browser-like panels. Avoid converting this into generic SaaS cards or abstract illustration.

**Key Characteristics**

- Dark product stage using {colors.ink} with restrained surface contrast from {colors.blackberry} and {colors.blackberryLight}.
- Oversized, high-weight headings using {typography.display-hero} and {typography.display-section}.
- Compact navigation and tab controls using {typography.nav} and {typography.tab}.
- CTA language is direct and action-oriented, usually paired with extension installation or free signup.
- Motion and depth are subtle: blurred glows, linear logo sliders, opacity transitions, and shadow changes rather than elaborate scene animation.

## Colors

### Brand & Accent

| Token | Value | Use |
|---|---:|---|
| {colors.primary} | #73E5BF | Primary Jam green, CTA fills, logo, active accents, shadow tint. |
| {colors.primaryAlt} | #73E5A7 | Secondary green stop in CTA gradients. |
| {colors.accent} | #A37AF5 | Purple accent, gradients, hover accents, secondary emphasis. |
| {colors.accentDeep} | #744EC2 | Deep purple glow and blur surfaces. |
| {colors.danger} | #FF4070 | Logo red/pink and AI/debug emphasis gradients. |

The primary brand gradient appears in code as `linear-gradient(85deg, #73e5bf, #a37af5)`. AI/debug emphasis shifts to `linear-gradient(85deg, #a37af5, #ff4070)`. Use these gradients for headline accents only; most core UI should stay flat or use the CTA green gradient.

### Surface

The main page background is {colors.ink}. Navigation buttons use {colors.blackberry}. Dark panels and tab shells use {colors.blackberryLight}, often with transparency or ring treatments. Light inversion appears only in isolated product demo surfaces and the logo rail fade, where {colors.surfaceLight} replaces the dark edge fade.

### Text

Primary text on dark surfaces is {colors.textOnDark}. Navigation, inactive tabs, links, and subdued body copy use {colors.textMuted}. Lavender supporting copy uses {colors.textLavender}. Pale headline gradients use {colors.headlineHero}, {colors.headlineSection}, {colors.headlineSectionEnd}, and {colors.headlinePale}; these are text-fill colors, not general-purpose backgrounds.

### Hairlines & Borders

Default Tailwind reset borders resolve to {colors.borderDefault}, but the actual design usually uses darker contextual borders. Important examples include {colors.blackberryLight} for the hero pill and mobile nav, {colors.formBorder} for the dark email input, and translucent white rings on media frames. Active tabs use a 2px bottom border in {colors.ink}; inactive tabs use transparent borders.

### Semantic

No complete semantic system was exposed on the homepage. {colors.primary} covers positive action, {colors.danger} is brand/emphasis rather than error, and {colors.blueAccent} appears as a supporting product accent. Error, warning, and success states outside the cookie banner were not verified.

## Typography

Jam loads local font files from its compiled CSS. `Oldschool Grotesk` is available at weights 400, 500, 700, and 900; `SF Mono` is available at 300 and 500; `Courier Prime` is available at 400. Body and UI controls use SF Pro Text through a system stack.

| Role | Token | Desktop | Mobile | Notes |
|---|---|---:|---:|---|
| Hero headline | {typography.display-hero} | 88px / 88px / 900 | {typography.display-mobile} | Gradient-clipped, centered, tight line-height. |
| Section headline | {typography.display-section} | 66px / 72.6px / 900 | {typography.heading-mobile} | Often max-width constrained and center aligned. |
| Body support | {typography.body-md} | 20px / 28px / 400 | 16px inferred from class fallback | Lavender or muted, slight negative letter spacing. |
| Navigation | {typography.nav} | 16px / 16px / 400 | {typography.nav-mobile} in menu | SF Pro Text, compact, no text transform. |
| Tabs | {typography.tab} | 13px / 19.5px / 400 | same | Underline selected state, compact labels. |
| CTA | {typography.cta} | 22-24px / 24px | 24px / 24px | Large install form button uses SF Pro Text. |

Use Oldschool Grotesk for brand voice and high-emphasis numerals. Use SF Pro Text for navigation, form fields, captions, tabs, and product UI labels. Do not add condensed, serif, or handwriting display faces. Letter spacing is normally `0px` for headings and nav; body paragraphs in source use slight negative values such as `-0.5px`, so keep long supporting copy tight but readable.

## Layout

The desktop nav is a sticky top bar inside a 1280px max-width container, with 12px vertical and 32px horizontal padding. The hero wrapper uses `min-height: calc(100vh - 68px)` on desktop and unsets that minimum on mobile. Core content containers use 1280px or 1240px max widths, with {spacing.containerX} side padding.

Sections are vertically generous, but the information density inside product panels is high. The first viewport places the announcement pill, hero headline, mock visual, and CTA in a stacked center column. Later sections alternate centered headings, demo panels, logo grids, testimonials, integrations, and metric bands.

| Layout Token | Value | Application |
|---|---:|---|
| {spacing.containerMax} | 1280px | Primary desktop shell and nav max width. |
| {spacing.containerWide} | 1240px | Wide metric and integration sections. |
| {spacing.navHeight} | 68px | Sticky header offset and hero calculation. |
| {spacing.section} | 80px | Common large vertical rhythm on desktop. |
| {spacing.gapMd} | 16px | Common gutters, nav button padding, footer/link gaps. |
| {spacing.gapXl} | 32px | Hero pill margins, mobile CTA x-padding, larger grouping. |

The homepage uses Tailwind-style responsive breakpoints visible in class names: `phone` at 640px, `tablet` at 1024px, `desktop` at 1240px, and `2xl` at 1536px. Desktop composition should feel wide and centered. Mobile composition should switch to single-column blocks, full-width inputs, and a full-screen nav drawer.

## Elevation & Depth

| Treatment | Source Value | Use |
|---|---|---|
| Primary CTA shadow | `0 20px 25px -5px rgba(115, 229, 191, .2)` plus `0 8px 10px -6px` | Gives green CTAs a soft glow without lifting them into card UI. |
| CTA focus/hover shadow | Green shadow alpha rises to `.4` on focus and about `.224` on hover in computed styles | State feedback is mostly glow intensity. |
| Hero pill shadow | `0 20px 25px -5px rgba(19, 15, 24, .5)` plus `0 8px 10px -6px` | Keeps the pill floating over the dark hero. |
| Blurry container | `backdrop-filter: blur(64px)`, 10% white border, 20% deep-purple background | For translucent technical/product chips. |
| Media frame | 23px radius, 10px padding, 1px translucent neutral ring | Product mockups and browser-like cards. |
| Logo rail fade | Linear edge overlays from {colors.ink} or {colors.surfaceLight} | Masks continuous slider movement. |

Depth is atmospheric, not skeuomorphic. The page uses blurred purple glows, tinted shadows, translucent rings, and product panels instead of heavy card shadows. Do not nest cards inside cards; use unframed page sections with product panels as the only framed elements.

## Shapes

| Token | Value | Use |
|---|---:|---|
| {rounded.none} | 0px | Headings, text links, tab underlines. |
| {rounded.sm} | 3.5px | Cookie banner buttons only; third-party pattern. |
| {rounded.md} | 6px | Nav CTA buttons and `.button-primary-lg`. |
| {rounded.lg} | 8px | Primitive `.button-primary`, utility cards, feature chips. |
| {rounded.xl} | 12px | Main CTA forms, demo buttons, mobile inputs. |
| {rounded.media} | 23px | Product mockup image frame. |
| {rounded.pill} | 9999px | Announcement pills, glow circles, logo badges. |

The brand mixes hard-edged product layouts with soft action controls. Use pills only for announcements, badges, and circular glows. CTAs and inputs should use {rounded.xl}; nav buttons should use {rounded.md}. Product screenshots may use {rounded.media} when they need the extra app-window softness.

Icons are SVG-based, usually inline or image assets. Logo shapes use the Jam red, green, and dark ink palette. Integration icons sit in compact, rounded, dark tiles; they should not be replaced with generic line icons.

## Components

### Navigation

`nav` is sticky at the top, transparent over the dark page, constrained to {spacing.containerMax}. Desktop links use {component.nav-link}: SF Pro Text, {colors.textMuted}, 16px text, and hover to white. Desktop nav actions use {component.nav-button}: {colors.blackberry} background, white text, {rounded.md}, and 44px minimum height.

On mobile, the hamburger is a 40px by 38px icon button with 24px white burger lines. Opening the drawer translates `.nav-list-landing` to `translateX(0)`, covers the viewport at `100dvh`, uses {colors.ink}, centers links vertically, and increases link type to {typography.nav-mobile}.

### Buttons & CTAs

The hero install CTA uses {component.button-primary}: 64px height, {rounded.xl}, {colors.primary} to {colors.primaryAlt} vertical gradient, {colors.ink} text, and green glow shadow. Hover and focus do not materially change fill in the sampled hero CTA; they increase shadow intensity. The generic `.button-primary` class uses {colors.primary}, {rounded.lg}, 48px minimum height, 8px by 24px padding, and hovers to white.

The `.button-large` variant uses {colors.buttonLarge}, white text, 48px pill radius, and hovers to {colors.accent}. The transparent large button uses a 1px {colors.blackberryLight} border, {colors.textSoft}, {rounded.md}, and hovers to {colors.blackberryLight}.

### Product Demo Panels

Product demos are the design system's main proof object. They combine browser-extension cards, tab strips, small metadata rows, and dark technical panes. The `Info`, `Console`, `Network`, `Actions`, `Backend`, and `AI-Debugger` tabs use {component.tab}. Selected tabs switch from {colors.textMuted} to {colors.blackberryLight} and add a 2px {colors.ink} bottom border; inactive tabs keep a transparent 2px bottom border.

The mobile signup form uses a dark {colors.ink} input with a 1px {colors.formBorder} border, {rounded.xl}, 56px height, and white text. Focus was sampled but did not reveal a visible custom ring beyond the transparent outline in the compiled style.

### Cards, Media, And Logo Rails

Media cards are rounded product surfaces with translucent rings and glow layers. The main hero frame uses {rounded.media}, 10px padding, and a neutral 20% ring. Logo rails use Swiper classes with linear timing and edge fade masks, not discrete card grids. Testimonial slides dim inactive items to `.6` opacity and transition the active slide to full opacity over `.48s`.

### Footer

The footer remains dark and compact. Footer legal links use 14px SF Pro Text in {colors.textMuted} and hover/focus to a lighter grey value observed in class names but not emitted as an exact CSS token in the sampled rules. Keep footer link groups simple, inline, and low contrast.

## Do's and Don'ts

### Do

- Use {colors.ink} as the dominant stage and reserve light backgrounds for contained product panels or inverted logo rails.
- Use Oldschool Grotesk heavy weights for headlines, numerals, and brand moments.
- Keep CTAs direct, green, and installation-oriented; pair them with {rounded.xl} and green glow.
- Build pages around actual product UI, screenshots, telemetry rows, tabs, and integration assets.
- Use {colors.textMuted} for secondary navigation and inactive states, then switch to white or {colors.blackberryLight} on hover/selected states.
- Preserve the full-screen mobile menu pattern and 24px mobile menu links.

### Don't

- Do not turn the site into a light, generic SaaS landing page.
- Do not use unrelated purple-blue gradients as full-page backgrounds; Jam's gradients are clipped to text or localized accents.
- Do not add decorative card grids where a product screenshot, tab panel, or integration rail would be more faithful.
- Do not over-round every element; reserve {rounded.pill} for pills and glows, not normal buttons or cards.
- Do not introduce React-only interaction patterns or generic icon sets when the source uses direct SVG/image assets.
- Do not rely on explanatory UI copy in place of product evidence; the source leads with observable debug artifacts.

## Responsive Behavior

| Breakpoint | Source Signal | Behavior |
|---|---:|---|
| Base mobile | below 640px inferred from `phone` classes | Single-column hero, 48px hero headline, 34px section headings, full-width input/CTA. |
| `phone` | 640px | Desktop nav begins to appear; mobile nav list changes from fixed drawer to inline row. |
| `tablet` | 1024px | Hero headline reaches 88px, section headings reach 66px, larger media and section spacing appear. |
| `desktop` | 1240px | Form fields flatten into desktop row variants, desktop spacing and max-width behavior dominate. |
| `2xl` | 1536px | Container support exists in CSS, but the sampled homepage remains visually centered around 1280px/1240px content. |

Touch targets are mostly adequate: nav buttons are at least 44px high, the mobile hamburger is roughly 40px by 38px, and the mobile CTA is 56px high. Mobile images and product panels remain full-width with side padding rather than shrinking into small cards. The mobile drawer uses an open/closed translate transition over `.3s`.

The sampled page includes scroll-revealed content and lazy product sections. The sticky nav remains at the top during scroll. Reduced-motion was requested in one Playwright context, but the source did not expose a clear reduced-motion-specific token or CSS rule in the captured evidence.

## Iteration Guide

Start new pages with the same hierarchy: sticky dark nav, product-led hero, visible primary CTA, and at least one concrete product artifact above the fold. Pull color and type from frontmatter tokens before inventing new values.

When adding components, classify them as product primitives first: nav, CTA, demo panel, tab strip, logo rail, testimonial slide, form, or footer group. Reuse {component.button-primary}, {component.nav-button}, {component.nav-link}, and {component.tab} before creating a new pattern.

For interaction states, prefer small color, underline, opacity, and glow changes. Match existing timing: `.15s` for simple button utility transitions, `.3s` for richer CTA/nav changes, `.48s` for testimonial slide emphasis, and linear timing for continuous logo rails.

For copy and layout, keep density practical. Headings can be large, but controls, labels, nav links, tabs, and footer links should remain compact. Add visual emphasis by placing product UI in the scene, not by adding more marketing decoration.

## Known Gaps

- Source inspection was limited to the public Next.js export HTML, compiled CSS bundle, inline SVG logo, preloaded image assets, and rendered computed styles. Original source components and Tailwind config were not publicly available.
- Screenshots and computed styles were captured from the homepage only: `/`, desktop 1440x1000 and mobile 390x844, on May 22, 2026.
- Exact hover color for nav links is source-backed from class/CSS (`hover:text-white`), but the sampled computed hover snapshot did not isolate every link state.
- The mobile menu open state was verified by coordinate-clicking the hamburger after cookie dismissal; earlier automated role selection hit offscreen nav items, so the final evidence uses the coordinate-click capture.
- Error, disabled, loading, and full form-submission states were not reachable from the homepage pass.
- Cookie banner values were observed but are treated as third-party UI and not first-party Jam design tokens except where noted.
- Some light-grey footer hover values were present as class names but not resolved to an exact token in the sampled CSS subset; avoid treating them as core tokens without another pass.