Deep Navy
#061126
Dark foundations, hero gradients and footer depth.
Altiatech Design Guard Rails v1
A calmer, clearer design system for enterprise technology pages.
Use this visual guide to keep Altiatech pages consistent across navigation, hero sections, service pages, contact routes, assurance strips and footer components.
Colour system
Core palette
Use dark navy for depth, blue for technology accents, green for live/verified signals, and soft light backgrounds for assurance and proof areas.
Primary Navy
#071B3A
Main brand dark, text on light, card depth.
Accent Blue
#2F7CFF
Primary action colour, highlights and active states.
Bright Blue
#4D8EFF
Gradient partner for blue CTAs and highlights.
Soft Blue
#9FC6FF
Labels, small details and subtle section markers.
Status Green
#36F39A
Live, verified, assurance and status dots.
Light Assurance
#F7FAFF
Proof strips and light trust sections.
Soft Panel Light
#EEF4FF
Subtle light cards, proof bands and soft backgrounds.
Typography
Calmer heading scale
The previous direction became too large and too bold in places. This system keeps headings strong but less shouty.
Hero H1 · clamp(38px, 5vw, 66px) · weight 500-620
Speak to Altiatech about your technology priorities.
Section H2 · clamp(26px, 3vw, 42px) · weight 560-620
Choose the right starting point.
Card H3 · 16-20px · weight 600-700
Managed services review
Body copy · 13.5-18px · line-height 1.5-1.65
Altiatech helps organisations modernise, secure, optimise and run technology with clearer service ownership, stronger governance and better control.
Components
Buttons, cards and badges
Components should feel premium, simple and consistent. Use inherited fonts, measured spacing and subtle borders.
Managed operations, cloud and AI delivery.
Use dark translucent panels for service-led sections, contact hero areas and high-emphasis content.
G-Cloud 14
Aquila-powered
Governed delivery and procurement confidence.
Use light panels for assurance, accreditations, framework signals and proof-led content.
ISO/IEC 20000
Cyber Essentials
Guard rails
Build rules for future sections
Use these rules when refining existing pages or creating new WoCode/Duda sections.
Buttons, labels, nav items and cards should use font-family: inherit. Do not force Roboto Mono.
Strong headings are fine, but avoid heavy 800+ weights unless needed for a very small label.
Most content sections should use clamp(42px, 6vw, 86px). Major panels use 24px to 48px inner padding.
When a dark footer is present, use a light assurance strip above it to stop the bottom of the page feeling too heavy.
Keep section content aligned to the current site container width for consistency across pages.
Future code changes should be full copy-and-paste HTML/CSS blocks, not snippets or partial patches.
Page structure
Recommended global page ending
The footer and assurance strip should work together without repeating the same message.
Main sections should carry the service message, outcomes, conversion paths and internal links.
Use the light trust band for accreditations, procurement routes and proof signals.
Use the footer for logo, contact details, copyright and navigation only. No large hero-style messaging.