PMFKit — Brand Guide

Changelog (Brand Kit v3): YC-native, disciplined kit. Typography: Instrument Sans (primary), JetBrains Mono (secondary). Palette: primary #0E1116, secondary green #175A47, accent grey #6B7378. 3×3 grid mark with center column (top, middle, bottom cells) filled in signal green. Favicon 24×24 solid primary. OG image via /og route. Tone: trustworthy, rigorous, evidence-first.

Logo

• Product name: PMFKit.
• Format: Single-color, ink (#0E1116) on transparent for wordmark. Grid mark: thin strokes with center column (three vertical cells) in signal (#175A47) or all-ink for mono.
• Dark mode: The app uses CSS invert on the logo in dark theme (.logo-invert img { filter: brightness(0) invert(1); }). Keep the logo dark so it inverts to white.
• Minimum size: 22px height in UI (e.g. header). Sizes used: 120×22, 140×25.
• Clear space: Allow at least the height of the cap as clear space around the logo.
• Usage: Use public/logo.svg (or public/brand/logo.svg) for in-app headers; use public/brand/pmfkit-lockup.svg or pmfkit-wordmark.svg from the media kit where appropriate.

Brand mark (grid)

• Concept: Minimal 3×3 grid, thin strokes. Center column (top, middle, bottom cells) filled with signal color (“signal” bar). No heavy borders; subtle rounding only if desired.
• Assets: public/brand/pmfkit-mark.svg (signal center column), public/brand/pmfkit-mark-mono.svg (all ink), public/brand/favicon.svg (24×24 solid primary).

Colors

Defined in app/globals.css and lib/brand/tokens.ts. Use CSS variables in the app; use lib/brand.ts / lib/brand/tokens.ts where CSS vars are not available (e.g. React-PDF, OG route).

Light theme (:root / html:not(.dark))

Dark theme (html.dark)

Constants for non-CSS contexts (e.g. PDFs, OG image)

In lib/brand/tokens.ts and lib/brand.ts:

• BRAND_SIGNAL = #175A47
• BRAND_SIGNAL_HOVER = #124a3a
• BRAND_INK = #0E1116
• BRAND_PAPER = #FAFAF9
• BRAND_PRIMARY / BRAND_PRIMARY_LIGHT (aliases for compatibility)

Typography

• Primary (Instrument Sans): --font-primary → --font-sans. Used for all UI text, headlines, body copy, navigation, buttons, forms, marketing copy, and report explanations. Weights: 400, 500, 600. Loaded via next/font/google in app/layout.tsx.
• Secondary (JetBrains Mono): --font-system → --font-mono. Used only for metrics, scores, percentages, stage labels, evidence categories, confidence indicators, system outputs, code blocks, and report metadata. Must feel like system output; never use for hero or body paragraphs.
• Scale: Use Tailwind text utilities; headings 600, subheads 500, body 400, buttons 500. Hero: text-4xl md:text-5xl font-semibold tracking-tight. Section headers: text-2xl md:text-3xl font-medium. Scores: text-xl md:text-2xl font-mono font-medium. See lib/brand/tokens.ts for scale reference.

Voice

• Tagline: “Diagnose your product. Decide what to build next.”
• Meta / subcopy: “Paste your URL. We pull stage, distribution readiness, and one thing to do this week from your site.”
• Tone: Trustworthy, rigorous, calm, analytical. We state the point; we don't describe ourselves as honest or direct, we show it.
• We say: Verified / Likely / Unknown, “your product,” stage, blocker, one thing this week, we observed / we inferred.
• We don't say: Leverage, unlock, robust, comprehensive, no fluff, actionable insights, contrast framing (“Not X — Y”), triads, landscaping openers (“In today's…”), confirmational authority (“The key is…”), consultant jargon, vague growth buzzwords.

See product-audience-voice.md for full voice rules and banned patterns.

• Engine alignment: Homepage and report copy match engine output: PMF stage (Idea Validation to Growth), recommendation (Continue / Pause / Kill), evidence labels (Verified, Likely, Unknown), and one thing this week. See architecture/output-narrative.md and architecture/pmf-stage-definition.md.

OG and social specs

• Open Graph image: Served by route app/og/route.tsx at /og (1200×630, code-generated). Referenced in app/layout.tsx for openGraph.images and Twitter images. Optional fallback: public/og-image.png.
• Social avatar: public/brand/social-avatar.png, 512×512 PNG, for profiles and social cards where a square asset is needed.
• PWA / app icons: See File list. Theme color for PWA: #175A47, background: #0E1116 (in public/site.webmanifest).
• Favicon & Apple touch icon: Theme-aware via app/layout.tsx metadata: icon_light.png for light (and fallback), icon_dark.png for dark (prefers-color-scheme).

File list

All paths relative to repo root. Assets under public/ are served at / (e.g. /logo.svg, /og).

Replacing placeholders: OG is generated by the /og route. Favicons and social avatar may be placeholder PNGs. Regenerate PNGs with node scripts/generate-brand-assets.mjs if needed (requires sharp). To change brand mark or wordmark, edit the SVG files in public/brand/.