Brand Guide · v1.1 · 21 September 2026
The Datatechs
Identity System
A complete reference for applying the Datatechs brand consistently across website design, documentation, and presentation materials.
01 - Brand Foundation
What Datatechs stands for
Every design decision flows from a clear brand position. Visuals should reinforce these values - never contradict them.
Core position
A hybrid consultancy: senior Microsoft 365 security and compliance expertise, delivered directly to UK organisations and alongside MSPs as specialist capacity.
In one sentence
We help organisations secure, audit and run Microsoft 365 properly, and we help MSPs deliver that work for their own clients without building the expertise in-house.
Brand personality
Professional but human. We speak plainly, earn trust through competence, and treat every client and partner relationship as a long-term investment. We never talk over people or dress capability up as a sales pitch.
What we bring
Microsoft 365 security audits against CIS and Cyber Essentials, remediation, managed compliance, helpdesk support, Power Platform and Azure. Delivered by a senior consultant who owns the outcome, as an extension of your team rather than an outside vendor.
Who we work with
Direct clients: UK organisations, typically 20 to 200 staff, that rely on Microsoft 365 and need it secure, compliant and supported.
MSP partners: managed service providers who need senior Microsoft 365 depth on demand, on monthly hours or per project, without us competing for their clients.
Regulated and compliance-sensitive environments are our speciality for both.
Brand values
Client and partner first - their success is our success.
Commercially aware - we understand delivery economics.
Straightforward - no jargon, no over-promising.
Capable - quiet confidence, not loud claims.
02 - Colour System
Palette & usage
Built around Datatechs Plum - a confident, distinctive colour that sets the brand apart from generic IT blue. Use it with discipline.
Primary
Datatechs Plum
#A4063E
Logo, CTAs, accent bars, badges, active states, slide accents, hyperlinks.
Text
Near Black
#161718
All headings, body text on light backgrounds, nav bars, footers.
Surface
White
#FFFFFF
Primary light surface. Cards, content panels, document and slide backgrounds.
Plum Light
#D2839F
Eyebrow text on dark backgrounds. Soft accent only.
Meta Grey
#6B6B70
Captions, metadata, dates, placeholder and secondary text. Replaces #8B8C8C, which fails contrast as text (3.4:1 on white). Keep #8B8C8C for borders and decorative graphics only.
BG
Light Mist
#F4F4F5
Page backgrounds, table alt rows, section separators.
Plum scale
050
100
200
400
600
700 hover
800
900
Accent sequence
Four accents, always used in this order, for numbered groups such as steps, stages and pillars. Plum stays the brand colour; the other three only ever appear on numerals and step markers. Each has a light-background value and an on-dark value.
01 · Plum
#A4063E on light and dark.
Faded: rgba(164,6,62,0.34)
02 · Teal
#0F766E on light · #0D9488 on dark · #14B8A6 on a teal tint.
Faded: rgba(13,148,136,0.34)
03 · Indigo
#4F46E5 on light · #6366F1 on dark.
Faded: rgba(99,102,241,0.34)
04 · Amber
#F59E0B on light and dark.
Faded: rgba(245,158,11,0.34)
Large display numerals (about 34px and up) use the faded values above. Small inline numerals and step markers use the solid values, because low opacity is not legible at small sizes.
Semantic colours
Brand / Active
Plum. All interactive states, links, badges, icons.
Success
#16A34A for dots and bars, #15803D for text and tags (DONE). Completion, positive status, approved.
Warning
#D97706 for dots and bars, #B45309 for text and tags (WIP). Caution, pending, in progress. Keep separate from accent amber #F59E0B so a step number never reads as a warning.
Error
#C62D12. Form validation, required markers, errors and destructive actions. Passes 4.5:1 on white.
Colour rules
Plum is the differentiator. Never substitute it with generic blue. The plum establishes brand recognition - protect it.
Plum on white or near-black only. Do not place plum text on coloured backgrounds. Contrast and legibility always take priority.
Minimum contrast: 4.5:1 for body text, 3:1 for large headings and graphic elements. Verify every new application.
Where each colour goes
| Element | On light | On dark |
|---|
| Eyebrow | #A4063E Plum | #D2839F Plum Light |
| Heading | #161718 Near Black | #FFFFFF White |
| Body text | #6B6B70 or Slate | White at 65 to 85% opacity |
| Captions, dates, metadata | #6B6B70 Meta Grey | White at 55% opacity or more |
| Accent sequence | Numerals and step markers only. Never on eyebrows, headings or body text. |
03 - Typography
Aptos type system
Aptos is used for all text - headings and body. It is a modern Microsoft typeface, clean, geometric, and highly legible at all sizes. Available natively in all Microsoft 365 applications.
Aptos - all headings and body textPrimary & only typeface
Aa Bb Cc Dd Ee Ff Gg
Senior Microsoft 365 expertise, for your organisation or for your clients. Clear scope, fixed fees, and a consultant who owns the outcome.
Light
300 - Intro / pull quotesSemibold
600 - Subheadings / labels
Web fallback stack: font-family: 'Aptos', 'Segoe UI', 'Trebuchet MS', system-ui, sans-serif
Type scale
Hero H1
700 / 36 to 64px
-2.5% / 1.06
Hero Title
Section H2
700 / 26 to 42px
-2% / 1.1
Section Heading
H3
700 / 18px
-1% / 1.25
Subsection Heading
Card title
700 / 16px
0% / 1.3
Card or List Item Title
Lead
400 / 17px
0% / 1.7
Introductory paragraph under a section heading. Hero subtext scales from 15 to 18px.
Body
400 / 15px
0% / 1.65
Standard body copy for website content, documentation and proposals. Card body text drops to 14px.
Small
400 / 13.5px
0% / 1.5
Supporting lines, trust items, secondary UI text.
Caption
400 / 12.5px
0% / 1.5
Dates, metadata, form hints, table captions. Meta Grey #6B6B70.
Label / Eyebrow
600 / 11px
+12% / 1
Section Label · Eyebrow · Badge
Headings use fluid sizes: the smaller figure applies on phones, the larger on wide screens.
04 - Logo & Mark
Logo system
The Datatechs logo pairs a hexagonal node mark with the wordmark "Datatechs" and a "— Consulting —" sub-brand treatment in grey. The icon communicates connectivity, data flow, and forward momentum simultaneously.
Logotype anatomy
IconHexagon + node network + solid play chevron
WordmarkAptos Bold (700), Near Black #161718
Sub-brand"— Consulting —" in Aptos Regular (400), Slate #5A5B5C, flanked by ruled lines
Min. size120px digital / 30mm print
On white - primary usage for documents and web content
On dark - the inverted version places the wordmark in white. Use the "INVERT" file for direct placement on dark backgrounds.
On mist - background section headers and panel headers
Icon only - minimum sizes. A transparent background version is recommended for dark contexts.
Logo don'ts
Don't stretchNever distort the logo's proportions. Always scale uniformly.
Don't use on off-brand backgroundsOnly place the logo on white, mist, or the approved dark background.
Don't alter colours or opacityNever recolour, desaturate, or reduce opacity of the logo.
Clear zone
Maintain clear space equal to the cap-height of the "D" on all four sides. No other elements enter this zone.
05 - Voice & Tone
How Datatechs communicates
Voice is consistent across all materials. Tone adapts to context - a proposal is more formal than a LinkedIn post - but the underlying character never changes.
Professional
Competent and credible - never stiff or cold.
Approachable
Plain language, human tone, no unnecessary jargon.
Audience-aware
Direct clients hear about their risk and outcomes. MSP partners hear about capacity and their client relationship.
Commercially aware
Speak in outcomes and delivery economics, not features.
Write like thisDO
Direct: "We assess your live tenant and turn every finding into a clear action plan you own."
Direct: "Fixed scope, fixed fee. You know exactly what you are getting before we start."
MSP partner: "We work alongside your team on Microsoft 365 projects, so you can take on more without hiring more."
MSP partner: "We handle the specialist depth. You keep the client relationship."
Avoid thisDON'T
"Datatechs is a leading Microsoft 365 consultancy delivering cutting-edge cloud transformation solutions."
"Leverage our best-in-class capabilities to synergise your go-to-market strategy."
"We are the premier partner for all your Microsoft needs across the full stack."
"Our proprietary methodology guarantees outcomes that exceed client expectations."
06 - UI Components
Reusable elements
Consistent building blocks for website, proposals, and internal tools. Use these established patterns - don't invent new ones.
Buttons
Primary: Plum, 8px corners, 15px semibold, darkens to #87052F on hover. Outline: 1.5px Plum border. On dark backgrounds the secondary button is a white 22% outline. Small (header "Book a call"): 13px, 6px corners.
Badges & Labels
Microsoft PartnerCIS BenchmarksCyber EssentialsMicrosoft 365 SecurityPower PlatformManaged Compliance
Service Card
Service
Managed Compliance
Continuous monitoring against CIS Controls, so configuration drift is caught and fixed before the next audit finds it.
Monthly feeExplore
Security Audit
CIS Microsoft 365 Benchmark
An assessment of your live tenant against the CIS benchmark, with every finding ranked and a written report you own.
Fixed scope, fixed feeExplore
Metric Cards
Audit frameworks
3
CIS M365 · CIS Intune · Cyber Essentials
Services
5
from audit to ongoing support
Focus
M365
security and compliance
Callouts
Note: Every engagement is scoped and priced before work begins. Fixed scope, fixed fee.
07 - Spacing & Layout
Spatial rhythm
All spacing is based on an 8px grid. Never use arbitrary values - always use a step from the scale below.
Grid12-column. Max width 1200px. 40px side padding on desktop, 22px on tablet and phone.
Border radius8px buttons · 6px small buttons · 10 to 12px cards.
BreakpointsPhone up to 560px · Tablet up to 820px · Desktop above. Test at 320, 375, 768 and 1440px.
08 - Quick Reference
At a glance
| Element | Specification | Usage / Notes |
|---|
| Primary colour | #A4063E - Datatechs Plum | Logo, CTAs, badges, active states, all accent elements |
| Text colour | #161718 - Near Black | All headings and body copy on light backgrounds |
| Backgrounds | #FFFFFF / #F4F4F5 | White for cards and content · Mist for page backgrounds |
| Plum light | #D2839F | Eyebrow text on dark backgrounds only |
| Meta grey | #6B6B70 | Captions, metadata, dates, secondary labels. #8B8C8C is for borders and graphics only, never text |
| Accent sequence | #A4063E · #0F766E · #4F46E5 · #F59E0B | Numbered groups only, in this order. On dark: #A4063E · #0D9488 · #6366F1 · #F59E0B. Large numerals faded to 34% |
| Status colours | #16A34A / #D97706 / #C62D12 | Success / in progress / error. Text and tags use #15803D and #B45309 |
| Typeface | Aptos (all text) | Headings 700 · Body 400 · Labels 600 uppercase +12% tracking |
| Logo wordmark | Aptos Bold alongside icon + "— Consulting —" sub-brand | Never separate icon and wordmark below 300px width |
| Logo min. size | 120px digital · 30mm print | Icon only: 20px digital minimum |
| Clear zone | Cap-height of "D" on all sides | No other elements within this zone |
| Spacing grid | 8px base unit | 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80px |
| Border radius | 8px / 6px / 10 to 12px | Buttons / Small buttons / Cards |
| Layout | Max width 1200px | Borders #E8E8E9 · Plum hover #87052F |
| Type sizes | Body 15px · H3 18px · H2 26 to 42px | Hero H1 36 to 64px · Caption 12.5px · Eyebrow 11px |
| Legal name | Datatechs Consulting Limited | Short form in all informal contexts: Datatechs |
| Website | datatechs.co.uk | Include in all footers and proposal headers |
52px