Logo system
The -light / -dark suffix names the BACKGROUND the logo sits on — not the logo's own ink color. Reading "logo-light = light logo" is wrong and ships invisible white logos onto cream paper. Always pick by the background.
Asset downloads — one click
Sizing & clearspace
Nav lockup sits at 24px height (20px ≤ 768px). Keep clearspace equal to the sigil's height on all sides. Never the legacy CSS 4-dot sigil placeholder — only the real SVGs.
Client logos on dark
Transparent SVG/PNG → filter:brightness(0) invert(1). Opaque light-bg PNG → grayscale(1) invert(1) contrast(1.15) brightness(1.1); mix-blend-mode:screen.
Color
Red (#b91c2e) is the only loud color. Use it sparingly — eyebrows, pins, redaction bars, cursive accents, corner brackets, one primary CTA per viewport. Never pure #000 on hero surfaces; use #050505 dark / #f4f1eb light.
Typography
Aspekta for headers. Geist for body. Never set headers in Geist. Geist Mono for labels & eyebrows. Dancing Script for red cursive accents only.
You are not selling to a company. You're selling to one person — a founder, a growth lead, a VP — with their career, their bonus, and their reputation on the line. They aren't making a purchase. They're making a career-risk decision.
The dossier component library
These are what make a page unmistakably Propaganda Inc. Document IDs, redaction reveals, file tabs, corner brackets, black panels, hand-built instrument-panel SVGs, crosshair cursor, film grain.
Red 2px L-brackets on opposite corners. Hover "tracking" frames on interactive cards.
- DECLASSIFIED / VERIFIED rubber stamps ("tacky")
- Ghost watermark letters behind cards
- Poster grids
- The legacy CSS 4-dot sigil placeholder
- Stock or clipart SVGs — instrument panels are always hand-authored to the SVG spec
Buttons & CTAs
One button shape: the pill. Every button — primary, secondary, nav — is fully rounded (border-radius: 100px), set in Geist at 600 weight, with a Geist Mono arrow that slides right on hover and a 2px lift. Buttons are never sharp or lightly-rounded. One primary CTA per viewport.
White (.btn-w) for dark surfaces; red (.btn-red, --accent) for emphasis or light surfaces. Reserve for the single most important action on a page.
Ghost (.btn-g) — outlined, sits beside a primary for the lower-priority action. Nav pill — compact, top-right of every page.
Specs
- Sharp or small-radius corners — buttons are always full pills
- More than one primary CTA competing in a single viewport
- The arrow set in Geist or Aspekta — it is always Geist Mono
- Resting drop shadows — elevation appears on hover only
Motion
Scroll reveals
IntersectionObserver adds a class; 0.5–0.8s ease. Redactions open once and don't re-close.
Idle loops are quiet
4s phone-ring cycle, gentle float on proof cards, breathing status dots. Nothing bounces.
Hover
Scale ≤ 1.07, border-color shifts, bracket reveals. No color inversions.
Voice & copy
- Always spell "Propaganda Inc" in full. Never shorten to "Propaganda."
- Declarative, specific, evidence-led. Numbers over adjectives — "$245K → $5M. 20.4×." beats "amazing results."
- Psychology vocabulary is the moat. Name the mechanism: Conviction Latency, loss aversion, future pacing, the first yes.
- CTAs presume the action is happening and future-pace into it. Bullets are selfish reasons.
- Surprise gifts are never pre-announced — revealed after the action.
- Never write "fluff" (or "no fluff" / "zero fluff") in any copy, code, or chat. Use concrete operational language.
- Signature: "— DT" in Dancing Script, then a mono caption "D.T. (Dylan) Thomas · Founder, Propaganda Inc."
Propaganda Paper
The light editorial variant — funnels, sales letters, research, the method doc. Aspekta heads, serif justified columns, red drop caps, black feature panels.
The reason your spend isn't converting.
A click is a behavior. Nobody books a demo, puts their name on it, and walks it into their boss because they clicked — they do it because they're convicted. The entire job of growth is to collapse the gap between the two, on purpose, with behavioral science instead of luck.