Brand Implementation Guide v2.3
Use this as the implementation contract for Transcend logos, colors, email mode choice, web UI basics, and AI prompting. It is an internal resource for builders and operators, not a public brand book.
Executive Summary
Most Transcend work should be quiet, useful, and on-brand without heavy chrome. Use plain email for normal correspondence, branded email only for report-like deliverables, and the shared web assets/CSS variables for tools pages so brand updates remain centralized.
Audience / Access Contract
Source Freshness
Reviewed May 20, 2026 against `branding/TRANSCEND_VISUAL_IDENTITY_GUIDE.md` v1.2, `docs/DESIGN_SYSTEM.md`, `shared/styles.css`, and current plain/branded email skill guidance. Refresh this page when logo assets, email dark-mode rules, or shared CSS variables change.
When to Use Branding First
We have two email skills — transcend-plain-email and transcend-branded-email (branded). Both are on-brand. The difference is chrome: the branded skill adds the navy header, logo, and footer. The plain skill still uses our brand colors, navy table headers, and 13px font — it just looks like a normal professional email instead of a newsletter.
Most emails should use transcend-plain-email.
| You're writing... | Skill |
|---|---|
| Reply, follow-up, check-in, intro | transcend-plain-email — on-brand, no chrome |
| LP outreach, deck forward, fundraising | transcend-plain-email — on-brand, no chrome |
| Thank-you to a founder or partner | transcend-plain-email — on-brand, no chrome |
| ROAS report, portfolio analysis | transcend-branded-email — navy header, logo, tables |
| Platform announcement, team update with data | transcend-branded-email — navy header, logo, tables |
Rule of thumb: If you'd normally just type and hit send, use transcend-plain-email. Use transcend-branded-email (branded) only for reports, analyses, and announcements — deliverables that happen to travel by email.
For AI tools: Tell your AI "Write a transcend-plain-email" for most messages. Only say "Write a transcend-branded-email branded email" for reports and announcements.
Quick Start (Copy-Paste Ready)
Essential Colors
Navy (headers): #1E3A8A
Blue Light (buttons): #2c5aa0
Text Primary: #111827
Text Secondary: #6b7280
Background: #f9fafb
Border: #e5e7eb
Semantic Colors
Success Green: #27ae60
Warning Amber: #f59e0b
Danger Red: #dc2626
Design Rules
Border radius: 6px (tables, buttons)
Border radius: 8px (cards)
Table headers: Navy bg, white text
Buttons: Blue Light bg, white text
Contents
1. Brand Identity (Strategic)
Logo Usage
Critical Rule
Never recreate the logo. Always use official PNG files. Never ask AI tools to generate or embed the logo.
Light (White) Logo - Use on dark backgrounds
Dark (Blue) Logo - Use on light backgrounds
Logo URLs (Hosted)
Color Palette
Primary Brand Colors
Semantic Colors
Text & Background
Typography
| Context | Font Stack |
|---|---|
| Web & Email | Helvetica, Arial, sans-serif |
| Print (Body) | Source Serif 4, Georgia, 'Times New Roman', serif |
| Print (Headings) | Inter, Helvetica, Arial, sans-serif |
2. Design Specifications (Tactical)
Border Radius Standards
| Element | Radius | Example |
|---|---|---|
| Tables | 6px |
Data tables, comparison tables |
| Buttons | 6px |
Primary/secondary CTAs |
| Key boxes | 6px |
Callout boxes, alerts |
| Cards | 8px |
Content cards, dashboard panels |
| Badges | 4px |
Status indicators, tags |
Component Specifications
Tables
Header: Navy (#1E3A8A) background, white text, 600 weight, uppercase, 12px
Cells: 12-16px padding, border-bottom 1px solid #e5e7eb
Container: border-radius 6px, overflow hidden
Buttons
Primary: Blue Light (#2c5aa0) background, white text, 600 weight
Padding: 12px 24px
Hover: Blue Dark (#1e4278)
Key Boxes (Callouts)
Standard: Light gray (#f9fafb) background, 4px blue left border
Success: Light green (#dcfce7) background, green (#27ae60) border
Warning: Light amber (#fef3c7) background, amber (#f59e0b) border
Error: Light red (#fee2e2) background, red (#dc2626) border
3. Email Implementation (Technical)
Critical Rule
Emails must use table-based layout with inline styles only. No external CSS, no <style> blocks in body, no @media queries.
Email Client Compatibility
| Feature | Gmail | Apple Mail | Outlook |
|---|---|---|---|
| Inline styles | Yes | Yes | Yes |
| Border-radius | Yes | Yes | No (use VML) |
| Gradients | Yes | Yes | No (solid fallback) |
| rgba() colors | Yes | Yes | No (use hex) |
Email Don'ts
3.5 Website Mode (Interactive Pages) NEW
Website Mode applies to dashboards, analytical tools, and interactive portals. While Email and Document modes are static, Website Mode prioritizes functional hierarchy, state transitions, and data density.
Layout & Structure
Navigation Patterns
Interactive Elements
Data Visualization
Accessibility Basics
4. Code Reference (Copy-Paste Snippets)
Email Brand Header
Data Table
Key Finding Box (Blue)
Primary Button
5. AI Tool Prompting Guide
When working with AI tools (Claude, Gemini, GPT), include these specifications in your prompts for brand-consistent output.