# WhatTerms — Brand Asset Register **Theme:** Indigo Pulse (default / dark) **Status:** v1.1 · revised post-delivery audit **Date:** 2026-05-07 **Companion document:** [BRAND-GUIDELINES-2026-05-07.md](BRAND-GUIDELINES-2026-05-07.md) **Companion audit:** [BRAND-ASSETS-DELIVERY-AUDIT-2026-05-07.md](BRAND-ASSETS-DELIVERY-AUDIT-2026-05-07.md) **Live reference:** `/brand-preview/pulse-indigo` > **v1.1 changes** (after first design pass): clarified mono-symbol approach (no enclosure, thicker stroke), required outlined wordmarks as default (not afterthought), added construction sanity-check rule, added per-phase file checklists. --- ## 0. About this document This is the production-ready spec for every brand asset WhatTerms needs. It is structured so a designer using **Claude design** (or any other tool) can work through it end-to-end and deliver a complete asset set. For each asset, the register specifies: - **Purpose** — where and how the asset is used - **Source format** — the editable / authoring file - **Output formats** — the files that ship to production - **Dimensions / variants** — sizes and color modes - **Color spec** — exact values - **Naming convention** — file name on disk - **Notes** — design intent, accessibility, gotchas All hex values, fonts, and construction rules referenced here are defined in [BRAND-GUIDELINES-2026-05-07.md](BRAND-GUIDELINES-2026-05-07.md). When in doubt, the brand guidelines win. --- ## 1. Folder structure (proposed) Production assets should land in this structure: ``` brand/ ├── logos/ │ ├── source/ # editable Figma / SVG masters │ ├── horizontal/ # mark + wordmark side-by-side │ ├── stacked/ # mark above wordmark │ ├── symbol/ # mark only │ ├── wordmark/ # wordmark only │ └── README.md ├── favicons/ │ ├── favicon.ico │ ├── apple-touch-icon.png │ ├── android-chrome-192.png │ ├── android-chrome-512.png │ ├── safari-pinned-tab.svg │ └── site.webmanifest ├── og/ │ ├── default-og.png # 1200×630 │ ├── twitter-card.png # 1200×600 │ ├── linkedin-share.png # 1200×627 │ └── templates/ # Figma template for per-page OG images ├── social/ │ ├── twitter-header.png # 1500×500 │ ├── linkedin-cover.png # 1584×396 │ ├── instagram-profile.png # 320×320 │ └── youtube-banner.png # 2560×1440 with safe-area centered ├── email/ │ ├── header-banner-dark.png # 600×120 │ ├── header-banner-light.png # 600×120 │ ├── signature-mark.png # 96×96 │ └── footer-icon-strip.png # social link icons in single image ├── app-icons/ │ ├── ios-app-icon-1024.png # iOS App Store │ ├── android-app-icon-512.png # Google Play │ └── source.svg ├── illustrations/ │ ├── pulse-wave-hero.svg │ ├── empty-state-stack.svg │ ├── empty-state-scan.svg │ └── source/ ├── icons/ │ ├── stack.svg │ ├── compare.svg │ ├── scan.svg │ ├── receipt.svg │ ├── pulse.svg │ └── source/ ├── fonts/ │ ├── inter-tight/ # variable .woff2 + license │ ├── inter/ # variable .woff2 + license │ └── geist-mono/ # .woff2 + license ├── tokens/ │ ├── tokens.json # W3C Design Tokens spec │ ├── tokens.css # CSS custom properties │ ├── tokens.js # JS export │ └── tokens.figma.json # Figma Variables format ├── press-kit/ │ ├── README.md │ ├── logo-bundle.zip │ ├── color-palette.png │ └── product-screenshots/ └── README.md # index of everything in /brand ``` The website's `public/` directory mirrors the user-facing subset of this (logos, favicons, og images, etc.). Source files live in this `brand/` directory; production exports are copied to `public/` during build or by hand. --- ## 2. Logo files The logo construction is defined in [`src/app/brand-preview/pulse/_factory.tsx`](../src/app/brand-preview/pulse/_factory.tsx) (export `PulseMark`). The Figma source should be reconstructed pixel-identically from this SVG. ### 2.1 Color variants (six required) | ID | Name | Mark fill | Stroke | Wordmark | Use | |---|---|---|---|---|---| | `dark` | Full color on dark *(canonical)* | `#101430` | `#FFB546` | `#F2EFEA` | Dark UI, dark marketing | | `light` | Full color on light | `#101430` | `#FFB546` | `#0A0A0A` | Light UI, light marketing, print on white | | `saffron-knockout` | Saffron knockout | `#101430` | `#FFB546` | `#101430` | Saffron-fill backgrounds | | `mono-dark` | Single-ink black | `#000000` | `#000000` | `#000000` | Print, fax, legal, single-ink reproduction | | `mono-light` | Single-ink white | `#FFFFFF` | `#FFFFFF` | `#FFFFFF` | Photo overlays, dark-photo backgrounds | | `outline` | Outline only | transparent | `#FFB546` (with `#101430` rounded-square outline 1.5 px) | `#FFB546` | Web "watermark" overlays, light branded patterns | ### 2.2 Lockup files (per variant — multiply 6 × 4 lockups = 24 base lockups) | Lockup | Description | Default size | |---|---|---| | `horizontal` | Mark left, wordmark right. Gap = mark height ÷ 3.2. | Mark 32 px | | `stacked` | Mark on top, wordmark centered below. Gap = mark height ÷ 4. | Mark 64 px | | `symbol` | Mark only. | 32 px | | `wordmark` | Wordmark only. Inter Tight 600. | 18 px cap-height | ### 2.3 Output formats per lockup | Format | Why | Sizes | |---|---|---| | `.svg` | Web, infinitely scalable, primary | Single file, intrinsic size set | | `.png` (transparent) | Email, social, anywhere SVG isn't supported | @1x, @2x, @3x at canonical sizes | | `.webp` (transparent) | Modern web fallback, smaller than PNG | @2x at canonical sizes | | `.pdf` | Print, vector handoff to print vendors | One per variant + lockup | | `.eps` *(optional)* | Legacy print workflows | Only on request | ### 2.4 PNG size table per lockup | Lockup | @1x size | @1x | @2x | @3x | |---|---|---|---|---| | `horizontal-32` | 144 × 32 | 144 × 32 | 288 × 64 | 432 × 96 | | `horizontal-48` | 220 × 48 | 220 × 48 | 440 × 96 | 660 × 144 | | `horizontal-64` | 288 × 64 | 288 × 64 | 576 × 128 | 864 × 192 | | `stacked-128` | 256 × 128 | 256 × 128 | 512 × 256 | 768 × 384 | | `symbol-32` | 32 × 32 | 32 × 32 | 64 × 64 | 96 × 96 | | `symbol-128` | 128 × 128 | 128 × 128 | 256 × 256 | 384 × 384 | | `wordmark-32` | 122 × 32 | 122 × 32 | 244 × 64 | 366 × 96 | ### 2.5 Naming convention ``` whatterms-{lockup}-{variant}-{size}@{density}.{ext} Examples: whatterms-horizontal-dark-64@2x.png whatterms-symbol-saffron-knockout-128.svg whatterms-wordmark-light.svg whatterms-stacked-mono-dark-128@3x.png whatterms-horizontal-dark.pdf ``` ### 2.5b Mono-symbol construction (clarification — v1.1) The standalone monochrome symbol must use the **no-enclosure, thicker-stroke** approach (matching `lockup-horizontal-mono-*`) — not a single-color enclosed-square. Otherwise the pulse-line is the same color as the box and the mark renders as a solid square with no visible glyph. **Correct mono-dark / mono-light symbol construction:** ```svg ``` Where `{color}` is `#000000` for mono-dark or `#FFFFFF` for mono-light. Stroke width is 3.4 (thicker than the 2.6 used in the enclosed canonical) because the standalone glyph needs more presence without the enclosure to anchor it. ### 2.5c Outlined wordmarks (required — v1.1) Every lockup with a wordmark must ship two SVG variants: - `lockup-*-{variant}.svg` — live `` element referencing Inter Tight. Use in web contexts that load the font. - `lockup-*-{variant}-outlined.svg` — text converted to `` data. Use everywhere else (Word, Keynote, generic Figma, email, print). The outlined variant is **not optional** and must be in the same delivery as the live-text variant. ### 2.6 Construction rules (designer must follow) The PulseMark SVG is the construction reference. Excerpted here for clarity: ```svg ``` Construction must be reproducible from this SVG. Any deviation (different anchor positions, different stroke width, missing rotation) is incorrect. For the wordmark: - Family: **Inter Tight** - Weight: **600 (semibold)** - Letter-spacing: **−0.018 em** (header) / **−0.014 em** (footer / small) - Convert to outlines for static logo files (don't ship the wordmark as live text in the SVG; bake to paths so font isn't required at render). --- ## 3. Favicon and app icons Web favicon family. Place final files at `public/` root. | Asset | Format | Size | Notes | |---|---|---|---| | `favicon.ico` | ICO multi-resolution | 16, 32, 48 | Pinned to mark only (no wordmark) at small sizes; legacy IE/Edge fallback | | `favicon-16.png` | PNG | 16 × 16 | Mark only, simplified geometry permitted | | `favicon-32.png` | PNG | 32 × 32 | Mark only | | `favicon-48.png` | PNG | 48 × 48 | Mark only | | `apple-touch-icon.png` | PNG | 180 × 180 | Mark only, no transparency, opaque `#101430` bg | | `android-chrome-192.png` | PNG | 192 × 192 | Mark only, opaque bg | | `android-chrome-512.png` | PNG | 512 × 512 | Mark only, opaque bg | | `safari-pinned-tab.svg` | SVG monochrome | 16-base | Single-color `#FFB546` outline of pulse-wave (no enclosure), Safari requires monochrome | | `mstile-150.png` | PNG | 150 × 150 | Mark only, opaque `#101430` bg, Windows tiles | | `site.webmanifest` | JSON | — | PWA manifest — see § 3.1 | ### 3.1 site.webmanifest ```json { "name": "WhatTerms", "short_name": "WhatTerms", "description": "Understand the tradeoffs.", "start_url": "/", "display": "standalone", "background_color": "#101430", "theme_color": "#101430", "icons": [ { "src": "/android-chrome-192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/android-chrome-512.png", "sizes": "512x512", "type": "image/png" }, { "src": "/android-chrome-512-maskable.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" } ] } ``` Add a `` block to the document head: ```html ``` ### 3.2 Maskable icon Android adaptive icons require a "maskable" version where the icon survives any platform-specific shape mask (circle, squircle, rounded square). Provide: - `android-chrome-512-maskable.png` — 512 × 512, mark sized at 60% (safe zone), centered, opaque indigo bg. ### 3.3 App store icons (forward — for iOS / Android apps) | Asset | Format | Size | Notes | |---|---|---|---| | `ios-app-icon-1024.png` | PNG | 1024 × 1024 | iOS App Store, opaque bg, no transparency, no rounded corners (Apple applies the mask) | | `android-play-icon-512.png` | PNG | 512 × 512 | Google Play, transparent or opaque | | `android-play-feature-graphic.png` | PNG | 1024 × 500 | Google Play hero | For native apps, all icons should be regenerated from the source SVG at the target resolution; never upscale a smaller raster. --- ## 4. Open Graph & social share images The default OG image is the brand's first impression on social. Get it right. ### 4.1 Default OG (`og:image`) | Property | Value | |---|---| | Path | `public/og-default.png` | | Format | PNG | | Dimensions | 1200 × 630 px | | Color space | sRGB | | Background | `#101430` (page surface) | | Composition | Logo lockup at left (~80 px mark + wordmark), tagline "Understand the tradeoffs." in Inter Tight 600 56 px below, with the pulse-wave motif from the logo extended at low opacity across the bottom third as a brand texture. | | Text contrast | All text against `#101430`; primary text in `#F2EFEA`, accent in `#FFB546`. | | File weight target | < 200 KB (optimize with tinypng or similar) | ### 4.2 Twitter card (`twitter:image`) Twitter recommends 1200 × 600 (slight horizontal trim). Easiest path: produce as a separate render, not a crop. | Property | Value | |---|---| | Path | `public/og-twitter.png` | | Dimensions | 1200 × 600 px | | Otherwise | Same composition as default OG | ### 4.3 LinkedIn share LinkedIn renders 1200 × 627. Same composition, same render style. Path: `public/og-linkedin.png`. ### 4.4 Per-page OG images (template) For service-detail pages (`/service/[slug]`), generate a per-service OG image dynamically. The existing `opengraph-image.tsx` route is the source — its design should follow this spec: | Element | Spec | |---|---| | Background | `#101430` | | Logo (top-left) | Symbol-only mark @ 64 px | | Service name | Inter Tight 700, 88 px, `#F2EFEA`, top-right | | Score | Inter Tight 700, 240 px, tabular-nums, color = score band color, centered | | Score band label | Inter 600, 36 px, `#F2EFEA`, below the score | | URL | "whatterms.com/service/[slug]" in Geist Mono 400, 22 px, `#9099B5`, bottom-left | | Tagline | "Understand the tradeoffs." in Inter 500, 22 px, `#9099B5`, bottom-right | Generate at request-time with `next/og` (Vercel ImageResponse) so the dynamic data lives in the URL. ### 4.5 Meta tags template ```html ``` --- ## 5. Social profile assets | Asset | Path | Dimensions | Format | Composition | |---|---|---|---|---| | **Twitter / X profile picture** | `social/twitter-profile.png` | 400 × 400 | PNG | Symbol-only on `#101430`, centered, ~70% safe zone | | **Twitter / X header** | `social/twitter-header.png` | 1500 × 500 | PNG | Brand pulse-wave at low opacity; no text in safe area | | **LinkedIn company page logo** | `social/linkedin-logo.png` | 400 × 400 | PNG | Symbol-only on `#101430` | | **LinkedIn company page banner** | `social/linkedin-banner.png` | 1584 × 396 | PNG | Brand pulse-wave + tagline "Understand the tradeoffs." in safe zone | | **Instagram profile** | `social/instagram-profile.png` | 320 × 320 | PNG | Symbol-only, opaque indigo bg | | **Threads profile** | `social/threads-profile.png` | 320 × 320 | PNG | Same as Instagram | | **YouTube channel icon** | `social/youtube-icon.png` | 800 × 800 | PNG | Symbol-only, opaque indigo | | **YouTube channel banner** | `social/youtube-banner.png` | 2560 × 1440 | PNG | Hero composition with safe-area centered (1546 × 423 always-visible zone). Must include logo + tagline in the safe area. | | **GitHub organization avatar** | `social/github-avatar.png` | 460 × 460 | PNG | Symbol-only on `#101430` | | **Mastodon profile** | `social/mastodon-profile.png` | 400 × 400 | PNG | Same composition as Twitter profile | | **Bluesky profile** | `social/bluesky-profile.png` | 400 × 400 | PNG | Same composition as Twitter profile | Safe-area note for headers: each platform crops headers differently across devices. Always position essential content (logo, tagline) within the documented safe zone for each platform; the rest of the canvas can be the brand pulse-wave texture. --- ## 6. Email assets | Asset | Path | Dimensions | Format | Notes | |---|---|---|---|---| | `email-header-banner.png` | `email/header-banner.png` | 600 × 120 | PNG | Horizontal logo lockup centered on `#101430`. 600 px is the email-safe width; @2x at 1200 × 240 also required for Retina. | | `email-header-banner@2x.png` | `email/header-banner@2x.png` | 1200 × 240 | PNG | Retina version | | `email-signature-mark.png` | `email/signature-mark.png` | 96 × 96 | PNG | Symbol-only, used in personal email signatures | | `email-footer-pulse.png` | `email/footer-pulse.png` | 600 × 24 | PNG | Saffron pulse-wave decoration for footer dividers | | `email-cta-image-template.psd` | `email/cta-image.psd` | 600 × 280 | source | Template Photoshop file for "feature card" image blocks within marketing emails | ### 6.1 HTML email template guidance - Body bg: `#101430` - Card bg: `#1A1F3D` - Body text: `#F2EFEA` - Headline: Inter Tight 600 (system fallback `Helvetica Neue, Arial, sans-serif` since email clients can't load custom fonts reliably) - Body: Inter (system fallback as above) - CTA button: saffron `#FFB546` bg, `#101430` text, 16 px / 600, padding 14 × 28, radius 999 px (or 28 px square if 999 fails) - Max content width: 600 px - Always include plaintext fallback ### 6.2 Personal email signature (HTML) ```html
WhatTerms
{Name}
{Title} · WhatTerms
whatterms.com
``` Signatures live on white (Gmail, Outlook, Apple Mail default), so they use the light-theme color values. --- ## 7. Marketing collateral ### 7.1 Slide deck template | Asset | Format | Notes | |---|---|---| | `whatterms-deck-template.key` | Keynote | Mac-native; primary internal use | | `whatterms-deck-template.pptx` | PowerPoint | Cross-platform | | `whatterms-deck-template.pdf` | PDF export | Read-only sharing | Spec: - 16:9 (1920 × 1080) - Slide background: `#101430` (matches product page surface) - Title slide: Inter Tight 700, 96 px, off-white - Body slide: Inter Tight 600, 56 px headline; Inter 400, 24 px body - Saffron used for emphasis only (one moment per slide max) - Logo bottom-left (24 px mark) on every slide - Page number bottom-right in `--text-subtle` - Light variant available for slides shown via projector in bright rooms ### 7.2 Document templates | Asset | Format | Notes | |---|---|---| | `whatterms-doc-letterhead.docx` | Word | Internal documents, formal letters | | `whatterms-doc-letterhead.gdoc` | Google Docs | Day-to-day collaborative writing | | `whatterms-doc-template.pages` | Apple Pages | macOS-native | Spec (US Letter / A4 both supported): - Margins: 1.0 in (US) / 25 mm (A4) - Header: Logo lockup top-left (32 px mark equivalent in print) - Footer: page number center, "whatterms.com" right - Font: Inter Tight 600 for headings, Inter 400 for body - Body type: 11 pt - Heading 1: Inter Tight 600 22 pt - Color: `#0A0A0A` text on white (light theme; documents are typically printed) ### 7.3 Blog / longform header images For Substack, Medium, blog posts: | Asset | Path | Dimensions | Format | |---|---|---|---| | Post hero (Substack default) | `marketing/post-hero-default.png` | 1456 × 819 | PNG | | Post hero (Medium / generic) | `marketing/post-hero-1200.png` | 1200 × 675 | PNG | Composition: title in Inter Tight 700, byline in Inter 500, brand pulse-wave at low opacity along bottom edge. ### 7.4 Hero illustration concepts These are forward — to be designed once a design partner is ready. - **Pulse-wave hero** — the brand mark's pulse-line scaled and extended into a marketing-hero abstract composition. - **Stack composition** — abstract stacked rectangles representing a user's app portfolio, with one or two highlighted in saffron to indicate "focus first." - **Receipt / scroll** — a stylized scroll of policy text with key clauses highlighted in saffron, suggesting the "decoding" action. All illustrations are flat, geometric, monochrome + saffron. No human figures. No literal magnifying-glass-on-document tropes. --- ## 8. Iconography Lucide is the primary icon library. Custom icons follow the same construction. ### 8.1 Custom icon set (5 required) | Icon | Concept | File | |---|---|---| | `pulse` | The brand mark, simplified to a single-color stroke icon | `icons/pulse.svg` | | `stack` | Three stacked rounded rectangles, slight perspective offset | `icons/stack.svg` | | `compare` | Two overlapping rounded rectangles | `icons/compare.svg` | | `scan` | Square with corner-bracket overlay (like a viewfinder) | `icons/scan.svg` | | `receipt` | Rectangle with torn-edge bottom and 3 horizontal lines (text) | `icons/receipt.svg` | ### 8.2 Icon construction rules - 24 × 24 grid, 1 px stroke (rendered at 2 px on Retina) - Round caps and joins - No fills (except brand mark) - Monochrome — color applied via CSS `currentColor` or stroke prop - Optical centering: pixel-snap to grid; visually balance heavier elements ### 8.3 Icon export - Source: SVG with named layers - Production: optimized SVG (svgo), `currentColor` for stroke - React: optionally generated as React components via `svgr` --- ## 9. Fonts WhatTerms self-hosts the three font families to avoid Google Fonts loading delays and to lock licensing. ### 9.1 Font kit | Family | License | File format | File size target | Variants | |---|---|---|---|---| | **Inter Tight** | OFL | `.woff2` (variable) | < 60 KB | Single variable file with weights 100–900 | | **Inter** | OFL | `.woff2` (variable) | < 80 KB | Single variable file with weights 100–900 | | **Geist Mono** | OFL | `.woff2` (static) | < 30 KB per weight | Regular (400) + Medium (500) | Total font payload target: **< 200 KB compressed**. Fonts subset to Latin-Extended-A (sufficient for all Latin-based languages WhatTerms supports). ### 9.2 Self-hosting CSS ```css @font-face { font-family: 'Inter Tight'; src: url('/fonts/inter-tight/InterTight-VariableFont_wght.woff2') format('woff2-variations'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('/fonts/inter/Inter-VariableFont_wght.woff2') format('woff2-variations'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Geist Mono'; src: url('/fonts/geist-mono/GeistMono-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Geist Mono'; src: url('/fonts/geist-mono/GeistMono-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } ``` ### 9.3 Licensing All three families are licensed under SIL Open Font License (OFL). License files must be present in each font's directory. No licensing fees; no per-domain restrictions. No restrictions on bundled use in apps. --- ## 10. Design tokens Tokens are the source of truth for color, type, spacing, radius. They live in three formats: ### 10.1 W3C Design Tokens spec (`tokens.json`) The canonical machine-readable token file, following the [W3C Design Tokens Community Group](https://design-tokens.github.io/community-group/format/) format. ```json { "color": { "brand": { "saffron": { "$value": "#FFB546", "$type": "color" }, "cream": { "$value": "#F2EFEA", "$type": "color" } }, "surface": { "page": { "$value": "#101430", "$type": "color" }, "card": { "$value": "#1A1F3D", "$type": "color" }, "tinted": { "$value": "#222848", "$type": "color" }, "inverse": { "$value": "#070920", "$type": "color" } }, "text": { "primary": { "$value": "#F2EFEA", "$type": "color" }, "muted": { "$value": "#9099B5", "$type": "color" }, "subtle": { "$value": "#5E657E", "$type": "color" } }, "rule": { "default": { "$value": "#252B45", "$type": "color" }, "strong": { "$value": "#333A56", "$type": "color" } }, "risk": { "low": { "$value": "#34D399", "$type": "color" }, "med": { "$value": "#D9A24A", "$type": "color" }, "high": { "$value": "#F77957", "$type": "color" }, "crit": { "$value": "#E94545", "$type": "color" } } }, "font": { "family": { "display": { "$value": "Inter Tight, Inter, system-ui, sans-serif", "$type": "fontFamily" }, "body": { "$value": "Inter, system-ui, sans-serif", "$type": "fontFamily" }, "mono": { "$value": "Geist Mono, ui-monospace, monospace", "$type": "fontFamily" } } }, "radius": { "sm": { "$value": "0.75rem", "$type": "dimension" }, "md": { "$value": "1rem", "$type": "dimension" }, "lg": { "$value": "1.25rem", "$type": "dimension" }, "xl": { "$value": "1.5rem", "$type": "dimension" }, "2xl": { "$value": "1.75rem", "$type": "dimension" }, "3xl": { "$value": "2rem", "$type": "dimension" } }, "space": { "1": { "$value": "0.25rem", "$type": "dimension" }, "2": { "$value": "0.5rem", "$type": "dimension" }, "3": { "$value": "0.75rem", "$type": "dimension" }, "4": { "$value": "1rem", "$type": "dimension" }, "5": { "$value": "1.25rem", "$type": "dimension" }, "6": { "$value": "1.5rem", "$type": "dimension" }, "8": { "$value": "2rem", "$type": "dimension" }, "10":{ "$value": "2.5rem", "$type": "dimension" }, "12":{ "$value": "3rem", "$type": "dimension" }, "16":{ "$value": "4rem", "$type": "dimension" } } } ``` ### 10.2 CSS export (`tokens.css`) Generated from `tokens.json` via Style Dictionary or similar. Imported into `globals.css`. Lives at `brand/tokens/tokens.css` and is symlinked / copied into the production app. ### 10.3 Figma export (`tokens.figma.json`) For Figma Variables. Imported via the Figma Variables UI or via a plugin. ### 10.4 Light-theme tokens When the light theme is implemented, tokens.json gets a `themes` object: ```json { "themes": { "dark": { "color.surface.page": "#101430", "color.text.primary": "#F2EFEA", ... }, "light": { "color.surface.page": "#FBF9F4", "color.text.primary": "#1A2330", ... } } } ``` The CSS export then generates `:root` (dark) and `[data-theme="light"]` selectors. --- ## 11. Press kit Single zip distributed to journalists, partners, and press. ### 11.1 Contents (`press-kit-2026-05.zip`) ``` press-kit-2026-05/ ├── README.txt # 1-page brand summary, contacts ├── BRAND-GUIDELINES.pdf # Static export of the brand guidelines doc ├── logos/ │ ├── horizontal-dark.svg │ ├── horizontal-dark.png │ ├── horizontal-dark@2x.png │ ├── horizontal-light.svg │ ├── horizontal-light.png │ ├── symbol-dark.svg │ ├── symbol-dark.png │ ├── wordmark-dark.svg │ ├── wordmark-light.svg │ └── (all other lockup × variant combinations) ├── screenshots/ │ ├── homepage-dark-1920.png │ ├── homepage-mobile-390.png │ ├── service-detail-dark-1920.png │ ├── stack-dashboard-dark-1920.png │ └── scan-flow-dark-1920.png ├── color-palette.png # Visual reference of all colors ├── typography-specimen.pdf # Inter Tight + Inter + Geist Mono sample └── founders-bio.txt # Short founder bio for press ``` ### 11.2 README.txt template ``` WhatTerms — Press Kit Updated: 2026-05-07 whatterms.com/press About WhatTerms WhatTerms reads the Terms of Service and Privacy Policy of every consumer app and produces a 0–100 risk score, category subscores, and verified clause quotes. We turn legal text most people never read into one-click decision support — and walk users through the next step. Brand assets - Logos in /logos (SVG + PNG, dark & light variants) - Screenshots in /screenshots - Brand guidelines in BRAND-GUIDELINES.pdf Contact - Press: press@whatterms.com - Partnerships: hello@whatterms.com Permission WhatTerms grants permission to use these assets in editorial coverage. Please don't: - Modify the logo (no recoloring, no rotation, no skewing) - Remove or alter the wordmark - Imply WhatTerms endorses your publication ``` --- ## 12. Color spaces and export specs | Use | Color space | Notes | |---|---|---| | Web (default) | sRGB | All `.png`, `.svg`, `.webp` | | Print | CMYK approximation of sRGB; provide Pantone equivalents below | `.pdf` for print vendors | | High-end display (Apple ecosystem) | Display P3 | Optional; provide P3 versions of OG images for sharper rendering | | Single-ink print | 100K (pure black) or PMS specified | For one-color reproduction | ### 12.1 Pantone approximations (for print) | Token | Hex | Pantone (closest) | |---|---|---| | `--brand-saffron` `#FFB546` | PMS 1365 C / 1365 U | | `--surface-page` `#101430` | PMS 2766 C / 2756 U | | `--surface-inverse` `#070920` | PMS 532 C / 533 U | | `--text-primary` `#F2EFEA` | PMS 9180 C / 9180 U (warm white) | | `--risk-crit` `#E94545` | PMS 1788 C / 1797 U | These are approximations; final print runs should have a press-proof reviewed before mass production. --- ## 13. File naming convention All asset filenames follow this pattern: ``` whatterms-{category}-{name}-{variant}-{size}@{density}.{ext} Lower-kebab-case throughout. No spaces, no underscores, no capital letters. ``` **Categories:** - `logo` — logo lockup files - `icon` — favicons, app icons, custom UI icons - `og` — Open Graph share images - `social` — social profile / cover images - `email` — email-specific assets - `marketing` — marketing-specific assets (deck, blog hero, etc.) - `illust` — illustrations - `font` — font files **Density suffix:** `@1x`, `@2x`, `@3x` for Retina-tiered raster files. Omit for vector / single-density. **Examples:** ``` whatterms-logo-horizontal-dark-32@2x.png whatterms-icon-favicon-32.png whatterms-og-default.png whatterms-social-twitter-header.png whatterms-email-header-banner@2x.png whatterms-marketing-deck-template.pptx whatterms-illust-pulse-wave-hero.svg ``` --- ## 14. Handoff checklist for Claude design When commissioning the asset set, deliver this checklist alongside the brand guidelines: ### 14.0 Construction sanity-check (run on every delivery) Before signing off on any delivery batch, run these checks: 1. `grep -r "#070920" brand/logos/ brand/favicons/` returns **zero matches**. The post-revision canonical mark fill is `#101430`. Any `#070920` is a stale reference from the v1.0 spec. 2. Every lockup file with a wordmark has a sibling `*-outlined.svg`. 3. Every monochrome symbol either omits the enclosure entirely OR uses contrasting colors for enclosure vs stroke. 4. Every PNG file passes `file FILENAME` and reports the expected dimensions. 5. `site.webmanifest` is valid JSON. 6. The README's documented enclosure fill matches what the SVGs actually use. ### 14.1 Phase 1 — Foundation (week 1) **Logos** (per § 2): - [ ] `logos/source/pulse-mark.svg` — canonical 32×32 - [ ] `logos/symbol/symbol-{dark,light,saffron-knockout,mono-dark,mono-light,outline}.svg` (6 files) - [ ] `logos/horizontal/lockup-horizontal-{dark,light,mono-dark,mono-light}.svg` (4 live-text) - [ ] `logos/horizontal/lockup-horizontal-{dark,light,mono-dark,mono-light}-outlined.svg` (4 outlined — REQUIRED) - [ ] `logos/horizontal/png/lockup-horizontal-*-{32,64}{,@2x,@3x}.png` raster exports - [ ] `logos/stacked/lockup-stacked-{dark,light}.svg` + outlined siblings (4 files) - [ ] `logos/stacked/png/` raster exports - [ ] `logos/wordmark/wordmark-{dark,light}.svg` + outlined siblings (4 files) **Favicons** (per § 3): - [ ] `favicons/favicon.svg` - [ ] `favicons/favicon.ico` (multi-res 16/32/48) - [ ] `favicons/favicon-{16,32,48,180}.png` - [ ] `favicons/android-chrome-{192,512}.png` + `-maskable.png` - [ ] `favicons/mstile-150.png` - [ ] `favicons/safari-pinned-tab.svg` (monochrome, single color) - [ ] `favicons/site.webmanifest` (valid JSON) **Tokens** (per § 10): - [ ] `tokens/tokens.json` (W3C DTCG format) - [ ] `tokens/tokens.css` (generated CSS variables) - [ ] `tokens/tokens.figma.json` (Figma Variables import) - [ ] (optional) `tokens/tokens.js` for JS consumption **Fonts** (per § 9 — *not yet delivered*): - [ ] `fonts/inter-tight/InterTight-VariableFont_wght.woff2` + license - [ ] `fonts/inter/Inter-VariableFont_wght.woff2` + license - [ ] `fonts/geist-mono/GeistMono-Regular.woff2` + license - [ ] `fonts/geist-mono/GeistMono-Medium.woff2` - [ ] `fonts/fonts.css` (with `@font-face` blocks) ### 14.2 Phase 2 — Web presence (week 2) - [ ] Default OG image (1200 × 630) - [ ] Twitter card (1200 × 600) - [ ] LinkedIn share (1200 × 627) - [ ] Per-page OG image template (Figma file + spec for `next/og` implementation) - [ ] All social profile images (10 platforms × profile + cover where applicable) - [ ] Custom icon set (5 icons: pulse, stack, compare, scan, receipt) ### 14.3 Phase 3 — Marketing & email (week 3) - [ ] Email header banner + Retina - [ ] Email signature template (HTML) - [ ] Slide deck template (Keynote + PowerPoint + PDF) - [ ] Document letterhead (Word + Google Docs + Pages) - [ ] Blog post hero template (Substack + generic 1200×675) - [ ] Press kit zip with README and screenshots ### 14.4 Phase 4 — Illustrations (week 4 — optional, scope-dependent) - [ ] Pulse-wave hero illustration - [ ] Stack composition illustration - [ ] Receipt / scroll illustration - [ ] Empty-state illustrations (stack, scan, directory) ### 14.5 Phase 5 — Native app (forward, when iOS / Android apps exist) - [ ] iOS app icon 1024 × 1024 (no rounded corners) - [ ] Android app icon 512 × 512 + maskable variant - [ ] Google Play feature graphic 1024 × 500 - [ ] App Store screenshot templates (5 sizes) - [ ] Splash screens --- ## 15. Source-of-truth references When in doubt, consult: 1. **Brand guidelines:** [BRAND-GUIDELINES-2026-05-07.md](BRAND-GUIDELINES-2026-05-07.md) — the rules. 2. **Logo construction:** [`src/app/brand-preview/pulse/_factory.tsx`](../src/app/brand-preview/pulse/_factory.tsx) — the canonical SVG. 3. **Live theme reference:** `/brand-preview/pulse-indigo` route — the canonical visual mock. 4. **Surface stack:** [`src/app/brand-preview/pulse-indigo/page.tsx`](../src/app/brand-preview/pulse-indigo/page.tsx) — the canonical hex values. 5. **Type system:** [`src/app/brand-preview/_theme-mock.tsx`](../src/app/brand-preview/_theme-mock.tsx) — the canonical type-in-context. 6. **Original brand options doc:** [BRAND-KIT-OPTIONS-2026-05-07.md](BRAND-KIT-OPTIONS-2026-05-07.md) — strategic context for why Indigo Pulse won. --- ## 16. Versioning | | | |---|---| | Document version | 1.0 | | Effective | 2026-05-07 | | Theme | Indigo Pulse (default / dark) | | Document owner | Founder | | Review cycle | When the brand evolves (new theme variant, new logo lockup, etc.) | When new assets are commissioned, add them to the relevant § here; don't create a parallel register.