Most design teams keep brand guidelines in Notion, PDF, or a shared Figma file. Six months later, someone updates a colour hex or the logo lockup in production, but the PDF still shows the old version. Designers follow the wrong spec. Brand inconsistency snowballs. Velocity X inverts this: your `brand.json` is the single source of truth. At build time, a React-to-PDF pipeline (Satori + custom templates) renders a printable brand-guidelines document with your logo, palette, typography, voice rules, and do/don't examples — all locked to the same data that powers your website. Change the primary colour once; your site and the PDF update together.
Why Auto-Generated > Manual Brand Books
Manual brand PDFs are beautiful until they drift. A designer applies a new shade of blue to a component; the Figma spec updates; the PDF stays purple. Or a copywriter refines the brand voice and pushes it live; the guidelines PDF still says "energetic and casual" — now contradicted by the real thing. Every brand book is a maintenance liability.
Auto-generated guidelines are always current. The build fails if data is inconsistent. Your PDF is generated fresh on every deploy. If you update `brand.json` (colour, logo path, tagline, type scale), the PDF reflects it immediately. Designers download the PDF from your public docs folder or CDN. They're never working from an outdated spec. The website and the PDF are, by definition, the same brand.
Architecture: Satori React Templates + brand.json Data Injection
Velocity X stores your brand identity in a single JSON file:
{`{
"companyName": "Staff Operations Dashboard",
"tagline": "Route smarter. Deliver faster.",
"colorPrimary": "#5B3BE8",
"colorSecondary": "#FF6B35",
"colorNeutral": "#2D2D2D",
"logoPath": "/logos/staff-ops-mark.svg",
"logoFullPath": "/logos/staff-ops-full.svg",
"typeScale": {
"h1": "48px",
"h2": "36px",
"body": "16px"
},
"voiceRules": [
"Direct, no jargon",
"Results-first: lead with ROI",
"Warm but professional"
]
}`}
At build time, an Astro route (e.g. `src/pages/brand-guidelines.pdf.ts`) imports `brand.json`, wraps it into a React component, and passes it to Satori. Satori renders React as SVG, then converts to PDF. The PDF lands in your build output — `dist/brand-guidelines.pdf`. Deploy to Netlify; designers download it from your public `/docs/` folder or CDN.
{`// src/pages/brand-guidelines.pdf.ts
import Satori from 'satori';
import { readFileSync } from 'fs';
import brandJson from '../data/brand.json';
export async function GET() {
const GuidelinesPdf = ({ brand }) => (
{brand.companyName}
{brand.tagline}
Colour Palette
Typography
Heading 1
Heading 2
Body text
Brand Voice
{brand.voiceRules.map((rule) => (
- {rule}
))}
);
const pdf = await Satori(
The template is a React component. Data comes from JSON. Satori renders it. A 2-page PDF lands in your repo. Designers see the current brand, pixel-perfect, every time.
What's Inside: Logo, Palette, Type, Voice, Do/Don't
A full Velocity X brand-guidelines PDF includes a cover page with your logo and tagline, a colour palette section (primary, secondary, neutral, accent — all with hex codes), typography specimens (heading and body styles at their real sizes), a voice & tone section listing your core messaging principles, and a do/don't examples grid. Each section pulls directly from `brand.json` or a companion JSON file that lists design violations. A do/don't might show your logo at minimum size (do), then at illegible 40px on a busy background (don't). These are React components too — photo URLs or inline SVGs load into the PDF, and Satori renders them as images.
Six FAQs: Brand Guidelines at Scale
Can I include Figma links or external assets in the PDF?
Yes. The React component can fetch and embed a Figma thumbnail or download a design system asset at build time. External URLs are resolved during the build, not at runtime, so the PDF is self-contained and doesn't break if a link goes dead later.
What if I need a multi-language guidelines PDF?
Generate multiple PDFs — one per language. Add a `lang` parameter to your build script. Each PDF pulls from a translated variant of `brand.json` or a separate `i18n` JSON file. Satori renders text in any script (Latin, Cyrillic, CJK, Arabic) if you load the appropriate fonts.
Can designers edit the template?
You can, but shouldn't. The PDF is auto-generated; if a designer tweaks it manually, their edits vanish on the next deploy. Instead, update the React template or `brand.json`, rebuild, and re-deploy. Version control the template; designers fetch the latest PDF from your public site. Edit once; ship everywhere.
How do I distribute the PDF to new team members?
Host it at a public URL (e.g. `yoursite.com/brand-guidelines.pdf`). Link it from your onboarding docs or Notion. Designers download it during setup. Since the PDF is auto-generated on every deploy, they always get the current version — no manual handoff, no outdated PDFs floating around email.
Can I include interactive elements (e.g., clickable links)?
Satori renders static PDF, so no forms or JavaScript interactivity. But you can include QR codes or URLs as text. If you need interactive guidelines, render a web version alongside the PDF — same React template, two outputs (HTML for the web, PDF for download).
What if my brand.json changes mid-quarter?
The PDF is idempotent. Rebuild, and the new version is current. Old PDFs that designers downloaded are now outdated, but you can re-host the new one with the same filename. On your next deploy, everyone gets the updated guidelines. If you need version history, tag each build with a date or version number.
The Bottom Line
Brand consistency isn't enforced by hope — it's enforced by architecture. Velocity X generates your website and your brand-guidelines PDF from the same `brand.json`, so they can never drift. Designers download the PDF; it matches the live site. The build fails if data is inconsistent. You edit `brand.json` once; your site, your PDF, and every auto-generated asset update together. Start building your next brand on Velocity X, and never maintain a stale brand book again.