Brand & Design System

TMC Group
Brand Guidelines

The definitive reference for all TMC brand applications — ensuring consistent, professional representation across every touchpoint.

Version 1.0 — 2025
Status Active
Owner Marketing & Communications
Audience Internal & Partners
Foundation

Brand Overview

TMC Group is a technology management consulting firm with 20 years of experience helping organisations unlock business value through strategic use of technology.

Mission & Positioning

Our brand reflects who we are: a trusted technology partner that bridges the gap between business strategy and technology execution.

"Technology is not just a tool — it's a strategic asset."

TMC Group Brand Manifesto

Mission

We unlock business value through the effective use and management of technology.

Vision

To be Australia's most trusted technology management partner across all industries.

Promise

Technology partners you can trust — delivering measurable outcomes, every time.

Brand Values

Five core values define how TMC Group operates and presents itself to the world.

Expertise
20 years of deep technology management experience across diverse industries.
Integrity
Honest, transparent counsel that prioritises client outcomes over billable hours.
Partnership
We work alongside our clients — not just for them — to achieve lasting change.
Innovation
Forward-thinking solutions that leverage emerging technology to create competitive advantage.
Accountability
We own our recommendations and stand by our results — 98% client satisfaction.

Brand Credentials

Statistics that reinforce brand authority and may be used in approved communications.

20+
Years Experience
98%
Client Satisfaction
1,500
Projects Completed
6
Core Services
Foundation

Color Palette

Our color system is built on a core palette of two primary anchors — TMC Blue and Charcoal — enriched by a vibrant gradient and a functional neutral scale.

Primary Colors

The primary palette is the dominant expression of the TMC brand. TMC Blue leads all digital and print applications.

TMC Blue
#0080CC RGB 0, 128, 204 CMYK 100, 37, 0, 20 Pantone 285 C
Primary
TMC Charcoal
#242627 RGB 36, 38, 39 CMYK 0, 0, 0, 85 Pantone Black 6 C
Primary
White
#FFFFFF RGB 255, 255, 255 CMYK 0, 0, 0, 0 Paper White
Primary
TMC Gradient
Blue → Purple → Pink #0080CC → #6D28D9 → #DB2777 135° linear
Signature

Secondary Colors

Drawn from the gradient, these provide accent flexibility for digital interfaces and presentations.

TMC Purple
#6D28D9 RGB 109, 40, 217
Accent
TMC Pink
#DB2777 RGB 219, 39, 119
Accent
Blue Tint
#E0F2FF RGB 224, 242, 255
Supporting
Purple Tint
#EDE9FE RGB 237, 233, 254
Supporting

Neutral Scale

A full neutral scale derived from TMC Charcoal for text, borders, backgrounds, and UI elements.

Charcoal 100
#242627
Body Text
Charcoal 80
#3E4042
Secondary Text
Charcoal 50
#919293
Placeholder
Charcoal 20
#D8D8D9
Borders
Charcoal 10
#ECECEC
Dividers
Off White
#FAFAFA
Backgrounds

Color Usage Proportions

Follow the 60-30-10 rule: dominant neutral, secondary brand color, accent gradient.

60% Neutral
30% Blue
10%
White and off-white surfaces dominate. TMC Blue is used for primary actions and key brand moments. The gradient is reserved for hero elements, signatures, and emphasis.

Accessibility & Contrast

All color combinations must meet WCAG 2.1 AA minimum contrast ratios. Minimum 4.5:1 for body text, 3:1 for large text and UI components.

Combination Contrast Ratio WCAG AA WCAG AAA
White on Blue 5.26:1 Pass Fail
White on Charcoal 16.1:1 Pass Pass
Blue on White 5.26:1 Pass Fail
Blue on Blue Tint 4.8:1 Pass Fail
Foundation

Typography

Inter is TMC Group's primary typeface — a highly legible, professional grotesque designed for modern screens and print.

Primary Typeface: Inter

Inter is used for all corporate communications, digital products, and marketing materials. It offers exceptional legibility at all sizes and weights.

Alphabet Inter — Regular 400

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
0 1 2 3 4 5 6 7 8 9 & @ # $ % ! ? . , ; :

Weights
Light 300 font-weight: 300
Regular 400 font-weight: 400
Medium 500 font-weight: 500
Semibold 600 font-weight: 600
Bold 700 font-weight: 700
ExtraBold 800 font-weight: 800
Black 900 font-weight: 900

Type Hierarchy

