AV AI Dispatch — Brand Guidelines

01 Color System

Dispatch Blue & Parchment

Two anchor colors — JW.org Blue for trust and authority, Parchment for warmth and readability. Everything else is derived from these two. Click any swatch to copy its hex value.

Primary Palette

Extended Palette

Palette Combinations

Hero Sections

White text on Dispatch Blue. Use for high-impact hero banners and CTAs.

Blue bg + White fg — WCAG AAA

Content Sections

Dark ink on Parchment Light. The default reading experience — warm and easy on the eyes.

Parchment Light bg + Ink fg — WCAG AAA

Card Surfaces

White cards with parchment borders. Clean, elevated, scannable.

White bg + Parchment border — Cards & panels

02 Typography

Plus Jakarta Sans & JetBrains Mono

A geometric sans-serif with character for display and body text — it feels custom without being eccentric. JetBrains Mono for data, code, labels, and technical details.

AI moves fast.
We keep you current.

Plus Jakarta Sans — 800 weight, -2px tracking

Family: Plus Jakarta Sans

Weights: 300, 400, 500, 600, 700, 800

Style: Normal + Italic

Fallback: system sans-serif

LATEST EDITION · 22 SOURCES

JetBrains Mono — 400 weight, for labels, badges, and data

Family: JetBrains Mono

Weights: 300, 400, 500

Use: Section labels, badges, chart axes, code

Fallback: SF Mono, monospace

Hero H1

The AV AI Dispatch

Section H2

This Week in AI

Card H3

ElevenLabs Flows: The First Real AI Production Canvas

Body

If you only pay attention to one thing this week, make it this. ElevenLabs launched Flows, a node-based creative canvas that connects over 35 visual AI models.

Caption

Source: @ElevenLabsio on X · March 11, 2026

Mono Label

Latest Edition

03 Illustrations

Hand-Drawn & Minimal

Generated with Nano Banana 2 using a consistent hand-drawn, single-stroke style. Thin lines, no fills, Dispatch Blue ink on Parchment. Think: friendly doodles from a thoughtful colleague.

Signal Wave

Used for AI trend sections and data-driven stories. Represents signal through noise.

Prompt: "minimal hand-drawn line art, single continuous stroke, a flowing wave signal line with three dots at peaks and valleys, thin ink stroke on cream paper background, no fill, no shading, doodle style"

Podcast Mic

Used for the Top 10 Podcasts section. Simple, recognizable, friendly.

Prompt: "minimal hand-drawn line art, simple podcast microphone icon, single weight thin ink stroke, cream paper background, no fill, childlike doodle quality, clean and charming"

Video Player

For video AI tool reviews and the Tool of the Week section.

Prompt: "minimal hand-drawn line art, simple video player window with play button, single thin ink stroke on cream paper, no fill except tiny play triangle, doodle sketch style"

Trend Chart

For data visualizations and the Common Threads section.

Prompt: "minimal hand-drawn line art, simple bar chart with dashed trend line overlay, four bars of different heights, thin ink stroke on cream paper, no fills, loose sketch quality"

Connected Nodes

For AI agent topics, Common Threads, and cross-source analysis.

Prompt: "minimal hand-drawn line art, three circles connected by thin lines forming a simple network graph, single weight ink stroke on cream background, no fill, friendly doodle style"

Chat Bubble

For AI conversation topics, Novel Ideas, and subscriber CTAs.

Prompt: "minimal hand-drawn line art, simple speech bubble with two horizontal text lines inside, thin ink stroke on cream paper, no fill, loose casual doodle quality"

Nano Banana 2 Prompt Framework

Base Prompt Template: "minimal hand-drawn line art, [subject description], single weight thin ink stroke on cream paper background, no fill, no shading, no gradients, [mood: friendly / casual / charming / clean] doodle style, monochrome blue ink (#4a6da7)" Negative Prompt: "realistic, photographic, 3D render, heavy shading, gradients, multiple colors, thick strokes, complex, cluttered, corporate" Settings: Aspect: 1:1 for icons, 16:9 for section headers Style: Illustration mode, minimal detail Characters: 0 (abstract/iconic only)

04 Motion

Subtle & Intentional

Animations add delight without distraction. Every motion serves a purpose: reveal content, confirm interaction, or guide attention. Hover over each card to preview.

