inTEC Group

Overview

inTEC Group is an enterprise IT support and managed services provider serving UK and Ireland organizations with cyber security, cloud infrastructure, and telecoms solutions. The brand embodies 'Professional Clarity'—a design philosophy that strips away technical jargon and presents complex IT concepts through a human-centered, outcome-focused lens. The visual identity combines a vibrant cyan accent (#5ce1e6) with a clean, light-neutral canvas (white #ffffff, dark text #131313) to evoke trust, accessibility, and forward momentum. The emotional response is one of calm competence: users feel assured that their technical challenges are understood and will be solved by real people, not faceless systems.

The brand voice is direct, confident, and conversational—never breathless or oversold. inTEC speaks in active outcomes rather than feature lists. Example: 'Your team works smarter, stays secure, and achieves measurable results' rather than 'We offer managed IT services.' The vocabulary favors concrete action verbs (deliver, drive, achieve, secure) and human-first language (team, specialists, approach). Tone is warm but professional, with occasional dry wit that signals expertise without arrogance.

Colors

The color system is anchored by a signature cyan primary (#5ce1e6) that appears on all call-to-action buttons, interactive states, and brand-critical moments. This accent is deliberately bright and energetic—it cuts through the neutral canvas and signals 'click here' or 'this matters.' Secondary blue (#53aee4) provides depth and is used for secondary CTAs, hover states on cards, and supporting UI elements. The tertiary navy (#1863dc) grounds the system and appears in headers, dark-mode contexts, and high-emphasis text. The surface stack is built on pure white (#ffffff) as the primary background, with carefully calibrated grays for container hierarchy: surface-container-lowest (#f4f4f4) for subtle card backgrounds, surface-container (#e9ecef) for mid-tier containers, and surface-container-h

Typography

The type system pairs Poly (a serif display font) for headlines and Segoe UI (a humanist sans-serif) for body and UI text. This pairing creates visual contrast and personality: Poly's organic, slightly irregular letterforms convey approachability and human expertise, while Segoe UI's clean geometry ensures legibility at small sizes and on screens. Display (60px, 400 weight, Poly) is reserved for hero headlines like 'Tech that works for you.' Headline-lg (50px, Poly) and headline-md (40px, Poly) scale down for section titles. Title-lg (28px, 700 weight, Segoe UI) is used for card headers and subsection titles—the bold weight adds emphasis without increasing size. Body-lg (18px, 400 weight, Segoe UI) is the default paragraph text, set at 28px line-height for comfortable reading. Body-md (16p

Layout

The layout system uses a 12-column grid with a max-width of 1280px (container-max), centered on the viewport. The grid is fluid below 1160px and fixed above, allowing responsive scaling without jarring breakpoints. Horizontal spacing follows a semantic scale: gutter (24px) is the default margin between sections and grid columns; lg spacing (40px) separates major content blocks; md spacing (24px) is used for card padding and internal component spacing; sm spacing (12px) is for tight groupings like form fields or list items. Vertical rhythm is maintained through consistent line-height multiples: body text uses 1.555em (28px on 18px base), headlines use 1.05em to 1.033em (tighter, more impactful), and display uses 1.033em. The page rhythm emphasizes white space: hero sections have 40px+ top/b

Elevation & Depth

Visual hierarchy is achieved through a subtle shadow and surface-color stack rather than aggressive depth. Level 1 (Base) is the white background (#ffffff) with no shadow. Level 2 (Standard Cards) uses surface-container-lowest (#f4f4f4) background with a soft shadow: box-shadow: 0 10px 20px 10px rgba(0, 0, 0, 0.05)—this creates gentle separation without drama. Level 3 (Elevated/Modals) uses surface-container-high (#dee2e6) background with a stronger shadow: box-shadow: 0 30px 40px 10px rgba(0, 0, 0, 0.05). The shadow spread (10px) and blur (20–40px) are intentionally large to diffuse the effec

Shapes

The shape philosophy is 'Approachable Precision'—rounded corners are used consistently but not excessively, signaling friendliness without sacrificing professional authority. Buttons use rounded.lg (10px / 0.625rem), a moderate radius that feels modern and clickable without being bubble-like. Cards and containers use rounded.xl (20px / 1.25rem) for a softer, more inviting appearance. Input fields use rounded.lg (10px) to match buttons and create visual cohesion in forms. Badges and pagination bullets use rounded.full (9999px) for perfect circles, emphasizing their role as small, discrete UI el

Components

Action Elements Buttons are the primary interaction pattern. Button-primary uses cyan (#5ce1e6) background with dark text (#131313), 12px vertical / 24px horizontal padding, 48px height, and 10px border-radius. On hover, the background shifts to the darker secondary blue (#53aee4) over 200ms, maintaining text color. Button-secondary has a transparent background with a 2px dark border (#131313), same padding and height, and on hover fills with surface-container-high (#dee2e6). Both button variants use label-md typography (15px, 500 weight, Segoe UI). The primary CTA 'Book a Discovery Call' is always button-primary; secondary CTAs like 'Contact Us' use button-secondary or appear as text links in on-surface color.

Containers & Surfaces Cards are the core container component. Standard

Do's and Don'ts

**Do**

• Do use cyan (#5ce1e6) exclusively for primary CTAs and interactive focus states—it is the brand's signature accent and should never be diluted or overused on secondary elements.
• Do maintain 24px minimum gutter spacing between major content sections and 12px between form fields to preserve the clean, breathing aesthetic.
• Do apply Poly font only to headlines (h1–h3); never use it for body text or UI labels, as it reduces legibility at small sizes and dilutes the display-vs-body contrast.
• Do use the full elevation shadow stack (md and lg) on cards and modals; flat design without shadows reads as incomplete and undermines the professional, trustworthy tone.
• Do ensure all interactive elements (buttons, links, inputs) have a clear focus state visible at 200% zoom and with keyboard navigation—use the primary cyan box-shadow or border treatment, never rely on color alone.

**Don't**

• Don't use the secondary blue (#53aee4) or tertiary navy (#1863dc) as primary CTA backgrounds—they are supporting colors and will confuse the visual hierarchy.
• Don't apply rounded corners smaller than 10px to buttons or inputs; they read as unfinished and conflict with the approachable-precision philosophy.
• Don't mix Poly and Segoe UI weights arbitrarily; Poly should always be 400 weight (regular), and Segoe UI should be 400 for body and 500–700 for emphasis.
• Don't use pure black (#000000) or pure white (#ffffff) for text on colored backgrounds; always use on-primary (#131313) or on-secondary (#ffffff) from the token system to ensure accessible contrast.
• Don't add drop shadows to buttons or input fields—they should rely on color, border, and typography for emphasis, not depth. Shadows are reserved for cards and elevated containers.