Loading...

Brand Implementation Guide v2.0

Everything needed to create brand-consistent emails, reports, dashboards, and web pages for Transcend. Designed for AI tools (Claude, Gemini, GPT), developers, and designers.

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.

Transcend Light Logo

Light (White) Logo - Use on dark backgrounds

Transcend Dark Logo

Dark (Blue) Logo - Use on light backgrounds

Logo URLs (Hosted)

Light: https://transcend-tools.web.app/shared/Transcend%20Logo%20Light.png Dark: https://transcend-tools.web.app/shared/Transcend%20Logo%20Dark.png

Color Palette

Primary Brand Colors

Transcend Blue (Navy)
#1E3A8A
Logo, headers, table headers
Blue Light
#2c5aa0
Links, buttons, accents
Blue Dark
#1e4278
Hover states
Blue Tint
#e8f0f8
Light backgrounds

Semantic Colors

Success Green
#27ae60
Positive metrics, success
Warning Amber
#f59e0b
Caution, attention
Danger Red
#dc2626
Critical issues, errors

Text & Background

Text Primary
#111827
Headings, body text
Text Secondary
#6b7280
Labels, muted text
Page Background
#f9fafb
Screen backgrounds
Border
#e5e7eb
Dividers, table borders

Typography

Context Font Stack
Web & Email Helvetica, Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', 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, 11-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

  • @media queries (stripped by Gmail)
  • External stylesheets
  • rgba() colors (Outlook fails)
  • CSS positioning (position: absolute)
  • Flexbox or Grid
  • SVG images (use PNG)

4. Code Reference (Copy-Paste Snippets)

Email Brand Header

<tr> <td style="background-color: #1E3A8A; padding: 16px 32px;"> <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"> <tr> <td style="vertical-align: middle;"> <img src="https://transcend-tools.web.app/shared/Transcend%20Logo%20Light.png" alt="Transcend" height="28" style="height: 28px; width: auto; display: block;"> </td> <td align="right" style="vertical-align: middle; font-size: 11px; color: #b8c5d9; letter-spacing: 1px; text-transform: uppercase; font-family: Helvetica, Arial, sans-serif;"> Portfolio Intelligence </td> </tr> </table> </td> </tr>

Data Table

<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="border-radius: 6px; border: 1px solid #e5e7eb; border-collapse: separate; border-spacing: 0; overflow: hidden;"> <tr> <th style="background-color: #1E3A8A; color: #ffffff; padding: 12px 16px; text-align: left; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;">Column 1</th> <th style="background-color: #1E3A8A; color: #ffffff; padding: 12px 16px; text-align: left; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;">Column 2</th> </tr> <tr> <td style="padding: 12px 16px; border-bottom: 1px solid #e5e7eb; color: #111827; font-size: 14px;">Row Data</td> <td style="padding: 12px 16px; border-bottom: 1px solid #e5e7eb; color: #111827; font-size: 14px;">Value</td> </tr> </table>

Key Finding Box (Blue)

<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin: 16px 0;"> <tr> <td style="background-color: #f9fafb; border-left: 4px solid #2c5aa0; padding: 16px 20px; border-radius: 0 6px 6px 0;"> <p style="margin: 0 0 8px 0; font-weight: 600; color: #1E3A8A; font-size: 15px;">Key Finding</p> <p style="margin: 0; color: #111827; font-size: 14px; line-height: 1.6;">Your finding text goes here.</p> </td> </tr> </table>

Primary Button

<a href="https://example.com" style="background-color: #2c5aa0; color: #ffffff; padding: 12px 24px; border-radius: 6px; font-family: Helvetica, Arial, sans-serif; font-weight: 600; font-size: 14px; text-decoration: none; display: inline-block;">Button Text</a>

5. AI Tool Prompting Guide

When working with AI tools (Claude, Gemini, GPT), include these specifications in your prompts for brand-consistent output.

Standard Prompt Addition

Use Transcend brand colors: - Navy #1E3A8A for headers and table headers - Blue Light #2c5aa0 for buttons and links - Text #111827, secondary text #6b7280 - Background #f9fafb, borders #e5e7eb - Success green #27ae60, warning amber #f59e0b, danger red #dc2626 Design rules: - Border radius: 6px for tables/buttons, 8px for cards - Table headers: navy background with white text - Font: Helvetica, Arial, sans-serif Do NOT generate or recreate the Transcend logo - use the official PNG files.

For Email Generation

Create an email using Transcend brand standards: - Table-based layout with inline styles only - Navy (#1E3A8A) header bar with white logo - Font: Helvetica, Arial, sans-serif - Body text: #111827, secondary: #6b7280 - Tables: navy headers, white text, 6px border-radius - No @media queries, no external CSS, no rgba colors - Include VML fallback for buttons (Outlook compatibility)

For Image Generation

Create [description] using Transcend brand colors: - Primary navy blue: #1E3A8A - Accent blue: #2c5aa0 - Keep space for logo overlay (I will add the real logo in post-production) - Style: Professional, modern, appropriate for gaming/VC industry - Resolution: 2048x2048 (I will downscale as needed)