Fade Slide Up

Content reveal on scroll. Elements enter from 20px below with opacity fade.

duration: 700ms easing: cubic-bezier(0.22, 1, 0.36, 1) trigger: scroll into view delay: stagger 100ms per item

Gentle Pulse

Draws attention to live/new badges and active states. Scale 1.0 to 1.08.

duration: 2000ms easing: ease-in-out trigger: continuous (badges) scale: 1.0 → 1.08

Float Bob

Floating illustrations and decorative elements. Gentle vertical movement.

duration: 3000ms easing: ease-in-out trigger: continuous (decor) translateY: 0 → -6px

Shimmer

Loading state for content being fetched. Gradient sweep left to right.

duration: 2000ms easing: linear trigger: loading state type: gradient position

Line Draw

SVG path drawing for illustrations entering the viewport. Stroke-dashoffset animation.

duration: 1500ms easing: ease trigger: scroll into view type: stroke-dashoffset

Card Lift

Interactive hover lift on cards. Subtle Y translation with box-shadow expansion.

duration: 300ms easing: cubic-bezier(0.22, 1, 0.36, 1) trigger: hover translateY: 0 → -4px

Motion Principles

Purpose-driven Never animate for decoration alone. Every motion reveals, confirms, or guides.

Respect preferences Honor prefers-reduced-motion. All animations must have a static fallback.

Quick, not slow Keep transitions under 700ms. Users should never wait for an animation to finish.

Stagger, don't blast When multiple items animate in, stagger by 100ms. Groups feel intentional, not simultaneous.

05 Data Visualization

Charts that feel hand-crafted

Data should be easy to scan and feel at home with the brand. Dispatch Blue as primary data color, Parchment backgrounds. Minimal chrome, generous spacing.

AI Video Model Scores

Benchmark comparison — higher is better

Kling

Sora 2

Veo 3

Runway

Source Distribution

Where this edition's intel comes from

X / Twitter (40%)

Podcasts (30%)

Direct sources (20%)

Community (10%)

Chart Rules

Color: Dispatch Blue for primary data, Blue Light for secondary. Parchment Warm for tertiary only.

Labels: JetBrains Mono at 10–11px, uppercase, muted color. Below bars, beside legends.

Borders: Rounded corners on bars (6px top). No hard grid lines — use soft parchment guidelines only.

Animation: Bars grow from 0 to full height on scroll. Donut segments draw clockwise. Duration: 800ms staggered.

06 Components

UI Building Blocks

Reusable components for the newsletter website. Every element should feel cohesive, interactive, and effortless.

Buttons

Badges

Latest Mar 10, 2026 New Updated

Text Input

Content Card

This Week in AI

ElevenLabs Flows

A node-based creative canvas connecting 35+ visual AI models with voice, music, and sound effects.

Spacing Scale

4px

8px

12px

16px

24px

32px

48px

64px

96px

Border Radius

8px — sm

12px — md

16px — lg

999px — pill

07 Design Principles

What the Dispatch feels like

Four guiding principles for every design decision on the newsletter website.

Signal, not noise

Every element earns its place. If it doesn't help the reader understand AI faster, it goes. White space is a feature, not a gap to fill.

Effortless to scan

A reader should get the gist of the entire newsletter in 30 seconds by scanning headlines, badges, and bolded insights.

Warm, not corporate

Parchment tones, hand-drawn illustrations, and a conversational voice. This is a colleague sharing discoveries, not a memo from leadership.

Delightfully animated

Small moments of motion that reward attention. Content that draws itself in. Charts that build as you scroll. Nothing that gets in the way.

Do

Use generous white space between sections
Let illustrations animate in with the line-draw effect
Keep body text at 15px with 1.7 line-height
Use Dispatch Blue sparingly — for emphasis only
Stagger scroll reveal animations by 100ms
Include hover states on every interactive element
Use the Nano Banana 2 prompt template for all new illustrations

Don't

Use more than 2 accent colors on a single view
Create illustrations with heavy fills or shading
Use animations longer than 700ms for interactions
Set body text below 13px (accessibility)
Add decorative elements that don't serve the content
Use stock photos or generic AI-generated imagery
Break the Dispatch Blue + Parchment color pair