How we show up

Primary Logo Lockup

The primary logo combines two elements:

• Icon: A stylised envelope with diagonal lines, suggesting communication and forward momentum.
• Wordmark: "TouchBase" in bold black, "Pro" in #EB9822 orange.

Use this lockup as the default in digital headers, business documents, sales decks, and newsletters.

Alternate Logo Versions

Version	When to use
Reversed (white)	On dark or coloured backgrounds
Mono white	Over busy imagery or low-opacity photos
Mono black	Greyscale documents or black-and-white print
Icon only	Social favicons, mobile UI, tight spaces

Clear Space and Sizing

Clear space: Keep a clear zone equal to the height of the envelope icon on all four sides. Nothing sits inside that boundary.

Minimum sizes:

• Print: 20mm wide or larger
• Digital: 100px wide or larger

Below these sizes, switch to the icon-only version.

Incorrect Usage

None of the following are acceptable:

• Distorting or stretching the logo
• Changing brand colours outside the approved palette
• Adding drop shadows or outlines
• Repositioning the icon relative to the wordmark
• Rotating or skewing the logo
• Placing the logo on unapproved backgrounds (too busy or low contrast)

Background Colour Usage

Background	Logo treatment
White	Full-colour logo
Black	White logotype with coloured icon, or full white
Image or colour	All white, for contrast and legibility

Primary Colour

Orange is the hero colour. Use it for key buttons, highlights, logos, icons, and visual cues across all brand touchpoints.

HEX  : #EB9822
RGB  : 235, 152, 34
CMYK : 0, 46, 100, 0

Primary Colour Spectrum

These tones extend the orange from near-white through core orange to burnt umber and near-black. Use them to create depth and hierarchy while staying on-brand.

#ffffff   (white)
#fbecd7
#f7d8aa
#f3c27c
#efad4e
#eb9822   (core orange)
#bb7a1a
#8c5a14
#5c3d0f
#2c1d07
#121212   (near-black)

