Signal Mint
#73e5bfGreen text accent for links, tags, and emphasized short phrases
Jam
jam.devWebsite preview
The design language
Jam is a late-night dev console with a mint signal pulse: a near-black canvas in deep plum-black, massive geometric grotesk headlines that take over the viewport, and a single electric mint accent that marks everything that is on, active, or ready. The interface is deliberately quiet — most surfaces share a tonal near-gray darkness, letting the mint and violet accents do the talking. Cards, pills, and controls are generously rounded (12–24px) and defined by hairline borders rather than heavy shadows, giving the product a lightweight, paper-on-graphite feel. The brand oscillates between three chromatic voices: mint for primary actions and status, violet for secondary icons and gradients, and a hot pink-red for the persistent header CTA and the wordmark — each one a small electric punctuation against the dark.
Color palette
brand
Mint Halo
#c5ffe7Soft mint highlight wash, inset glow on hero elements, gradient terminator fading to white
Jam Pink
#ff4070Red wash for highlight backgrounds, decorative bands, and soft emphasis behind content. Do not promote it to the primary CTA color
accent
Electric Violet
#a37af5Feature pill icons, secondary accents, gradient terminator — the cool counterpart to mint, carries the decorative gradient text
Deep Violet
#744ec2Decorative card fill, gradient start — a deeper violet used sparingly for tonal richness
Lilac
#b89fd4Light accent text and headings — soft violet for non-body highlights
Mauve
#947facMuted violet for body text accents and secondary icon strokes
neutral
Obsidian Plum
#130f18Page canvas, deepest background — the negative space headlines float on
Graphite Plum
#21192aCard and list surface — one step lifted from the canvas, carries testimonial cards and feature lists
Smoke Plum
#2e2d36Inner card surface and hairline border on cards — a second elevation step
Ink Border
#252542Subtle violet-tinted borders and dividers between elements
Carbon
#25292eNavigation fills and tonal mid-ground blocks
Mist Gray
#8b94a3Body text, nav links, secondary icons — the dominant cool-gray voice for readable but non-emphatic text
Soft Mist
#d0cfd1Lighter body text variant for de-emphasized content
Bone
#e5e7ebHairline borders across the entire system — the connective tissue between every section, card, and list
Paper
#ffffffLight text on dark surfaces, inverse labels, and high-contrast captions. Do not promote it to the primary CTA color
Typography
Type scale
Minor Third (1.2) · 18px basedisplay
116px · 900 · 1 · 0px trackingThe quick brown fox jumps
heading-lg
88px · 900 · 1 · 0px trackingThe quick brown fox jumps
heading
66px · 900 · 1.1 · 0px trackingThe quick brown fox jumps
heading-sm
24px · 900 · 1.33 · -0.6px trackingThe quick brown fox jumps
text-16
16px · 400 · 1.5The quick brown fox jumps
text-15
15px · 400 · 1.5The quick brown fox jumps
text-14
14px · 400 · 1.43The quick brown fox jumps
text-13
13px · 400 · 1.5The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Oldschool Grotesk
- Weights
- 400, 900
- Sizes
- 8px, 12px, 16px, 66px, 88px, 116px
- Line height
- 1.00–1.50
- Fallback
- Space Grotesk, Inter, or General Sans
Display and heading face — the signature font. Weight 900 at 66–116px for hero headlines, weight 400 for small caps and labels. This custom geometric grotesk gives Jam its voice: the 900-weight is not just bold, it is architectural, and the compressed letterforms make even short words feel like monuments. At 8–16px it functions as an uppercase micro-label for trust badges and nav accents.
Additional typeface
SF Pro Text
- Weights
- 400, 500, 600, 700
- Sizes
- 11px, 12px, 13px, 14px, 15px, 16px, 24px
- Line height
- 1.00–1.50
- Letter spacing
- -0.025em across all sizes (translates to roughly -0.3px at 12px, -0.4px at 16px, -0.6px at 24px)
- Fallback
- Inter, system-ui, -apple-system
UI body and interface text — the workhorse. Sizes 14–16px at weight 400–500 for body and nav, 600–700 for button labels. The -0.025em letter-spacing tightens the default SF Pro into a denser, more deliberate reading rhythm that matches the display font's compressed character.
Additional typeface
SF Mono
- Weights
- 400
- Sizes
- 10px
- Line height
- 1.50
- Fallback
- JetBrains Mono, Menlo, monospace
Monospaced code fragments and technical micro-labels — sparingly used for inline technical annotations
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 80px
- Card padding
- 40px
- Element gap
- 16px
Border radius
nav
8pxcards
24pxpills
9999pxinputs
12pxbuttons
12pxSpacing scale
4px6px8px10px12px16px20px24px32px40px48px52px56px64px73px74px80px93px96px113px117px121px144px196px265pxGuidelines
Do
- Use Oldschool Grotesk weight 900 at 66–116px for all hero and section headlines — this is the brand's voice, not a suggestion
- Fill primary action buttons only with Signal Mint (#73e5bf) and pair them with the three-layer green glow shadow; never use mint for text, borders, or decorative elements
- Use Jam Pink (#ff4070) exclusively for the wordmark and the persistent header CTA — it is the brand beacon, not a general accent
- Set body text in Mist Gray (#8b94a3) at 14–15px weight 400–500; use white (#ffffff) only for headlines, button text, and the floating product card surface
- Define every card and list boundary with a 1px border in #e5e7eb rather than a shadow — the system uses border-lines, not elevation, to separate surfaces
- Apply the 85-degree mint-to-violet gradient or the horizontal violet-to-pink gradient to exactly one keyword per hero headline for chromatic punctuation
- Use Electric Violet (#a37af5) at 1.5px stroke weight for icons inside feature pills and secondary UI icons
Don’t
- Do not create filled buttons in violet, pink, or white — mint (#73e5bf) is the only button fill color in the primary action system
- Do not use SF Pro Text at display sizes — headlines belong to Oldschool Grotesk exclusively; mixing display fonts breaks the typographic hierarchy
- Do not add drop shadows to cards or panels — the system relies on surface color steps (#130f18 → #21192a → #2e2d36) and 1px borders for depth, not shadows
- Do not use white (#ffffff) for card backgrounds outside the single floating product screenshot — the white surface is a one-per-page design device
- Do not use warm reds, oranges, or yellows — the chromatic palette is mint, violet, and pink only; introducing a fourth hue breaks the cool-electric mood
- Do not letter-space the display font — Oldschool Grotesk's compressed geometry only works at default tracking; adding letter-spacing would make 116px headlines look airy and weak
- Do not place text directly on the canvas without testing contrast — use Graphite Plum (#21192a) for any text container, never #130f18 alone for text-on-surface scenarios
Components
Primary CTA Button (Mint)
Hero and section-level call-to-actionMint green (#73e5bf) filled button, white text in SF Pro Text 16px weight 600, 12px border-radius, 12px vertical / 24px horizontal padding. Carries a distinctive three-layer shadow: 2px inner ring in dark plum (#130f18 at 0.1), plus a 25px-blur outer glow and 10px-blur close glow both in mint (#73e5bf at 0.2) — the glow makes the button feel lit from within, like an LED indicator rather than a flat button.
Header CTA Button (Jam Pink)
Persistent navigation call-to-actionHot pink (#ff4070) filled button in the top nav, white text, 12px radius, 10px vertical / 16px horizontal padding. Smaller and more compact than the hero CTA — it is the always-visible entry point. No glow shadow, just a solid fill that acts as the brand beacon.
Ghost Nav Button
Secondary navigation action (Log in)Transparent or near-black fill (#21192a), 1px border in #e5e7eb, white text at 14px weight 500, 8px radius, 8px/16px padding. Quiet by design — it sits next to the pink CTA and defers to it.
Product Screenshot Card
Hero visual — the Jam extension UI mockupWhite (#ffffff) surface, 24px radius, generous internal padding (~32–40px), subtle drop shadow against the dark canvas. This is the only true white surface on the entire site — the contrast inversion is deliberate, making the product look like a real window floating on a dark desktop.
Feature Pill
Inline feature tags in the 'Never explain another bug' sectionPill shape (9999px radius), dark fill (#21192a), 1px border in #e5e7eb, icon + label layout. Icons rendered in Electric Violet (#a37af5) with 1.5px stroke weight. Label text in SF Pro Text 14px weight 500, white. 12px vertical / 20px horizontal padding. The pill shape signals 'category' and the violet icons are the only color on the element.
Testimonial Card
Social proof card with user photo and companyGraphite Plum (#21192a) surface, 24px radius, 40px padding, centered layout. Circular avatar (80px) at top, name in white SF Pro Text 16px weight 600, role in Mist Gray (#8b94a3) 14px weight 400, quote in white 15px weight 400, company logo at bottom in white. 1px border in #e5e7eb for definition. No shadow — the surface color does the elevation work.
Company Logo Bar
Trust bar with customer logosHorizontal row of 6+ company logos, all rendered in white or #e5e7eb at uniform height (~24px). No logos are colored — the grayscale treatment keeps the focus on the wordmarks as trust signals rather than visual noise. Spaced evenly with 52px gaps.
Trust Badge Row
Social proof under hero CTAInline row: 5 mint (#73e5bf) or white star icons, followed by text in Mist Gray 13px. Centered, sits 16px below the CTA. Compact and calm — it is evidence, not decoration.
Gradient Text Accent
Decorative gradient on a single keyword in the hero headlineApplied to the word 'love' in the hero. Uses a 85-degree linear gradient from mint (#73e5bf) to violet (#a37af5), or a horizontal gradient from violet (#a37af5) to pink (#ff4070). Oldschool Grotesk 900 weight, same size as the surrounding white headline. The gradient is the only place where multiple brand colors coexist in text.
Status Toggle (On Pill)
Active/recording indicator within the product UISmall pill inside the product card showing a green dot + 'On' label. Mint (#73e5bf) text and dot, transparent background, 8px radius, 4px/10px padding. This is a product-UI element visible in the hero mockup, not a marketing-page component, but it reinforces the mint-as-status color rule.
Navigation Bar
Sticky top navigationFull-width, dark fill (#130f18), 8px vertical padding. Left: Jam wordmark in #ff4070 + nav links (Docs, Pricing, Blog, etc.) in #8b94a3. Right: Ghost 'Log in' button + Pink 'Get started for free' CTA. 20–24px horizontal padding on the container. No border-bottom — the dark canvas blends seamlessly.
Top Banner Pill (Try Jam MCP)
Optional announcement pill above the heroSmall pill centered above the hero headline. Dark fill (#21192a), 1px border in #e5e7eb, 9999px radius, 6px/12px padding. Text in Mist Gray 12px with a right arrow. Designed to be dismissible and quiet.
Surfaces & elevation
Level 0
Canvas
#130f18Page background, hero section, footer — the base dark void
Level 1
Card
#21192aTestimonial cards, feature lists, nested content blocks
Level 2
Elevated
#2e2d36Inner card surfaces, slightly lifted containers
Level 3
Product Surface
#ffffffFloating product screenshot mockup — the only light surface, designed to pop against the dark canvas
The system uses almost no shadow. Depth is created through three surface steps (#130f18 canvas → #21192a card → #2e2d36 inner) and 1px hairline borders in #e5e7eb. The single exception is the mint CTA button, which carries a green glow to signal its role as the only lit element on the page. This restraint makes the mint button feel like a physical LED rather than a flat design element.
Primary CTA Button (Mint)
rgba(19, 15, 24, 0.1) 0px 0px 0px 2px, rgba(115, 229, 191, 0.2) 0px 20px 25px -5px, rgba(115, 229, 191, 0.2) 0px 8px 10px -6px
Product Screenshot Card
Subtle dark-tinted drop shadow implied by separation from canvas — not a heavy elevation system
Layout & imagery
Layout
Centered, max-width 1200px container with a single-column hero stack. Hero is full-viewport-height on desktop with a centered headline, subtitle, product card mockup, CTA, and trust badge stacked vertically. Feature pills sit in a single horizontal row of 5 below the 'Never explain another bug' headline. Testimonial section uses a horizontal scrollable row of equal-width cards (5 visible at once). Company logo bar is a single horizontal row centered in the page. Sections are separated by generous vertical rhythm (80px) rather than dividers or alternating background bands — the entire page shares the same #130f18 canvas. Navigation is a fixed top bar with logo-left, links-center, CTAs-right.
Imagery
Minimal and product-first. The hero is dominated by a white product screenshot card showing the Jam extension UI (Capture Screenshot, Record Tab, Instant Replay, Create link) — a realistic in-app frame, not a marketing illustration. A 3D gradient cursor arrow points at the 'Create link' button for emphasis. The testimonial section uses circular real-photo headshots (not illustrations) and grayscale company wordmarks (Underarmour, deel., SEATGEEK, toast, etc.). No hero photography, no lifestyle imagery, no abstract decorative graphics. The visual language is: show the product, show the people, show the logos — nothing else.
Design notes
Agent Guide
## Quick Color Reference - Text primary: #ffffff - Text secondary: #8b94a3 (Mist Gray) - Background: #130f18 (Obsidian Plum) - Card surface: #21192a (Graphite Plum) - Border: #e5e7eb (Bone) - Accent / status: #73e5bf (Signal Mint) - primary action: no distinct CTA color No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color. - Decorative icon accent: #a37af5 (Electric Violet) ## Example Component Prompts 2. **Feature Pill Row**: Five pills in a horizontal row, each 9999px radius, #21192a fill, 1px border in #e5e7eb, 12px/20px padding. Each pill has a 1.5px-stroke icon in #a37af5 on the left and label text in #ffffff SF Pro Text 14px weight 500. Labels: 'Device + browser', 'Console logs', 'Network logs', 'Repro steps', 'Backend tracing'. 3. **Testimonial Card**: 24px radius, #21192a fill, 40px padding, 1px border in #e5e7eb. Circular 80px avatar at top center, name in #ffffff 16px weight 600, role in #8b94a3 14px weight 400, quote in #ffffff 15px weight 400 centered, company wordmark in #ffffff at 24px height at the bottom. 4. **Top Navigation Bar**: Full-width, #130f18 fill, no border. Left: 'JAM' wordmark in #ff4070 Oldschool Grotesk 16px weight 900, followed by nav links in #8b94a3 SF Pro Text 14px. Right: Ghost 'Log in' button (transparent fill, 1px #e5e7eb border, #ffffff text, 8px radius) and pink 'Get started for free' button (#ff4070 fill, #ffffff text, 12px radius, 8px/16px padding). 5. **Company Logo Bar**: Horizontal row of 6 company wordmarks, all rendered in #e5e7eb at uniform 24px height, spaced with 52px gaps, centered in the page.
Similar brands
Linear
Same dark-mode discipline with one vivid accent color, massive geometric display headlines, and hairline-bordered cards instead of shadow-elevated panels
Vercel
Near-black canvas with ultra-bold display type and the same restrained single-accent approach to CTAs
Raycast
Developer-tool aesthetic with dark surfaces, compressed grotesk headlines, and pill-shaped interactive controls
Loom
Direct category neighbor (async video/bug reporting) with a product-screenshot-first hero on a dark canvas and gradient text accents in headlines
Cursor
AI developer tool with the same dark-canvas-plus-electric-accent visual language and oversized display headlines that command the viewport
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