A consistent hierarchy creates visual clarity. Apply roles precisely — never substitute one level for another for decorative effect.

Display Technology
Partners
60–72px / Black 900 / −0.04em
H1 Brand Guidelines 40–48px / ExtraBold 800 / −0.025em
H2 Color Palette 30px / Bold 700 / −0.02em
H3 Primary Colors 20px / Bold 700 / −0.015em
H4 Color Values 18px / Semibold 600
Body LG We unlock business value through the strategic use of technology. 18px / Regular 400 / 1.7 leading
Body Standard paragraph text for documents and digital interfaces at 16px with comfortable reading spacing. 16px / Regular 400 / 1.65 leading
Small Supporting text, captions, and metadata at small scale. 14px / Regular 400
Caption Figure captions, labels, metadata 12px / Medium 500
Overline SECTION LABEL 10px / Bold 700 / +0.12em / Uppercase

Fallback & System Fonts

When Inter is unavailable (e.g., printed documents without embed), use the system font stack.

font-family: 'Inter', -apple-system, BlinkMacSystemFont,
             'Segoe UI', Helvetica, Arial, sans-serif;
Visual Language

Iconography

Icons reinforce communication and aid navigation. TMC uses a consistent line-style icon system with defined weight and sizing.

Icon Style

All icons use a 1.5px stroke weight on a 24×24px grid. Prefer the Lucide or Heroicons (Outline) library as the approved icon set.

Technology
Cyber Security
Strategy
Data
Compliance
Consulting

Icon Sizing

Icons must always be rendered at even-number pixel dimensions within the defined size scale.

SizePixelsUsage Context
XS12×12Inline text indicators, tight UI elements
SM16×16Navigation, inline labels, list items
MD20×20Buttons, form fields, most UI contexts
LG24×24Primary icon size — headers, cards
XL32×32Feature icons, section introductions
2XL48×48Hero and spotlight applications
Visual Language

Photography & Imagery

TMC imagery communicates competence, collaboration, and real-world impact. Every image should feel purposeful, authentic, and professionally considered.

Photography Style

Choose images that feel genuine and aspirational — not stock clichés. Prefer realistic environments over staged setups.

Workplace
Environments

Modern, light-filled offices. Collaborative settings showing real work in progress.

Technology
& Data

Abstract tech, server rooms, data visualisations. Avoid generic circuit board clichés.

People &
Collaboration

Diverse, professional individuals working together. Natural expressions, not forced poses.

Image Guidelines

Do
  • Use high-resolution, sharp images (min. 2× for digital)
  • Represent diverse industries: healthcare, finance, manufacturing, logistics
  • Feature real people in authentic, relatable scenarios
  • Apply a subtle cool color treatment that aligns with TMC Blue
  • Ensure main subjects are clearly lit and in focus
Don't
  • Use heavily filtered, oversaturated, or warm-toned images
  • Use obviously staged or cheesy stock photography
  • Crop or distort images in ways that lose clarity or context
  • Use low-resolution images that appear blurry at screen size
  • Use clip-art, illustrations, or cartoon-style graphics

Industry Sectors

TMC imagery should represent the full breadth of industries we serve.

Healthcare Finance Manufacturing Logistics Government Education Retail Energy
Visual Language

Voice & Tone

The TMC voice is consistent across all channels. Our tone adapts contextually — always professional, occasionally warm, never jargon-heavy.

Voice Pillars

📈
Authoritative
We speak from 20 years of deep expertise. Our language reflects confidence and command of subject matter.
🤝
Trusted Partner
We speak alongside our clients — collaborative, never condescending. We use "we" and "together" freely.
🎯
Outcome-Focused
Every sentence serves a purpose. We lead with business outcomes, not technology features.
📚
Accessible
We translate complexity into clarity. No unnecessary jargon; technical terms are always explained in context.

Writing Examples

✓ Preferred
"We partner with your team to turn technology complexity into competitive advantage — delivering measurable outcomes from strategy through execution."
✕ Avoid
"Our synergistic, end-to-end digital transformation solutions leverage cutting-edge AI and ML paradigms to optimise your enterprise IT stack and unlock stakeholder value."
✓ Preferred
"Our cyber security practice helps you identify risks before they become incidents — so your business stays protected and your people stay productive."
✕ Avoid
"Utilise our world-class cybersecurity experts to deploy best-of-breed solutions across your attack surface and bolster your SOC capabilities."

Channel-Specific Tone