• Use lighter tones (#fbecd7 to #efad4e) for backgrounds and UI panels.
• Use darker tones (#bb7a1a to #2c1d07) for text accents, contrast, and hierarchy.

Secondary Colour

Cool Accent Blue balances the orange. Reach for it in charts, CTAs, infographics, and banners where cool contrast is needed. It works well on off-white or charcoal backgrounds.

HEX  : #2285EB
RGB  : 34, 133, 235
CMYK : 86, 45, 0, 11

Neutral Colours

Neutrals carry layouts, backgrounds, and body content. Keep them quiet.

Name	HEX	RGB	CMYK	Usage
White	#FFFFFF	255, 255, 255	0, 0, 0, 0	Backgrounds, large content areas
Charcoal	#3F3F3F	63, 63, 63	0, 0, 0, 75	Body text, borders, contrast

Tertiary Colour Palette

Use these sparingly. They are for data visualisation, analytics dashboards, charts, infographics, and UI components that need colour differentiation. They are not primary brand colours.

HEX	Usage
#457EA1	Charts, infographics, secondary buttons
#71CCD8	Data visualisation, badges, analytics UI
#5EC5AB	Infographics, success states, charts
#FBCE5E	Alerts, highlights, tooltips
#F79738	Analytics accents, iconography, charts
#E44F58	Warning states, data trends, heatmaps
#8B1740	Depth in data, critical events, tags

Usage Guidance

Element	Colour Role
CTA Buttons	Primary Orange (#EB9822)
Links / Highlights	Accent Blue (#2285EB)
Background Blocks	Neutrals
Charts / Illustrations	Accent Blue or Tertiary
Icons & UI States	Orange or Spectrum

Primary Typeface: Roboto

Roboto is clean and legible at every screen size. It carries the bulk of the visual work without competing with the brand's bolder elements.

• Font name: Roboto
• Styles: Regular, Medium, Bold, Italic
• Use for: body copy, forms and inputs, interface labels, legal and footnote text, email content

Display Typeface: Roboto Slab

Roboto Slab adds warmth and personality. The slab serif sits naturally alongside the logo and the brand's orange tones.

• Font name: Roboto Slab
• Styles: Regular, Medium, Bold
• Use for: marketing headlines, website hero blocks, presentation titles, CTA banners and social graphics

Web Compatibility

Both typefaces are Google Web Fonts and work in all modern browsers.

• Load via Google Fonts CDN
• Fallback stack: Arial, Helvetica, sans-serif

Embed snippet:

<link href="https://fonts.googleapis.com/css2?family=Roboto&family=Roboto+Slab:wght@400;700&display=swap" rel="stylesheet">

Typographic Hierarchy

Style	Font	Weight	Size (web)	Use case
H1	Roboto Slab	Bold	48px	Homepage hero, key titles
H2	Roboto Slab	Medium	36px	Section titles, campaigns
H3	Roboto	Bold	24px	Subheadings, CTAs
Body copy	Roboto	Regular	16px	Website text, emails
Caption / UI	Roboto	Medium	12-14px	Labels, forms, nav

Usage Rules

• Use Roboto Slab for headlines only. It loses impact if it appears everywhere.
• Do not mix too many weights on a single screen.
• Left-align body text as a default. Centre-align headlines only when layout symmetry calls for it.
• Set line height between 1.4em and 1.6em for comfortable reading.

Icon Set

Source library: Core Flat by Streamline HQ

Style Rules

• Solid, geometric shapes with strong negative space
• Simple, bold, and friendly in tone
• Consistent stroke weight throughout
• Modern flat style, no gradients or shadows
• Designed to read clearly at small sizes

Colour Usage

Light Mode (white or light backgrounds)

Role	Hex
Primary Fill	#BFBFBF (Light Grey)
Accent Fill	#2979FF (TouchBasePro Blue)

Dark Mode (charcoal or dark backgrounds)

Role	Hex
Primary Fill	#BFBFBF (Light Grey)
Accent Fill	#2979FF (TouchBasePro Blue)

The accent blue is the same value in both modes.

Where to Use Icons

• UI elements: menus, buttons, navigation
• Feature explanations in product screens or docs
• Marketing infographics

Spacing and Pairing

• Follow the padding guidelines when scaling icons up or down.
• Icons can sit alongside text labels, but keep the layout uncluttered. If it looks crowded, remove the icon or the label, not both.

Mood & Style

Every image should feel bold, cheeky, and upbeat. Never boring, never corporate.

• Tone: Irreverent and full of personality
• Vibe: Quirky facial expressions, dynamic poses, unexpected props
• Style notes:
  • High contrast, bright tones, minimal shadows
  • Backgrounds in brand colours or vibrant complementary hues
  • Diagonal overlays, geometric crops, bold framing
  • Slight retro or nostalgic references can work well

---

Portraits & Product Shots

Do	Don't
Use expressive, diverse models with animated facial expressions	Use bland, corporate stock imagery
Remove backgrounds and layer subjects over brand colour blocks or patterns	Leave subjects floating in white space or on dull backgrounds
Use dynamic crops and angles	Use straight-on, passport-style shots
Apply diagonal shapes and overlays in layouts	Stick to conventional horizontal/vertical layout divisions

---

Framing & Composition

Diagonal overlays Inspired by the envelope icon. Integrate diagonals either in the composition itself or as post-layout treatments.

Text overlays Text must sit inside high-contrast boxes or shapes. Legibility is non-negotiable. Never place text directly over a busy or low-contrast area of an image.

---

Do's and Don'ts

Do

• Use exaggerated expressions and playful props (giant goggles, megaphones, oversized glasses)
• Layer cutouts over coloured triangles or diagonals that match the brand palette
• Contrast subject emotion with bold messaging (example: "Create emails that rock!")
• Mix real, diverse faces with a clear brand tone

Don't

• Use generic corporate imagery
• Apply washed-out colour grading or excessive filters
• Overcrowd the image with too much text
• Rely on humour that may not translate across audiences. Avoid memes and anything that could offend.

The Envelope Shape as a Branding Motif

The TouchBasePro envelope's diagonal triangles are the foundation of the brand's graphic language. They appear as dividers, overlays, callout shapes, and patterns across all formats.

How to Use the Triangles

The envelope triangles can be adapted in the following ways:

• Flipped, cropped, or mirrored to create variety
• Overlaid as masks or transparency effects

Example Applications

• Marketing banners, diagonal envelope-inspired cutouts as the primary graphic device
• Photography backgrounds, two-tone envelope shapes framing the image
• Web and social corners, subtle hints at the envelope form without repeating the icon

Usage Across Formats

Format	Application Example
Digital	CTA graphics, email UI, social stickers
Print	Background overlays, brochure sections, infographics
Video	Motion transitions using envelope diagonal sweeps
Internal	Presentation templates, training docs, Slack emojis

Quick Rules

• The diagonal is the constant, preserve it even when cropping or mirroring
• Transparency effects are fine; keep overlays legible against the background
• Corner graphics should suggest the envelope, not reproduce it as a second icon

The Short Version

Cheeky. Collaborative. Confident, but always respectful.

We don't take ourselves too seriously, but we always take our clients seriously. The brand voice flexes to fit the context: bold and irreverent on social media, warm and direct in reports and proposals.

Voice Characteristics

Trait	What it means
Playful	Uses humour, puns, and clever wordplay
Bold	Speaks with flair and confidence, no playing it safe
Irreverent	Light-heartedly challenges norms, but never rude or crass
Endearing	Always likeable and human, never robotic or cold

Tone Scale

Think of tone as a dial from 1 (straight) to 10 (full cheek). Match the setting to the context.

Range	Use for	Example
Max Cheeky (8-10)	Social posts, subject lines, re-engagement campaigns	"Open this email before it opens itself."
Balanced (4-7)	Website copy, onboarding flows, case studies	"We're not saying we're email wizards... but results say we are."
Light Cheeky (1-3)	Proposals, reports, technical content, enterprise comms	"Here's what we delivered, how it performed, and what's next."

Your default daily tone sits comfortably at 4-6. Scale up or down based on audience and stakes.

Why It Matters

• Stands out. A consistent, recognisable voice separates us from generic SaaS copy.
• Sounds human. Clients and prospects respond better to a brand that feels like a person, not a platform.
• Drives engagement. Humour increases open rates and shares, relevant for a company that sells exactly that outcome.
• Works for creative teams. Marketing managers and agencies prefer a brand with a point of view.

Quick Checks

• Read the copy aloud. If it sounds like a LinkedIn post from 2023, rewrite it.
• Would a real person say this to a client in a meeting? If not, dial it back.
• Is the humour punching at us or at the situation? Good. Is it punching at the reader or at a competitor? Cut it.