Audit Summary
Issues Found: The current site uses inconsistent colors, multiple gray tones, and an unusual link color. This document captures the current state and recommends improvements.
| Element | Current State | Status | Recommendation |
|---|---|---|---|
| Primary Blue | #1B3550 | Consistent | Keep as-is |
| Accent Orange | #D46122 | Consistent | Keep as-is |
| Heading Font | Poppins (uppercase) | Consistent | Keep as-is |
| Body Font | Work Sans (weight 300) | Consistent | Keep as-is |
| Gray Tones | #807B82, #6F7C6B, #707070 | Inconsistent | Unify to single gray scale |
| Link Color | #8D8276 (brown/taupe) | Unusual | Change to blue or match brand |
| Secondary Blue | #2E6A9D | Not defined | Add to design system |
Logo
The CNC Onsite logo should maintain clear space and consistent usage across all applications.
Usage Guidelines
- Maintain clear space around the logo equal to the height of the "C" character
- Minimum size: 80px width for digital, 20mm for print
- Do not stretch, rotate, or apply effects to the logo
- Use the white version on dark and accent backgrounds only
Typography
Two typefaces define the CNC Onsite visual identity: Poppins for headings and Work Sans for body text.
Poppins
Headings, Navigation, Buttons, Labels — Always uppercase
ABCDEFGHIJKLMNOPQRSTUVWXYZ
Aa
300 Light
Aa
400 Regular
Aa
500 Medium
Aa
600 SemiBold
Aa
700 Bold
Work Sans
Body text, Paragraphs — Default weight 300 (Light)
The quick brown fox jumps over the lazy dog
Aa
300 Light (default)
Aa
400 Regular
Aa
500 Medium
Aa
700 Bold
Type Scale
H1 — Display
ON- AND OFFSHORE WIND
Poppins / 40-60px fluid / weight 400 / uppercase / letter-spacing: 1.2px
H2 — Section Heading
OUR SERVICES
Poppins / 32-45px fluid / weight 400 / uppercase / letter-spacing: 0.9px
H3 — Subsection
EMERGENCY RESPONSE
Poppins / 26-38px fluid / weight 300 / uppercase
Body
Our mobile CNC machining teams travel worldwide to repair wind turbines on-site, eliminating the need for costly disassembly and transport. With decades of experience and ISO 9001 certification, we deliver precision repairs that minimize downtime.
Work Sans / 16-18px fluid / weight 300 / line-height: 1.7
Pre / Label
WIND SOLUTIONS
Work Sans / 14px / uppercase / letter-spacing: 2.8px / color: #6F7C6B
Brand Colors
Current color palette as used across the site. Issues with gray consistency noted.
Primary (Consistent)
Aa
CNC Blue
#1B3550
--cnc-blue
Aa
CNC Orange
#D46122
--cnc-orange
Aa
Secondary Blue
#2E6A9D
--cnc-blue-secondary
Aa
Light Background
#EBEFF9
--cnc-light-bg
Grays (Needs Review)
Currently using multiple inconsistent gray values. Recommend unifying to a single gray scale.
Aa
Body Gray
#807B82
Used in employee cards
Aa
Label Gray
#6F7C6B
Used in pre/labels
Aa
Line Gray
#707070
Used in dividers
Aa
Link Color
#8D8276
Brown/taupe - unusual
Recommended Gray Scale
Aa
Gray 900
#1e293b
Aa
Gray 700
#374151
Aa
Gray 500
#6b7280
Aa
Gray 400
#9ca3af
Aa
Gray 300
#d1d5db
Aa
Gray 100
#f3f4f6
CSS Custom Properties
Design tokens for implementation. Includes both current values and recommended updates.
/* CNC Onsite Design Tokens */
:root {
/* Primary Colors */
--cnc-blue: #1B3550;
--cnc-orange: #D46122;
--cnc-blue-secondary: #2E6A9D;
--cnc-light-bg: #EBEFF9;
/* Grays (Recommended unified scale) */
--cnc-gray-900: #1e293b;
--cnc-gray-700: #374151;
--cnc-gray-500: #6b7280;
--cnc-gray-400: #9ca3af;
--cnc-gray-300: #d1d5db;
--cnc-gray-100: #f3f4f6;
/* Typography */
--font-heading: 'Poppins', sans-serif;
--font-body: 'Work Sans', sans-serif;
}
Image & Photography
Photography should reinforce CNC Onsite's hands-on expertise and industrial credibility. Every image should feel real, not staged.
✅ Do Use
- — Actual worker photos — real engineers, real equipment, real job sites
- — Industrial settings — wind turbines, offshore platforms, factory floors, heavy machinery
- — Action shots — hands working on equipment, team coordinating on-site, close-ups of precision work
- — Natural lighting — outdoor sites, workshop environments, authentic conditions
❌ Avoid
- — Generic stock photos — smiling people in hard hats shaking hands, overly polished corporate imagery
- — Abstract/conceptual images — gears, lightbulbs, puzzle pieces, anything that doesn't show real work
- — Overly saturated colors — keep editing natural, avoid heavy filters or artificial color grading
- — Low-resolution images — all hero/banner images should be minimum 1920px wide
Tip: CNC Onsite's best asset is its real-world work. Invest in professional photography during actual jobs — even smartphone photos from site visits beat polished stock imagery for this brand.