01 — Colours
Colour System
Two primary brand colours anchored in the existing company profile. Navy projects authority and precision; orange signals energy and action.
Primary Palette
Navy Deepest
#0C1F3F
Page background
Navy Primary
#1B3A6B
Primary brand colour
Navy Mid
#254E8F
Hover states, links
Navy Light
#3A6BAF
Highlights, active
Orange Primary
#E07820
CTA, accents, icons
Orange Bright
#F08930
Hover CTA state
Neutrals & Surfaces
Surface
#152B55
Cards, panels
Text Primary
#E2E8F0
Body text
Text Secondary
#D6DEE8
Secondary text
Text Muted
#B0BEC9
Captions, hints
Border
rgba(58,107,175,0.15)
Borders, dividers
02 — Typography
Type System
Oxanium for all headings and display text — CNC-machined, digital-industrial character. DM Sans for body copy — warm, open, and readable.
Engineering Solutions
Industrial Equipment & Technical Supply
Mechanical & Structural Engineering
Plant & Equipment Maintenance Services
Uniqraft Engineering provides integrated solutions covering both industrial supply and engineering services, ensuring clients can access dependable, high-quality products and technical expertise.
Industrial machinery and equipment supply. Full fabrication and machining capabilities.
Our Services · Engineering Solutions · Contact Us
03 — Wordmark
Wordmarks
Two wordmark treatments using Oxanium, tested on dark and light backgrounds. Option A is the default for all touchpoints; Option B requires approval.
A — Dual-Bar Split Colour PRIMARY
Dark
Light
Maximum impact — navy + orange bars with split-colour metallic text. Bold and unmistakable.
B — Chrome Monochrome SECONDARY
Dark
Light
Clean and versatile — chrome metallic with orange underline accent. Use where space constraints or design context require a monochrome treatment. Requires approval.
04 — Logo Guidelines
Logo Usage Rules
Consistent logo application builds brand recognition. Follow these rules across all touchpoints — digital, print, and collateral.
On Dark
On Light
Minimum Size
Digital: 64px wide · Favicon minimum: 32px
Print: 25mm wide (0.5 inches)
Never scale below these limits.
The dual bars and wordmark detail are lost at smaller sizes.
Clear Space
Maintain a minimum clear space of 8px (digital) or 0.25 inches (print) on all four sides.
Never crowd the logo with other elements, text, or imagery.
Colour Variations
Full Colour (Primary): Use on navy or light backgrounds — the standard for all digital use.
Monochrome (Chrome — Option B): For restricted-colour environments — email clients, fax, single-colour print.
Never alter colour values. Never invert the logo.
Incorrect Usage
Distort, stretch, or rotate
Add effects (shadow, glow, 3D)
Place on busy or low-contrast backgrounds
Recreate in another font or alter proportions
Logo by Context
Website Header
Option A (Dual-Bar). Minimum 120px wide. Place in top-left of navigation.
Favicon
Simplified gear mark only. 32×32px or 64×64px. No wordmark text at this size.
Business Card
Option A. 25mm wide minimum. Navy card background with full-colour wordmark.
Email Signature
Option B (Chrome). 180×60px. Simpler rendering in email clients.
Social Media Profile
Square gear mark on navy background. 400×400px source file. No full wordmark in avatar.
Presentations / PPT
Option A on title slide. Option B in footer of content slides at 96×32px.
05 — Components
UI Components
Reusable interface elements built on the brand colour and type system for consistent use across all website pages.
Buttons
Primary
Secondary
Outline
Ghost
Small
Badges & Tags
Orange
Engineering
Navy
Industrial
Success
Available
Grey
Zimbabwe
Mixed
New Equipment
Maintenance
Fabrication
Service Card
Mechanical Engineering
Machinery maintenance, repair, and custom component fabrication with precision CNC technology.
Tools & Hardware
Wide selection of industrial tools for various engineering applications.
Stat / Metric Cards
6+
Services Offered
10+
Years Experience
ZW
Based in Zimbabwe
4
Sectors Served
Navigation Bar
Form Elements — Quote Request
06 — Spacing
Spacing Scale
An 8px base grid. All spacing values are multiples of 4px for sub-components, and 8px for layout-level spacing.
--sp-1
4px
Icon gap, tight inline spacing
--sp-2
8px
Button icon gap, badge padding
--sp-3
12px
Card internal gaps
--sp-4
16px
Form field gaps, nav spacing
--sp-6
24px
Grid gaps, section padding
--sp-12
48px
Section vertical padding
--sp-20
80px
Between page sections
07 — Brand Guidelines
Brand Voice & Guidelines
Guidelines for keeping the UNIQRAFT brand consistent across all touchpoints — visual, verbal, and interactive.
Visual — Do
Navy backgrounds, orange accents, gradient fills
Oxanium uppercase on headings and labels
12px radius, consistent card shadows
Orange eyebrow labels above section titles
Visual — Don't
Orange as a large-area background
Mixed case on buttons or labels
Sharp corners or off-system fonts
Low-contrast text (orange on navy below 14px)
Reliable · Technical · Proudly Zimbabwean
Professional, solution-focused, direct. We speak to procurement officers, plant managers, and engineers.
Voice — Do
Specific, evidence-backed claims
Active voice, "we" not "I"
Industry terms with context where needed
Voice — Don't
Casual tone, vague promises, buzzwords
Excessive punctuation (max one ! per page)
CTA Copy — Use
Action-specific: "Request a Quote", "Schedule Maintenance"
Clear outcome: "Download Specs", "View Services"
CTA Copy — Avoid
Generic: "Click Here", "Submit", "Buy Now"
Hype: "Get Started Now!", "Learn Our Secret"
Sample Service Copy
Keeping Your Operations Running
Unplanned downtime costs money. Our maintenance programmes combine scheduled inspections, predictive diagnostics, and rapid on-site repairs to keep your equipment running at full capacity. From routine servicing to complex mechanical overhauls — we handle it.
08 — Page Layouts
Page Templates
How components combine on real pages. These templates demonstrate correct colour, spacing, type, and voice working together.
Homepage Hero
Background: Navy gradient (--bg-grad)
Layout: Centred, max-width 560px body text
Eyebrow: Orange label above Display heading
CTAs: Primary (orange) + Ghost, flex row, 12px gap
Decoration: Subtle orange circle ring, top-right, 6% opacity
Padding: 56px 48px
Services Section
Background: Surface gradient (--surface-grad)
Layout: 2-column grid, 14px gap
Cards: Service cards with orange left-border accent
Icons: Alternate navy / orange icon backgrounds
Header: Orange eyebrow + H2 title
Padding: 36px 32px
Quote Request Form
Layout: 2-column — contact info left, form right (1fr / 1.2fr)
Left column: Orange eyebrow, H3 title, body text, contact details (T / E / A)
Right column: 3 required fields + textarea + full-width primary CTA
Background: Surface gradient
Mobile: Stacks to single column
Email Signature
Background: White (#FFF) for email client compatibility
Accent: Orange left border (4px solid #E07820)
Name: 15px bold, navy (#1B3A6B)
Title: 12px uppercase, orange (#E07820)
Font: Arial (system safe, no web fonts)
Wordmark: Chrome (Option B) if image rendering is supported