Brand Implementation Guide v2.2
Everything needed to create brand-consistent emails, reports, dashboards, and web pages for Transcend. Designed for AI tools (Claude, Gemini, GPT), developers, and designers.
When to Use Branding (READ THIS 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
- @media queries (stripped by Gmail)
- External stylesheets
- rgba() colors (Outlook fails)
- CSS positioning (position: absolute)
- Flexbox or Grid
- SVG images (use PNG)
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
- Containment: Use a fluid layout with max-width of 1440px to prevent unreadable line lengths on ultra-wide monitors.
- The Grid: Follow an 8px spacing system. All margins and padding should be multiples of 8 (8, 16, 24, 32, 40).
- Visual Hierarchy:
- Level 1: Page Background (#f9fafb)
- Level 2: Content Cards (#ffffff) with 8px border-radius and 1px border (#e5e7eb)
- Level 3: Overlays and Modals with soft shadow
Navigation Patterns
- Global Header: Persistent top bar. Navy (#1E3A8A) background with Light Logo for brand-heavy pages; White background with bottom border and Dark Logo for utility-heavy dashboards.
- Sidebar: For complex tools, use a left-hand navigation rail. Active states indicated by Blue Light (#2c5aa0) vertical accent bar (4px) on the left.
- Breadcrumbs: Use for pages nested more than two levels deep. Text Secondary (#6b7280) for parent links, Text Primary (#111827) for current page.
Interactive Elements
- Button States:
- Default: Blue Light (#2c5aa0) / 6px radius
- Hover: Blue Dark (#1e4278)
- Active/Click: Slight scale down (98%) or darker shade
- Loading: Centered spinner or skeleton pulse
- Form Inputs: 1px border (#e5e7eb). Focus: 2px Blue Light outer ring with 2px offset. Validation: Success Green or Danger Red text below field.
- Hover States: Interactive cards should subtly lift (shadow increase) or show border color change to Blue Light (#2c5aa0).
Data Visualization
- Dashboards: Group related metrics in 8px-radius cards. Use "Big Number" formatting for Primary KPIs (Bold, 28pt+).
- Chart Color Sequence:
- Navy (#1E3A8A)
- Blue Light (#2c5aa0)
- Success Green (#27ae60)
- Warning Amber (#f59e0b)
- Soft Blue (#b8c5d9)
- Empty States: Never show a blank screen. Use a muted icon, "No data available" message in Text Secondary, and a primary CTA.
Accessibility Basics
- Contrast: All text on backgrounds must meet WCAG AA standards (4.5:1 ratio). Never use light gray text for essential information.
- Target Size: Interactive elements must have minimum clickable area of 44x44px.
- Focus Visibility: Never disable browser focus ring without replacing it with a brand-compliant high-contrast focus state.
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.