The single source of truth for what we do and how we look and sound. Colours, typography, logo, voice and rules. For every designer, developer, agency or partner producing anything under the Initial IT name.
System
Ocean & Tangerine
Style
Plain, warm, honest
Version
1.2
Owner
Andy Price
Updated
September 2026
01 · Overview
What We Do
Ten services under one promise: keeping your people productive, secure and supported. Every piece of marketing should map to at least one of the services below.
01
Managed IT Support
Day-to-day help that keeps your team working. UK helpdesk, senior engineers, fixed monthly cost per person.
02
Cyber Security
Protection for your people, devices, email and Microsoft 365. Cyber Essentials evidence, MFA, backups, monitoring.
03
Microsoft 365 & Teams
Licences optimised, tenant configured properly, staff onboarded from day one. No half-finished setups.
04
Microsoft 365 Consultancy
UK-wide project work for firms that already have Microsoft 365 but need it fixed, tuned or rolled out at scale.
05
Copilot & AI
Turning Microsoft Copilot on properly. Governance, training, policy, and honest advice on where AI helps and where it wastes time.
06
Azure & Cloud
Cloud desktops, migrations, Windows 365 and Azure Virtual Desktop. Right-sized for growing businesses, not enterprise-grade overkill.
07
Teams Phone
Business phone system built on Microsoft Teams. One handset, one login, one predictable monthly cost.
08
Business Automation & CRM
Process automation for small businesses. GHL, Make.com, HubSpot workflows and CRM tidying that actually gets used.
09
IT Consultancy & Projects
Strategic IT advice, technology audits, roadmaps, migration planning and project delivery.
10
Professional Services
Industry-specific IT for law firms, accountants, financial services, healthcare and construction.
02 · Colour
Palette
Ocean carries the weight. Tangerine is the single accent for calls to action, highlights and second-line emphasis. Everything else is a supporting neutral. Never use tangerine as a background for large body text.
Core Palette
Ocean
Ocean
Primary dark. Headings, body text on light, dark grounds.
Tangerine and Teal are fill colours. Used as type on a light
ground they measure 2.5:1 and 3.4:1, so both fail WCAG AA. These four are the derived
equivalents that pass, and they are what the site uses wherever those colours carry
words rather than fill a shape.
Tangerine Ink
Tangerine Ink
Tangerine as TEXT on any light ground. Plain tangerine measures 2.5:1 and fails AA.
HEX#AF4905RGB175, 73, 5
Teal Ink
Teal Ink
Teal as TEXT on any light ground. Clears 4.5:1 on every surface in this palette.
HEX#007572RGB0, 117, 114
Teal Ink Dark
Teal Ink Dark
Teal as TEXT on Ocean. The lighter step needed to clear AA on a dark ground.
HEX#009C98RGB0, 156, 152
Teal Fill
Teal Fill
A teal fill that white or cream text can sit on. Plain teal is 3.4:1 under white.
HEX#007D79RGB0, 125, 121
Neutrals
Off-white
Off-white
Page backgrounds.
HEX#fafcfcRGB250, 252, 252
Tint
Tint
Alternating band fills, subtle blocks.
HEX#F1F5F9RGB241, 245, 249
Muted
Muted
Secondary body text, captions.
HEX#5a6b75RGB90, 107, 117
Border
Border
Hairlines and dividers.
HEX#e6eef0RGB230, 238, 240
UI State Colours (functional only)
Success
Green
Success ticks, confirmations.
HEX#22C55E
Warning
Amber
Warnings, caution states. Deliberately deeper than tangerine — keep distinct.
HEX#D97706
Error
Red
Error states, destructive actions.
HEX#DC2626
Print note. The CMYK values above are nearest conversions. For brochures, business cards and any printed piece where colour accuracy matters, hand these values to the printer directly and always request a physical proof before signing off a run.
Colour Usage — the 60 / 30 / 10 rule
60%
Ocean & neutrals
30%
Teal & supporting
10%
Tangerine
Approved pairings
White on Ocean
Ocean on Tangerine
Ocean on Off-white
White on Teal
Never set white text on tangerine — legibility is poor. Always use Ocean text on a tangerine fill, including CTA buttons.
03 · Typography
Fonts
Two free Google Fonts. Install the variable versions on every machine that produces assets. Reference them by their plain family names so files transfer cleanly between Mac and Windows.
Headings
Bricolage Grotesque
For titles, headlines, big numbers, hero text and eyebrows. Bold and expressive. Never for body copy or captions at small sizes.
Free · Google Fonts · SIL OFL
Body
Figtree
For paragraphs, labels, captions, UI text and buttons. Clean and highly legible at every size. Weight 300–900 available; sit around 400 for body, 600 for UI labels.
The Initial IT wordmark sits on Ocean, off-white or white grounds only. Never place the logo on tangerine, teal or a photographic background without a solid scrim underneath.
Approved backgrounds
On Ocean Reversed logo for dark grounds. Slide covers, footers, dark hero sections, sponsor walls.
On White Primary logo. Website, documents, email signatures, invoices, brochures on plain white.
On Cream Warm ground for callout panels, printed collateral and gift-with-purchase items.
Logo Downloads
Every approved logo file is below. Right-click and “Save link as…” to download. Hosted from the initialit.co.uk media library, so the URLs are stable and can be linked directly from other documents.
Need something else? Icon badge vector zips are listed in the Icon Marks section below. For any other vector, custom size, or print-ready file, email hello@initialit.co.uk with the intended use.
Clear space & minimum size
Clear space
Keep clear space around the logo equal to the height of the lowercase “i”. Never let other logos, text or edges encroach inside that space.
Minimum size
Never reproduce the logo smaller than 120px wide on screen, or 25mm wide in print. Below this the wordmark loses legibility.
Logo don’ts
Don’t place the logo on tangerine, teal or any coloured ground
Don’t stretch, squash or distort the proportions
Don’t recolour the wordmark
Don’t add shadows, glows, outlines or other effects
Don’t rotate or set the logo at an angle
Don’t place the logo over a busy photo without a solid Ocean scrim behind it
Don’t rebuild the wordmark in a different font
04b · Icon Marks
Icon Badges
Circular icon marks in the three brand colours. Use for app icons, favicons, social profile avatars, badge stamps and any place the full wordmark won’t fit. Never place two icon badges of different colours next to each other.
Twenty-three simple line icons for the website, proposals, packages and the team hub. Each one pairs an Ocean shape with a single Teal detail, drawn on the same 24px grid so the set looks calm and consistent wherever it appears.
Managed IT support Helpdesk, support plans, UK Helpdesk
Microsoft 365 Microsoft 365 licensing, migration, Teams, SharePoint
Copilot and AI Copilot rollout, AI readiness, training
Cloud and Azure Azure, cloud migration, hosted servers
Teams Phone Business telephony, calling plans, numbers
Business automation Power Automate, workflows, integrations
IT consultancy Roadmaps, planning, strategy reviews
Professional services Projects, installs, office moves
Backup and recovery Backup, disaster recovery, business continuity
Devices and hardware Laptops, desktops, device management
Connectivity Broadband, Wi-Fi, networking
Law firms Legal sector pages and case studies
Accountancy practices Accountancy sector pages and case studies
People and teams Your team, staff onboarding, meet the team
Location Lichfield office, West Midlands coverage
Opening hours Monday to Friday, 9am to 5:30pm; response times
Book a review Book a 30-minute IT review; appointments
Reviews 70 five-star Google reviews, testimonials
Certified Cyber Essentials, Microsoft Solutions Partner
Package Icons
Foundations One layer of protection. The essentials, managed properly.
Elevate An extra layer: 24/7 threat monitoring and staff training.
Fortify Every layer, plus planning for the day something goes wrong.
Package icons show the layers of protection in each package. The top layer is always Ocean and each extra layer is Teal. Use them only for Foundations, Elevate and Fortify, always with the package name beside them.
Tick & Cross (comparison tables)
Tick — Included Teal-deep #009490. Marks a feature as included in a package. Stroke width 3, rounded caps.
Cross — Not included Muted red #c94f4f at 55% opacity. Softer than a warning red so it does not shout. Same stroke as the tick for visual consistency.
Add-on
“Add-on” pill Ocean text on soft-grey background #f4f7f8. Used where a feature is available at extra cost. Rounded pill styling.
Rule: in any comparison table, use the Teal tick for included features, the muted red cross for not-included, and the “Add-on” pill for extras that carry a separate charge. Never mix these markers with emojis or plain text like “Yes/No”.
Construction
Grid
24 x 24px, 2px clear on every side
Stroke
2px, round ends, round corners. Line only, never filled
Colour
Ocean #012935 shape, one Teal #20B8BC detail
Reversed
White shape, Teal detail, on Ocean grounds only
Badge
Reversed icon centred in a 48px Ocean circle
Sizes
24px interfaces, 32px lists, 48px service tiles. Never below 16px
Don’t recolour icons, add fills or effects, use Tangerine in an icon, place icons on Tangerine, Teal or photo grounds, or mix them with icons from other sets. Always pair an icon with a text label.
Icon Downloads
Full set · SVG + PNG
initial-it-icons-v1-2.zip (23 icons including the package icons, 5 colourways: colour, reversed, badge, mono Ocean, mono white. PNG at 256 and 512px, 2.3MB)
04c · Brand Elements
Pixel Shapes
Decorative pixel-block motif used as background accents on the website, in signature banners, and on brochures. Adds texture without competing with the wordmark. Use sparingly and always at low opacity (10-25%) when overlaying other content.
Ocean pixels Default decorative motif on off-white and cream grounds. PNG · Vectors (.ai + .eps)
Tangerine pixels Highlight motif on Ocean grounds. Currently used on the homepage hero. PNG · Vectors (.ai + .eps)
Teal pixels Secondary motif for sub-brand contexts and Skool covers. PNG · Vectors (.ai + .eps)
04d · Component Specs
Recurring Components
Interface elements used across the website, landing pages, brochures and slides. Match these specs exactly when rebuilding any of them in a new context, so the visual identity stays consistent across surfaces.
Eyebrow pill
Small pill above the H1 that names the audience or category. Sits at the very top of every hero.
Height 32-34px, fully rounded (border-radius equal to half the height)
Background: Tangerine · Text: Ocean · No border
All caps, Bricolage Grotesque 700, ~13px, letter-spacing 0.18em
Padding 6px 14px, small dot indicator on the left
Never use on tangerine or teal grounds. Never longer than 6 words.
Managed IT for small businesses
Accent bar
8px full-width gradient bar. Sits at the bottom of the hero section on every page. Signals brand consistency across surfaces without adding visual noise.
Height exactly 8px, full viewport width
Linear gradient Tangerine (left) to Teal (right)
One per page, only at the bottom of the hero
Never stack multiple bars. Never break with padding.
hero content ends here
Primary CTA button
The single canonical call-to-action button. Use verbatim across every hero, every service page, every email footer.
Tangerine background, Ocean text, right arrow (→) after label
Label: Book a 30-minute IT review (verbatim, sentence case)
On space-constrained buttons: Talk to Andy
Never “strategy call”, “discovery call”, “free consultation” or “get in touch”
Initial IT photography leads with Andy in real settings: at the desk, in a coffee shop, on-site with clients. No stock photography. No generic “smiling suit” images. Every hero image on the site is a real photo of Andy or the team.
Style rules
Always
Real people, real settings, ambient light where possible
Andy or a named team member in every hero shot
Muted background so the person carries the frame
Neutral facial expression, or half-smile, not toothy grin
Landscape orientation for hero, square for card thumbnails
Composite art, generic laptops-on-desks, cityscapes without a person
Filters or heavy grading that shifts skin tones or brand colours
Naming convention
Hero images on the website follow the pattern andy-price-initial-it-<page-slug>-hero.jpg. For example: andy-price-initial-it-cyber-security-hero.jpg, andy-price-initial-it-microsoft-365-hero.jpg. New service pages should follow this pattern so the media library stays scannable.
Refresh cadence. New photoshoot every 12 months. Between shoots, use existing images from the DW2A series (in Andy’s Marketing Brand Kit folder). Never let a photo more than 18 months old sit as the primary hero.
04e · Marketing Templates
Custom Assets Library
Ready-to-use assets built for specific campaigns and communities. Signature banners for email footers, Skool community covers, and course thumbnails. All follow the brand rules above.
Email signature banners
AI webinar — email signature promoting the AI webinar. Download PNG
Teams Copilot — email signature promoting the Teams Copilot session. Download PNG
Overwatch is our internal billing reconciliation tool. Its mark is two ledger lines with the second ticked. Ocean shape, one Teal detail, tagline “Powered by Initial IT”. Same background rules as the main logo.
Horizontal Page headers, reports and emails on white or off-white.
Reversed For Ocean grounds only.
App icon Icon on its own. Use the favicon files in the pack below 48px.
Direct, warm, plain-English and quietly confident. Written like Andy would say it to a business owner in a coffee shop, not like a marketing agency pitching a Fortune 500 board.
Always
British English (organise, colour, centre, apologise)
Short sentences and plain words
Business outcomes before technical features
Specific numbers over vague claims
Warm, modest, slightly self-aware tone
Say when Initial IT is not the right fit
Sell value and outcomes, never features. Tell the reader what changes for their business, not what the technology does.
Never
Em dashes. Use commas, semicolons, parentheses or rewrite.
Clichés: “at the end of the day”, “moving forward”, “leverage” as a verb, “synergy”, “circle back”, “low-hanging fruit”, “in today’s world”
Sales pressure, fearmongering or false urgency
MSP jargon: “leading provider”, “cutting-edge”, “bespoke solutions”, “digital transformation partner”, “unlock your potential”, “robust and scalable”
Emojis in body copy (occasional in social OK)
Made-up statistics or unsupported claims
06 · Canonical Phrases
Say It This Way
Sitewide phrases that must be written verbatim. If any of these need updating (Google review count, tagline, year figures), update this document first, then sweep the site.
Tagline
Technology Made Simple, Business Made Easier
Homepage H1
Keeping your people productive, secure and supported.
Years trading
Trading since 2004
Google reviews
70 five-star Google reviews
Audience
small businesses up to 100 staff
Primary CTA
Book a 30-minute IT review →
Secondary CTA
Talk to Andy
Reassurance line
30 minutes, plain English, no pressure. If we are not the right fit, we will say so.
Certifications
Microsoft Solutions Partner · Cyber Essentials Certified · UK Helpdesk
Region
Lichfield, Staffordshire and across the West Midlands
Microsoft 365
Always write in full: Microsoft 365. Never abbreviate to “M365” in body copy or headings.
Technology
Always write in full: technology. Never shorten to “tech” in body copy, headings or CTAs. Exceptions: technical terms like “high-tech”, “biotech” or established brand names.
Customer relationships
hundreds of UK customer relationships (no specific number, drifts too fast)
Phone number format
01543 524 594 (space between area code and last three)
Opening hours
Monday to Friday, 9am to 5:30pm
Phone-first messaging
You can just pick up the phone. No ticket queues. No chatbots.
Preferred vocabulary
“natter” over “call” (informal); “book” over “schedule”; “sort” over “resolve”
Banned in buttons and headings. “Strategy call”, “discovery call”, and “free” as a button leader (e.g. “Free consultation”). The word “free” is fine in body copy where it describes a specific thing (e.g. “free 30-minute session”), never on a button.
Don’t cite specific customer numbers. Use “hundreds of UK customer relationships” as the canonical phrasing. Specific counts (“320 clients”, “over 400 businesses”) drift out of date within months and undermine credibility.
07 · Blog Post Guidelines
Writing for the Blog
Rules that apply to every article on /blog/. These exist so posts read well to humans, get found by search engines, and get quoted accurately by AI answer engines (ChatGPT, Copilot, Perplexity, Gemini).
Voice & framing
Write in Andy’s voice, as covered in How We Sound. Plain English, short sentences, British spelling, no MSP jargon. Explain the problem in the same words a business owner would use before jumping to the technical answer. Lead with what it means for the reader, not what the technology does.
AI-readable bullet list
Every post must include at least one bulleted list summarising the key points. This is what AI assistants (ChatGPT, Copilot, Perplexity, Gemini) pull out when someone asks them a question. Aim for 3–7 short bullets, each a self-contained statement. Place the summary list high up (ideally under an <h2> called “Key takeaways”, “The short version” or similar).
Structure
Use one <h1> (the title) followed by <h2> and <h3> subheads. Break long text with bullets, numbered steps and short paragraphs (max 3–4 lines each). Every post ends with a soft CTA to Book a 30-minute IT review or the relevant resource, never a hard sell.
Rewrite for an industry
When a post is being adapted for a specific sector (law firms, accountants, healthcare, professional services, construction, financial services), we may rewrite the copy so it lands with that audience. Always ask Andy for permission before rewriting and confirm the target sector. Do not silently republish an existing post under a new industry angle.
Images
Review the featured image and any in-body images before publishing. If they feel dated, generic or off-brand, propose replacements from the brand asset library or a fresh AI-generated image that matches our tone. Ask Andy for approval before swapping images on published posts. Always fill alt text describing what is actually in the image.
Length & scannability
Aim for 600–1,200 words for most posts, 1,500–2,500 for pillar or “ultimate guide” pieces. Every screen of scroll should contain either a subhead, a bulleted list or a bolded key phrase. If a reader can’t grasp the point by scanning, rewrite.
Sources & claims
Cite specific statistics with a source and a date. Avoid unsupported claims like “most breaches” or “the majority of businesses”. If a stat is over 12 months old, either refresh it or drop it.
SEO basics
Yoast SEO title should include the primary keyword and “Initial IT” (or “UK” for regional intent). Meta description under 155 characters and written to persuade a click, not stuff keywords. Slug should be short and keyword-first (e.g. /copilot-for-law-firms/, not /how-copilot-is-revolutionising-legal-practice/).
Blog index card
Every new post must also be added as a card on the hand-built /blog/ index (page 18), because the index does not auto-populate. See wp-connect-guide.md section 5.5.
The AI test. If you paste your post into ChatGPT and ask “summarise the key takeaways”, it should give back the same three or four things you’d want a customer to remember. If it doesn’t, the structure needs work, usually more explicit subheads and a proper bulleted summary near the top.
Always ask before you rewrite or reshoot. Existing posts are indexed by Google and may be ranking. Rewriting body copy or swapping images without Andy’s explicit approval risks losing search rankings and confusing returning readers.
08 · For Developers
Design Tokens
CSS custom properties used throughout the iit-page framework on initialit.co.uk. Copy these into any new page, email template or landing page for automatic brand consistency.
/* Brand tokens */:root {
–ocean:#012935; /* primary dark */–tangerine:#F9761E; /* accent, CTAs */–teal:#20B8BC; /* secondary accent */–cream:#fff9f4; /* callout panels */–off-white:#fafcfc; /* page bg */–muted:#5a6b75; /* secondary text */–border:#e6eef0;
–tangerine-ink:#AF4905; /* tangerine AS TEXT on light */–teal-ink:#007572; /* teal AS TEXT on light */–teal-ink-dark:#009C98; /* teal AS TEXT on Ocean */–teal-fill:#007D79; /* teal fill under white text */–font-display:‘Bricolage Grotesque’, ui-sans-serif, sans-serif;
–font-sans:‘Figtree’, ui-sans-serif, sans-serif;
–font-mono:‘JetBrains Mono’, ui-monospace, monospace;
–radius: 12px;
–radius-lg: 16px;
}
The initialit.co.uk site uses a defensive-scoped CSS framework wrapped in <div class="iit-page">. Elementor Canvas template is required (theme fallback breaks the styling). Any new page cloned from an existing one keeps the framework automatically; new pages should start from a page 6 or page 22 clone.
09 · Governance
Ownership & Change
This document is the single source of truth. If something in the wild contradicts it, this page wins. To propose a change, contact Andy directly.
Version
1.2
Last Updated
October 2026
Owner
Andy Price · andy@initialit.co.uk
Review Cadence
Quarterly, or when a canonical phrase changes
Company
Initial IT Solutions Ltd
Registered Office
Lichfield, Staffordshire, UK
Change log. All meaningful edits should be recorded with a date and short reason. v1.0, 10 September 2026: initial publication, modelled on the iceConnect brand guidelines microsite. v1.1, 11 September 2026: primary CTA switched to Ocean text on Tangerine for legibility; Line Icons section and icon downloads added. Update, 11 September 2026: Foundations, Elevate and Fortify package icons added. v1.2, 12 October 2026: accessible text colours added (–tangerine-ink, –teal-ink, –teal-ink-dark, –teal-fill). Tangerine and Teal fail WCAG AA as type on light grounds, so the derived passing values are now published here.
