DEV Community: Jeffrey Desenfans

How I Built an Instant Vector Brand Guidelines Generator in Next.js

Jeffrey Desenfans — Thu, 06 Aug 2026 09:57:12 +0000

Creating brand guidelines manually is a tedious process for designers and developers alike. Setting up color palettes with exact CMYK/RGB values, typography scales, logo safety zones, and exporting print-ready vector PDFs takes hours of manual layout work in Adobe InDesign.

To automate this, I built BrandGuideMaker—a web tool that programmatically compiles brand assets and design tokens into print-ready vector brand books instantly.

Here is a breakdown of how the web application generates vector PDF documents dynamically on the fly.

The Problem with Traditional PDF Generation

Most web-based document tools generate PDFs by taking a DOM screenshot (HTML-to-Canvas to PNG) and wrapping it in a PDF container.

This approach fails for professional print and design workflows because:

Text becomes rasterized instead of remaining selectable vector typography.
Vector graphics lose sharp scaling and print clarity.
Color spaces shift because web canvases only render in RGB.

Tech Architecture & Solutions

To deliver crisp vector brand books, the app separates the real-time preview from the vector compilation pipeline:

Framework: Next.js (App Router)
Live UI Engine: React + Tailwind CSS with CSS Variables for instant live previews.
Vector PDF Compiler: Dynamic SVG-to-PDF coordinate mapping using client-side PDF stream rendering.

How Dynamic Color Token Conversion Works

A key feature of automated brand books is generating multi-format color tokens (Hex, RGB, CMYK, HSL) from a single color picker input.

Here is a simplified snippet of how the color token engine processes user inputs for both screen and commercial print specifications:


javascript
// Color conversion helper for brand spec tables
function generateBrandColorTokens(hexColor) {
  // Strip hash and convert to RGB
  const hex = hexColor.replace('#', '');
  const r = parseInt(hex.substring(0, 2), 16) / 255;
  const g = parseInt(hex.substring(2, 4), 16) / 255;
  const b = parseInt(hex.substring(4, 6), 16) / 255;

  // Calculate CMYK values for print specs
  const k = 1 - Math.max(r, g, b);
  const c = k === 1 ? 0 : Math.round(((1 - r - k) / (1 - k)) * 100);
  const m = k === 1 ? 0 : Math.round(((1 - g - k) / (1 - k)) * 100);
  const y = k === 1 ? 0 : Math.round(((1 - b - k) / (1 - k)) * 100);

  return {
    hex: `#${hex.toUpperCase()}`,
    rgb: `rgb(${Math.round(r * 255)}, ${Math.round(g * 255)}, ${Math.round(b * 255)})`,
    cmyk: `C:${c}% M:${m}% Y:${y}% K:${Math.round(k * 100)}%`
  };
}

How I Built a 100% Client-Side PDF CMYK & Bleed Checker with Next.js (Zero Server Uploads)

Jeffrey Desenfans — Thu, 06 Aug 2026 09:55:58 +0000

**When graphic designers prep files for commercial printing, they face a recurring nightmare: RGB color shifts, missing 3mm bleeds, and un-embedded fonts ruining a physical print run.

Most preflight tools rely on expensive desktop suites like Adobe Acrobat Pro or online converters that force users to upload confidential client artwork to remote servers.

I decided to solve this by building PDF Print Checker—a lightweight Next.js web application that performs complete PDF inspection 100% inside the user's browser.

Here is a breakdown of how the client-side architecture works and why handling binary PDF parsing in JavaScript is easier than it sounds.**

Why Process PDFs Entirely Client-Side?

Moving heavy file processing from backend servers into the user's browser solves three major development hurdles:

Zero Infrastructure Costs: Parsing 100MB+ vector files on Node servers burns memory and inflates AWS/Vercel serverless billings.
100% Privacy by Design: Client artwork never leaves the browser local memory, eliminating GDPR and data compliance headaches.
Instant Speed: Eliminating file upload latency gives users immediate feedback.

The Technical Architecture

Framework: Next.js (App Router, static landing pages)
Parsing Engine: pdfjs-dist (Mozilla's PDF.js library for low-level stream inspection)
Styling: Tailwind CSS + Glassmorphism UI
Hosting: Vercel Edge

Key Preflight Checks Implemented

1. Color Space Extraction (CMYK vs. RGB)

Rather than rasterizing the entire PDF into bitmap images, the app inspects the raw stream operators (CS, cs, DeviceRGB, DeviceCMYK, ICCBased). This lets us catch vector shapes or raster assets using RGB profiles without melting the user's CPU.

2. Bleed Area Verification (MediaBox vs. TrimBox)

PDF spec definitions rely on distinct page boundaries:

MediaBox: The physical page size.
TrimBox: The intended size of the finished printed product.

By calculating the delta between the MediaBox and TrimBox coordinate arrays, we determine if the required 3mm bleed margin is present:


javascript
// Extracting TrimBox vs MediaBox difference in points
const mediaBox = page.view; // [x1, y1, x2, y2]
const trimBox = page.trimBox || mediaBox;

const bleedLeftPoints = Math.abs(trimBox[0] - mediaBox[0]); 
const bleedLeftMm = bleedLeftPoints * 0.352778; // Convert points (1/72 inch) to mm

const hasValidBleed = bleedLeftMm >= 3.0;