CURATED · OPEN · FREE
Jam3
Global digital agency transforming brands through creativity and technology.
agency creative
01
Identity DNA
global digital creative agency
A high-end global digital agency
02
Color
#3C0C60Accent
#2D2D2DInk
#5A5A5AInk soft
#EAE8E4BG soft
#F5F5F5BG quiet
#DEDFE5Muted
rgba(234,232,228,0.3)Line
High-contrast typography with a dark/light mode foundation and a single deep purple accent.
03
Typography
grotesque-sans
display 67px · 800headline 48px · 800title 23px · 500body 15px · 400caption 10px · 40004
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
Flexible spacing with generous horizontal padding and distinct vertical separation between sections.
05
Surfaces
sm · 4px
md · 20px
lg · 70px
pill · 100px
1px solid rgba(234,232,228,0.4)
0px 20px 40px -16px rgba(0,0,0,0.3) · 0px 30px 30px -16px rgba(0,0,0,0.3)
06
Layout
1440 container
12 columns
24px gutter
768 / 1024 breakpoints
Full-width photographic heroes with centered content overlays and a structured grid for editorial cards.
07
Motion & Interaction
200ms micro
300ms small
600ms medium
cubic-bezier(0.19, 1, 0.22, 1) easing
Opacity fade-ins · Smooth box-shadow transitions · Layout shifts using max-height
Subtle opacity changes and box-shadow expansions on cards. · Smooth scroll or navigation transitions.
08
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. 09
Voice & Don'ts
Tone Confident, authoritative, and innovative. Headlines Bold, impactful, and lowercase or sentence case. CTAs Direct and action-oriented with pill-shaped buttons. 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. Avoid: Generic corporate speak Avoid: Cluttered interfaces Avoid: Fluffy adjectives Avoid: Overly complex navigation 10
Inside the pack — real screenshots
桌面首屏（hero） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 移动首屏 Captured from the live site · real computed styles
11
System prompt
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.
en · zh-CN · zh-TW · ja · ko
OpenDesign · curated web aesthetics for AI-readable design DNA · opendesign.cc
Why we curated this: Worth including as a prime example of a premium agency portfolio combining bold typography with high-impact photography.
