hammer
hammer
a producer who treats machines like crew.
Fifteen years in broadcast. Eighteen months on AI. Same job. New tools. Same standard. This document is the design contract for everything Hammer ships — wordmark, color, type, motion, voice, tokens. Phase 0. No code is written until approved.
three directions.
hammer
aiproducer
hammer
brand mark
Only hammer. gets the protected cinnamon period. Render it as a controlled circle, not a typed glyph.
display motif
Bold Outfit or Geist title lockups may use one controlled cinnamon circle as punctuation.
serif rule
Never attach the cinnamon dot to Instrument Serif italic words or all-italic lines.
not decoration
No bullets, metadata separators, repeated card labels, or bloodlust punctuation dots.
one hue. eleven stops.
deepestink-deepest#0F0303
primaryink-0#1F0707
secondaryink-1#3D1413
bloodlustbloodlust#5A201D
mutedink-2#6E2C27
subtleink-3#A66860
faintink-4#C99891
accentcinnamon#F28E86
cream-2cream-2#E5BFB4
cream-1cream-1#F2DDD4
pagecream-0#FAEEE9
the live accent
vinaceous cinnamon.
One color. The period after hammer. One CTA per fold. Keyword highlights. Selected states. Use the dot only through the wordmark or the governed display motif. Never decorative. Never paired with another saturated hue. The deeper Polished Bloodlust is its hover & pressed state — only.
OKLCH
0.75 0.123 24.8RGB
242 142 134P3
0.895 0.574 0.54display, body, mono.
Display
outfit
a producer who treats machines like crew.
Rodrigo Fuenzalida · 200–900 · free · google fonts
Body
geist
A producer's first job is judgment. Knowing when to re-prompt, when to fix in post, and when to cut the shot entirely.
Vercel · 100–900 · free
Mono
geist mono
FRAME 047 / 247 · 2.39:1 · ANAMORPHIC
Vercel · 100–900 · free
112 px
h1 · hero
i produce stories
72 px
h2
crew of one.
48 px
h4 · section
from broadcast to ai.
32 px
h5
same standard. new tools.
24 px
h6 · quote
a filmmaker who happens to direct machines.
20 px
body-lg
Veo for the cinematic plate. Kling for character continuity. Suno for the music bed.
16 px
body
All stitched in Premiere — the same edit suite, a different room.
14 px
caption
Frame 047 / 247 · 2.39:1 · Anamorphic
12 px
caption-sm
Case study · Autonomous agents · 2026
four easings. five durations.
--ease-cinema
cinema
cubic-bezier(0.65, 0, 0.35, 1)
default · everything
--ease-shutter
shutter
cubic-bezier(0.85, 0, 0.15, 1)
page transitions
--ease-soft
soft
cubic-bezier(0.25, 0.1, 0.25, 1)
hover · feedback
--ease-spring
spring
cubic-bezier(0.34, 1.56, 0.64, 1)
delight · used rarely
instant
100 ms
quick
200 ms
standard
400 ms
slow
600 ms
cinematic
1000 ms
- earn every animation. if it doesn't aid comprehension or set tone, cut it.
- cinematic over snappy. the site moves like film, not like a productivity app.
- composed, not choreographed. stagger reveals; never bloom everything at once.
- scroll is the camera. the user is the operator; the page reacts.
- reduced-motion is a real audience, not an afterthought.
short. cinematic. earned.
fifteen years on broadcast. eighteen months on ai. same job. new tools. same standard.
sample headlines
01hammer. ai producer.
02i produce stories with machines.
03fifteen years on broadcast. eighteen on ai. same job.
04autonomous ai characters who run their own socials.
05crew of one. output of fifty.
voice rules
01concrete numbers and names beat vague claims.
02producer voice — confident, specific, light on hype.
03short sentences. cinematic. avg 12. cap 25.
banned · ci-enforced
unleashharnessrevolutionizesupercharge
game-changingnext-levelleveragesynergy
cutting-edgeseamlessrobustempower
disrupttap intothe power of AI
spacing, radius, elevation.
spacing · base 4
| --space-1 | 4 px |
| --space-2 | 8 px |
| --space-3 | 12 px |
| --space-4 | 16 px |
| --space-5 | 24 px |
| --space-6 | 32 px |
| --space-7 | 48 px |
| --space-8 | 64 px |
| --space-9 | 96 px |
| --space-10 | 128 px |
radius · default sharp
| --radius-0 | 0 px · default · editorial |
| --radius-1 | 2 px · buttons, chips |
| --radius-2 | 4 px · inputs, small cards |
| --radius-3 | 8 px · media containers |
| --radius-4 | 16 px · large media |
border weights
| --bw-1 | 1 px · default hairline |
| --bw-2 | 2 px · accent · focus |
| --bw-3 | 3 px · scrim · disclaimer |
z-index · named layers
| base | 0 |
| texture | 10 |
| content | 20 |
| cursor | 30 |
| nav | 40 |
| overlay | 50 |
| modal | 60 |
| toast | 70 |
one source. many renders.
this document is the design contract.
app/globals.css declares every custom property in :root
and maps Tailwind v4 theme utilities.
the chosen wordmark becomes the default <Wordmark /> component.
any subsequent pr that needs a new color, weight, easing, or component variant updates this guide first.
no deviation without an entry in §changelog.
files this guide produces
BRAND.htmlcanonical · this
BRAND_GUIDE.mdtokens · prose
brand/wordmark-{a,b,c}.svgphase 0
brand/icon.svgphase 0
brand/grain.svgphase 0
brand/og-template.tsxphase 1
app/globals.cssphase 1
phase 0 gate
jeff approves this guide and picks one wordmark direction. no code is written until both happen.