ChannelToneExample Register
WebsiteProfessional, confident, outcome-focusedClear CTAs, benefit-led headlines
LinkedInThought-leading, insightful, peer-levelIndustry commentary, client outcomes
ProposalsFormal, precise, evidence-basedData-backed, structured arguments
EmailDirect, respectful, clearShort paragraphs, named recipients
EventsEngaging, approachable, energeticConversational, story-driven
Design System

UI Components

A consistent component library ensures all TMC digital experiences feel coherent, accessible, and aligned with the brand.

Buttons

Buttons drive action. Use the hierarchy strictly — one Primary CTA per view, Secondary for supporting actions, Ghost for low-emphasis contexts.

Badges & Tags

Use badges to label status, categories, and taxonomies. Select the color variant that matches the semantic meaning — not purely aesthetic preference.

Strategy Cyber Security Data Management Active In Progress Critical Gradient

Cards

Cards group related content into a contained, scannable unit. Keep padding consistent and limit card content to a single concept or task.

Cyber Security
Identify and mitigate risks before they become incidents. Enterprise security strategy and implementation.
Strategy & Transformation
Technology strategy that aligns to your business objectives and delivers lasting transformation.
Data Management
Turn raw data into a strategic asset through governance, architecture, and analytics capability.

Form Elements

Form fields are styled for clarity and accessibility. Labels are always visible above the input — never inside as the sole placeholder.

Design System

UI Patterns

Complete assembled patterns — hero sections, navigation bars, hamburger menus, feature sections, and footers. Use these as starting points for any TMC digital product.

Hero — Dark (Primary)

The primary TMC hero treatment. Charcoal background with gradient accent. Use for main landing pages and campaign headers.

Technology Management Consulting

Technology Partners
You Can Trust

20 years of deep technology management experience. We unlock business value through strategic use of technology.

Pattern: Hero Dark

Hero — Light

Light hero for secondary pages, service landing pages, and internal documents.

Cyber Security

Protect Your Business
Before Threats Strike

Our cyber security practice helps you identify and mitigate risk — so your business stays protected and your people stay productive.

Pattern: Hero Light

Navigation Bar

Dark navigation is the primary TMC nav treatment. Use the light variant for interior pages with light heroes.

Pattern: Nav — Blue (Primary)
Pattern: Nav — Charcoal
Pattern: Nav — Light

Hamburger Menu

Mobile navigation states. The hamburger icon animates to a close (×) on open. The menu slides in from the left on a dark overlay.

TMC Group
Closed state
TMC Group
Open state

Feature Section

Three-column feature grid with icon, heading, and body text. Use for services overviews and capability listings.

Our Services

What We Do

From strategy through execution — six core practice areas that cover the full technology lifecycle.

Cyber Security
Identify and mitigate risk before it becomes an incident.
Strategy
Technology strategy aligned to your business objectives.
Data Management
Turn raw data into a strategic asset for your organisation.
Pattern: Feature Section — Light

CTA Banner

Full-width call-to-action banners. Use the gradient variant for maximum impact at section breaks.

Ready to transform your technology strategy?

Talk to our team today — no obligation, just clarity on what's possible for your organisation.

Book a Consultation
Pattern: CTA Banner — Gradient

Let's talk about your project

Our team of specialists is ready to help you unlock the value in your technology investments.

Get in Touch
Pattern: CTA Banner — Charcoal

Page Footer

Standard TMC page footer. Always charcoal background. Logo and navigation links on top, legal line below.

TMC Group

Australia's trusted technology management partner. 20 years of delivering measurable outcomes.

© 2025 TMC Group Pty Ltd. All rights reserved.
Pattern: Page Footer
Design System

Digital Guidelines

Consistent spacing, layout, and responsive behaviour ensures TMC digital products feel polished across all devices and screen sizes.

Spacing System

All spacing uses a 4px base unit. Use only values from this scale — do not use arbitrary pixel values.

space-1
4px — Micro gap, icon spacing
space-2
8px — Tight spacing within components
space-3
12px — Component internal padding (small)
space-4
16px — Standard padding, list gaps
space-6
24px — Card padding, group spacing
space-8
32px — Section elements, large gaps
space-12
48px — Subsection separation
space-16
64px — Section padding
space-20
80px — Hero and large section padding
space-24
96px — Page-level vertical rhythm

Grid System

A 12-column grid at a maximum content width of 1280px. Column gutter is 24px. Always maintain 32–64px horizontal page margin.

12 Columns — 24px gutter — 1280px max width

Responsive Breakpoints

