---
name: Jam3
description: "Worth including as a prime example of a premium agency portfolio combining bold typography with high-impact photography."
version: alpha

colors:
  background: "#2D2D2D"
  primary: "#2D2D2D"
  secondary: "#5A5A5A"
  tertiary: "#3C0C60"
  neutral: "#DEDFE5"
  bg-soft: "#EAE8E4"
  bg-quiet: "#F5F5F5"
  line: "rgba(234,232,228,0.3)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 67px
    lineHeight: 1.0
    fontWeight: 800
    letterSpacing: "-1.5px"
  headline:
    fontFamily: grotesque-sans
    fontSize: 48px
    lineHeight: 1.15
    fontWeight: 800
    letterSpacing: "-0.5px"
  title:
    fontFamily: grotesque-sans
    fontSize: 23px
    lineHeight: 1.15
    fontWeight: 500
    letterSpacing: "0px"
  body:
    fontFamily: grotesque-sans
    fontSize: 15px
    lineHeight: 1.3
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: grotesque-sans
    fontSize: 10px
    lineHeight: 1.15
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 20px
  lg: 70px
  pill: 100px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

Global digital agency transforming brands through creativity and technology.

*A high-end global digital agency*

## Colors

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

- **Background (`#2D2D2D`)** — uses `bg` token
- **Primary text (`#2D2D2D`)** — uses `ink` token
- **Secondary text (`#5A5A5A`)** — uses `ink-soft` token
- **Accent (`#3C0C60`)** — uses `accent` token
- **Muted (`#DEDFE5`)** — uses `muted` token
- **Borders (`rgba(234,232,228,0.3)`)** — uses `line` token

## Typography

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

## Layout

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

*Rhythm:* Flexible spacing with generous horizontal padding and distinct vertical separation between sections.

## Elevation & Depth

- 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)

## Shapes

- `sm`: 4px
- `md`: 20px
- `lg`: 70px
- `pill`: 100px

## Components

- **button:** Pill-shaped buttons with solid borders or backgrounds.
- **card:** Clean editorial cards with large imagery and structured typography.
- **chip:** Rounded pill badges.
- **input:** Underlined text inputs.
- **hero:** Full-bleed photographic hero with massive bold typography overlaid.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```