# Jam3 · Design system migration spec

> Source: https://www.jam3.com  ·  Curated by OpenDesign  ·  en

> Worth including as a prime example of a premium agency portfolio combining bold typography with high-impact photography.

## 1. Identity DNA

Jam3 operates as a global digital agency, and its design system reflects that scale: a framework built for volume, clarity, and impact. The system treats the interface like a high-end publication, where bold typography and photographic imagery carry the narrative without decorative clutter.

**One-liner:** Global digital agency transforming brands through creativity and technology.
**Keywords:** global · digital · creative · agency
**Analogy:** A high-end global digital agency

## 2. Color

The color system is built on a high-contrast foundation of deep charcoal and light neutral grays, with a single deep purple accent used sparingly for emphasis. Dark and light modes share this palette, ensuring readability and a premium, high-contrast feel across all contexts.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#2D2D2D` | main background |
| `--bg-soft` | `#EAE8E4` | card background |
| `--bg-quiet` | `#F5F5F5` | quiet area |
| `--ink` | `#2D2D2D` | body text |
| `--ink-soft` | `#5A5A5A` | secondary text |
| `--muted` | `#DEDFE5` | placeholder |
| `--accent` | `#3C0C60` | single accent |
| `--line` | `rgba(234,232,228,0.3)` | divider |

**Color principle:** High-contrast typography with a dark/light mode foundation and a single deep purple accent.

The principle is restraint: a limited, purposeful palette that lets the photography and typography command attention.

## 3. Typography

Typography is the primary voice of the system, relying on a bold, geometric grotesque sans-serif for all headlines and display text. The scale is expansive, moving from massive hero headlines down to fine print, but the weight remains consistently heavy to maintain authority.

- **Display:** grotesque-sans
- **Body:** grotesque-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 67px | 1.0 | 800 | -1.5px | Hero headlines |
| headline | 48px | 1.15 | 800 | -0.5px | Section titles |
| title | 23px | 1.15 | 500 | 0px | Article headings |
| body | 15px | 1.3 | 400 | 0px | Body text |
| caption | 10px | 1.15 | 400 | 0px | Fine print and UI labels |

## 4. Spacing

Spacing follows a flexible rhythm, using generous horizontal padding to frame content and distinct vertical separation to delineate sections.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Flexible spacing with generous horizontal padding and distinct vertical separation between sections.

## 5. Surfaces

Surfaces are defined by depth and restraint. Subtle, layered shadows create elevation for interactive elements, while a fine, semi-transparent border provides structure without visual weight.

- **Radius:** sm 4px · md 20px · lg 70px · pill 100px
- **Shadows:**
  - 0px 20px 40px -16px rgba(0,0,0,0.3)
  - 0px 30px 30px -16px rgba(0,0,0,0.3)
- **Borders:** 1px solid rgba(234,232,228,0.4)

## 6. Layout

The layout skeleton is built around full-width photographic heroes with centered content overlays. This transitions into a structured, editorial grid for cards and content blocks, creating a clear visual hierarchy from immersive imagery to organized information.

- **Container max:** 1440px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Full-width photographic heroes with centered content overlays and a structured grid for editorial cards.

## 7. Motion & Interaction

Motion is elegant and purposeful, using opacity fades and smooth shadow transitions to guide attention. Layout shifts are achieved through max-height animations, all governed by a custom cubic-bezier timing function for a consistent, premium feel.

- **Durations:** micro 200ms · small 300ms · medium 600ms
- **Easing:** `cubic-bezier(0.19, 1, 0.22, 1)`
- **Patterns:**
  - Opacity fade-ins
  - Smooth box-shadow transitions
  - Layout shifts using max-height

- **Hover:** Subtle opacity changes and box-shadow expansions on cards.
- **Click:** Smooth scroll or navigation transitions.
- **Transition:** All transitions follow a custom cubic-bezier for a premium feel.
- **Keyboard:** Standard focus management with visible outlines.

## 8. Voice & Don'ts

The editorial voice is confident, authoritative, and innovative, matched by bold, impactful headlines in lowercase or sentence case. Calls to action are direct and action-oriented, rendered in the system's signature pill-shaped buttons.

- **Tone:** Confident, authoritative, and innovative.
- **Headline style:** Bold, impactful, and lowercase or sentence case.
- **CTA style:** Direct and action-oriented with pill-shaped buttons.
- **Avoid:** Generic corporate speak / Cluttered interfaces / Fluffy adjectives / Overly complex navigation

### Don'ts
- ❌ Don't use serif fonts — screenshot shows a bold, geometric grotesque sans-serif typeface.
- ❌ Don't use bright neon backgrounds — screenshot shows deep dark tones and light neutral grays.
- ❌ Don't use sharp square corners everywhere — screenshot shows frequent use of fully rounded pill shapes.
- ❌ Don't use thin, delicate typography — screenshot shows bold, heavy weights for all headlines.
- ❌ Don't use a cluttered navigation — screenshot shows a clean, minimal top bar.
- ❌ Don't use multi-colored buttons — screenshot shows mostly monochromatic or white/outlined buttons.

The system deliberately avoids serif typography, neon accents, sharp corners, and thin headline weights, committing instead to a bold, clean, and professional aesthetic.

## System Prompt (paste into AI tool)

```
Jam3 is a global digital agency. The design features a premium, high-contrast palette with deep charcoal, light grays, and a signature deep purple accent. Typography relies on bold, geometric grotesque-sans for impact. Hero sections use full-bleed photography. Critical donts: don't use serif fonts, don't use sharp corners for all elements, and don't use thin font weights for headlines. The interface must feel bold, clean, and professional.
```