Design mobile-first. Each breakpoint unlocks additional layout complexity.

NameMin WidthLayout ColumnsUsage
Mobile320px1–2 colAll phones, small screens
Tablet SM640px2 colLandscape phones, small tablets
Tablet768px2–3 colTablets, iPad portrait
Laptop1024px3–4 colLaptops, iPad landscape
Desktop1280px12 colStandard desktop monitors
Wide1536px12 colLarge monitors — max width constrained

Border Radius

TMC uses a moderately rounded corner language — modern but not childlike. Never use sharp 0px corners on interactive elements.

4px
SM
8px
MD
12px
LG
16px
XL
24px
2XL
9999px
Full
Design System

Brand Applications

Approved templates and specifications for common brand touchpoints. Always use supplied master files — do not deviate from approved layouts.

Business Card

Standard dimensions: 90 × 55mm (landscape). 3mm bleed on all sides. Minimum 300 DPI for print production.

Alex Johnson
Senior Technology Consultant
+61 3 9000 0000
tmcgroup.com.au
Level 30, 35 Collins Street, Melbourne VIC 3000

Email Signature

A standardised HTML email signature must be used by all staff. Font: Arial (system) for email client compatibility. Logo links to tmcgroup.com.au.

Alex Johnson
Senior Technology Consultant
T +61 3 9000 0000
E [email protected]
W tmcgroup.com.au
TMC Group Pty Ltd — Level 30, Collins Place, 35 Collins Street, Melbourne VIC 3000
This email and any attachments may be confidential and subject to legal privilege.

Presentation Templates

All client presentations use the approved PowerPoint/Keynote templates. Key specifications below.

ElementSpecification
Slide size16:9 widescreen — 33.87 × 19.05cm
Title fontInter ExtraBold 800, 36–44pt, −0.03em tracking
Body fontInter Regular 400, 18–24pt, 1.5 line spacing
Cover backgroundTMC Charcoal #242627 with gradient overlay
Content backgroundWhite #FFFFFF or Off-White #FAFAFA
Accent colorTMC Blue #0080CC for headings, dividers, callouts
Logo placementBottom-right corner, minimum 20mm width, full color on light

Social Media

Approved dimensions and specifications for primary social channels.

LinkedIn
Profile: 400×400px
Banner: 1584×396px
Post: 1200×627px
Twitter / X
Profile: 400×400px
Header: 1500×500px
Post: 1200×675px
General Web
OG Image: 1200×630px
Favicon: 32×32 / 16×16px
Apple Touch: 180×180px
Reference

Do's & Don'ts

These rules protect brand integrity. Any deviation from the approved brand usage requires sign-off from the Marketing & Communications team.

Logo Usage

Do — Correct Usage
  • Use only approved master artwork files
  • Maintain full clear space on all sides
  • Use on approved background colors only
  • Maintain correct aspect ratio at all times
  • Use white version on dark and colored backgrounds
  • Use gradient version on white and light backgrounds
Don't — Incorrect Usage
  • Stretch, skew, or distort the logo in any dimension
  • Rotate the logo mark from its upright orientation
  • Apply drop shadows, glows, or bevel effects
  • Place the logo on busy, clashing, or low-contrast backgrounds
  • Recreate the logo in any typeface or drawing tool
  • Change any colors from the approved palette

Color Usage

Do
  • Use only colors from the approved brand palette
  • Maintain WCAG AA contrast ratios in all digital designs
  • Use the gradient sparingly as a highlight element
  • Use white space liberally to let the color breathe
Don't
  • Introduce unapproved colors without design team sign-off
  • Use the gradient as a background fill for large areas
  • Pair TMC Blue text on the gradient — insufficient contrast
  • Use red, orange, or bright green as brand accents

Typography

Do
  • Use Inter across all digital and print communications
  • Follow the approved type hierarchy strictly
  • Use negative letter-spacing on large headings (−0.02–−0.04em)
  • Maintain minimum 1.5× line height for body text
Don't
  • Use unauthorised typefaces without approval
  • Set body text in ALL CAPS for readability reasons
  • Use more than two font weights in a single design zone
  • Set text below 12px in any digital interface

Approval & Governance

Brand consistency is a shared responsibility. All externally published materials must pass through the following review gate before publication.

01
Internal Review
Design team validates brand alignment against these guidelines.
02
Marketing Sign-off
Marketing & Communications lead approves all external content.
03
Legal Review
Legal counsel reviews claims, disclaimers, and compliance requirements.