Choose the product, audience and message. Hadron turns the brief into video, image or slideshow ads. Compare every version side by side and choose the winner.
02Positioning
One process for every step behind the ad.
Hadron brings creation, review and export into one production process, so teams no longer have to coordinate each stage across separate tools.
02.1The Difference
Most AI tools deliver only the finished file. Hadron also keeps the production history behind every version, including the brief, source files, reviews, costs and final export. This makes it clear how each result was produced.
03Audience
For teams that produce and compare ad variations.
03.1Current Phase
A limited number of companies are currently using Hadron in private beta. New companies will be added by invitation.
03.2Designed For
DTC and e commerce teams, as well as performance marketing studios that want to produce more ads without managing every prompt, tool and file themselves.
04Brand Identity
Nineteen points form the Hadron mark.
Seven points form the H and twelve create the surrounding field. The geometry gives the mark a precise center and a lighter outer form.
04.1Logo
Hadron
PrimaryInk tile and wordmark
Hadron
ReversedWhite mark on ink
Hadron
OutlineHairline tile and wordmark
Mark onlyStandalone mark
16
20
24
32
48
Construction
Rules
Grid
64 unit box with an 8 unit major module
Cloud
Twelve points on a radius of 28, every 30°
H columns
x=22 and x=42
H rows
y=20, y=32, y=44
Lockup
Mark 32, gap 10, wordmark 18, weight 600, tracking -0.01em
Clear Space
Keep one 8 unit module of clear space around the mark. No text, icons or edges may enter this area.
Size Ladder · minimum 16px in the interface, 12px absolute minimum
12
16
24
32
48
64
04.2Design Tone
Quiet
Whitespace separates information and controls the pace.
Scientific
Structure comes before styling. Every element has a defined role.
Precise
Exact labels and values. Anything that doesn't help the user decide is removed.
04.3Identity
The visual identity is structured and technical, with emphasis on information, status and comparison.
05Design System
Tokens define color, type, spacing and motion.
Each visual role has a named token. The UI uses these tokens through CSS custom properties and Tailwind v4's @theme block in globals.css.
–Color Tokens
–Type Steps
–Motion Tokens
–Core Components
–System Sections
Color, type, spacing, motion and components are defined by role.
Ivory Tint
#f5f2eb
Supporting ivory tint
Off White
#fafaf8
Secondary surface
White
#ffffff
Base surface
Sidebar
#ffffff
Sidebar surface, points to card
Ink
#1a1a1a
Primary text and action
Ink Soft
#2a2a2a
Secondary text
Steel
#707070
Tertiary text
Steel Light
#a5a5a5
Muted text and metadata
Hairline
#c9c4b6
Borders and dividers
Accent
#1a1a1a
Single accent, points to ink
Error
#c53030
Failed · text and border
Error Surface
#fdecec
Failed · badge surface
Warn
#9a6b1d
Queued · text and border
Warn Surface
#fdf3dc
Queued · badge surface
Info
#1e40af
Running · text and border
Info Surface
#dbeafe
Running · badge surface
Success
#1f7a4c
Completed · text and border
Success Surface
#e7f5ee
Completed · badge surface
Brand colors identify each brand in the content.
Teal
Amber
Rose
Indigo
Emerald
Slate
Orange
Ink
Geist is used for interface copy. Geist Mono is reserved for identifiers.
TitleCompare three versionsclamp 28–52 / 600
StatementEvery version keeps its history.24 / 400
LedeA production system for AI generated ads.20 / 400
BodyCreate and compare versions, then select the strongest result.16 / 400
SmallSupporting detail and helper text.14 / 400
Mono, identifiersV1.0a · V2.1 · V3.112
Spacing follows one scale.
4
8 · within a group
16 · between groups
32 · between blocks
40
64 · between sections
96
Radius, elevation and motion.
Radius and Shadow
tile
12px
card
14px
pill
999px
shadow
Three steps: xs, sm, md
Motion
ease-smooth
0.22, 1, 0.36, 1
ease-swift
0.4, 0, 0.2, 1
dur-fast
120ms
dur-base
180ms
Motion shows state changes without distracting from the content.
Each easing and duration is a token. Replay the demo to compare them.
ease-smooth0.22, 1, 0.36, 1 · 180ms
ease-swift0.4, 0, 0.2, 1 · 180ms
ease-enter0, 0, 0.2, 1 · 180ms
ease-exit0.4, 0, 1, 1 · 180ms
Use fast for feedback, base for movement and slow for surface changes.
dur-fast120ms
dur-base180ms
dur-slow280ms
Use rise for entry, fade for replacement and a 60ms stagger for sequences.
rise+60+120+180+240+300
fade+60+120+180+240+300
Five component states, shown side by side.
Primary action
Default
Hover
Pressed
Focus
Inactive
Text Field States
Default
Focus
Invalid
Use lowercase letters and hyphens only.
Inactive
Row Heights
Compact row32
Default row36
Touch row44
Web control48
Controls in the app use 36. Landing, auth and public pages use 48. The two densities stay separate by design.
06aProduct Screens
From draft to export, every state is visible.
Key product states are rendered from the product code, with supporting screens defined below.
Compare Production Versions
Product ad
3 versions
V1.0aWinner
Cost$0.41
Time2m 18s
V2.1Winner
Cost$0.33
Time1m 42s
V3.1Winner
Cost$0.38
Time1m 05s
Select a version to mark it as the winner.
Run Lifecycle
The V1.1a pipeline runs from brief to final export. Each run moves through seven steps, with the status, cost, review and files saved along the way.
00 DraftBrief readyProduct, audience and message are saved before production starts.
01 QueuedProduction queuedHadron prepares the production steps and starts tracking costs.
02 RunningProduction in progressEach step reports its status, cost and output as it completes.
03 CompleteFinal video readyFinal video, review, captions, costs and source files are saved together.
Brand Details and Active Tabs
Hadron
Workspace
Overview
Brands
My brand12
My product
V1.1baseline
V2.0adapted
V3.0new
My persona
Add persona
Add product
All brands3
Library
Active runs
Videos
Images
Personas
OOperatorop@example.com
Back to overview
/my-brand
BrandProducts2Personas1
New product
My product/my-productThe product this run is built around.
Second product/second-product
Further Surfaces
Production progress7 steps
01Brief prepared$0.00
02Script written$0.04
03Images generated$0.12
04Video generatedrunning
05Reviewpending
06Captionspending
07Final exportpending
Storage use and limits14.2 of 50 GB
Videos8.4 GB
Images4.1 GB
Source files1.7 GB
Retention90 days
Costs by versionV2.0, 4 runs
Step
Runs
Per run
Total
Script
4
$0.04
$0.16
Images
4
$0.12
$0.48
Video
4
$0.14
$0.56
Captions
4
$0.01
$0.04
Total
4
$0.31
$1.24
06bWebsite Screens
The website explains what Hadron does, how it works and how to request access.
HadronRequest access
From the first idea to the finished ad.
Start nowV1.0aV2.1V3.1
Herotype led
Everything behind an AI generated ad
PromptsImagesModelsReviewsCaptionsExports
The problemillustrative
From brief to final export
01Compose
02Version
03Compare
04Ship
How it worksprocess grid
Everything behind each version stays connected.
Briefsaved
Production steps7 steps
Costsper step
Reviewsper version
Filessource and final
Product principlelist led
Private beta by invitation.
Company emailRequest access
Accessform led
Product
Support
Legal
HadronImprint · Privacy
Footerrule led
07Tech Stack
The system connects the web app, queue, storage and AI providers.
Current system architecture.
Deployment
Vercel for the frontend and Google Cloud Run for the worker
UI Components
Radix Dialog, Sonner and custom token based components
Frontend
Next.js 15 App Router, React 19, TypeScript in strict mode
AI Providers
Anthropic, OpenAI, fal.ai, Google Vertex AI and Replicate