Conquest Electrical Installation Services

Overview

Conquest Electrical Installation Services is a B2B electrical contractor specializing in bespoke infrastructure and complex building systems. The design system embodies **Architectural Minimalism** — a discipline that prioritizes precision, structural clarity, and understated sophistication. The visual language combines a refined dark-neutral foundation (charcoal #171923, off-white #ffffff) with a distinctive sage-green accent (#8ea05f) that signals expertise and trust without aggression. The UI evokes the precision of technical drawings and the solidity of engineered systems, creating an atmosphere of competence and reliability. Users should feel confident that Conquest handles complexity with methodical care.

The brand voice is direct, professional, and grounded in technical authority. Conquest speaks in declarative statements about capability, not aspirational marketing. Vocabulary emphasizes precision: "bespoke," "inception to completion," "full range," "expertise." The tone avoids hyperbole and jargon-heavy language; instead, it explains infrastructure decisions as if addressing a knowledgeable client. Example sentence in brand voice: "We manage electrical systems from design phase through commissioning, ensuring every installation meets bespoke building requirements."

Colors

The color system is anchored in a **neutral-dominant, accent-focused** philosophy. The primary surface palette uses near-white (#ffffff) and light grays (#f8f9fa, #dee2e6) for maximum legibility and professional restraint. The dominant text color is deep charcoal (#171923), applied at 100% opacity for 16px body text and 300–400 font-weight, ensuring accessibility (WCAG AA at 14.5:1 contrast). The primary accent is sage-green (#8ea05f), used exclusively on call-to-action buttons, focus states, and key interactive elements. This color is neither corporate blue nor trendy neon; it signals growth, stability, and natural authority—appropriate for infrastructure expertise. Secondary accent is a technical blue (#1863dc), reserved for links, toggles, and secondary CTAs. The tertiary color is charc

Typography

The type system uses three distinct font families to create hierarchy and personality. **Roboto** (900 weight) is reserved for display and headline-lg sizes (42–60px), delivering bold, confident messaging on hero sections and key headings. **Roboto Slab** (300–600 weight) serves as the body and secondary headline font (16–28px), providing warmth and readability while maintaining a technical edge. **Brandon Grotesque** (700 weight) is used exclusively for labels, buttons, and micro-copy (12–14px), adding a geometric, engineered quality to interactive elements. Line-height is set to 1.5× font-size for body text (24px line-height at 16px font-size) to ensure comfortable reading on screens. Letter-spacing is minimal (0em for body, -0.04em for display) to maintain tightness and precision. On sm

Layout

The layout system uses a **12-column fluid grid** with a maximum container width of 1220px, centered on the viewport. The gutter (space between columns) is 24px, maintained consistently across breakpoints. Section spacing follows a semantic scale: use lg spacing (40px) for major section separation (hero to services, services to clients), md spacing (24px) for card groupings and subsection breaks, and sm spacing (12px) for internal card padding and label-to-content relationships. The hero section spans full viewport width with a semi-transparent dark overlay (rgba(0, 0, 0, 0.3)) over a background image, ensuring text contrast. Body copy uses a max-width of 960px within the 1220px container to prevent line-length fatigue. Whitespace is generous but purposeful: never less than 12px between in

Elevation & Depth

Depth is conveyed through **subtle shadow layering and precise z-index stacking**, not through color gradients or transparency effects. The elevation system uses three levels: Level 1 (Base) has no shadow, representing the page surface itself (background: #ffffff). Level 2 (Standard Cards) applies box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a gentle lift for content containers and form fields. Level 3 (Modals & Overlays) applies box-shadow: 0 32px 68px rgba(0, 0, 0, 0.3), reserved for modals, dropdowns, and floating elements that demand visual separation. Hover states on cards transiti

Shapes

The shape philosophy is **Geometric Precision** — sharp corners and minimal rounding that evoke technical drawings and engineered systems. Border-radius follows a strict scale: buttons and inputs use 2px (sm), cards and containers use 4–6px (DEFAULT to md), and only badges and pill-shaped elements use 9999px (full). This hierarchy reinforces the distinction between transient interactive elements (sharp buttons) and persistent content containers (slightly softened cards). No organic curves or excessive rounding; every radius is a deliberate choice. Buttons use 2px radius to feel like precision

Components

Action Elements Buttons are the primary interaction pattern. The primary button uses background: #8ea05f, color: #ffffff, padding: 8px 24px, height: 48px, border-radius: 2px, font-family: Brandon Grotesque, font-weight: 700, font-size: 12px. On hover, background shifts to #7a8c4f (a 15% darkening) with a 150ms transition (cubic-bezier(0.4, 0, 0.2, 1)). On focus, add outline: 2px solid #8ea05f with outline-offset: 2px. Secondary buttons (reject, customize) use background: #1a1c27, color: #ffffff, border: 2px solid #1863dc, with the same padding and height. Ghost buttons (read more links) use background: transparent, color: #8ea05f, border: 2px solid #8ea05f, and underline on hover. All buttons must have a minimum touch target of 44px height and 44px width for accessibility.

Contain

Do's and Don'ts

**Do**

• Do use sage-green (#8ea05f) exclusively for primary CTAs and focus states — it is the brand's signature accent and should never be diluted or replaced.
• Do maintain sharp 2px border-radius on buttons and inputs to reinforce the technical, engineered aesthetic — avoid rounding beyond 6px on any interactive element.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to white text on dark backgrounds or images to ensure WCAG AA contrast without adding visual noise.
• Do use Roboto 900 weight exclusively for display and headline-lg sizes; never use it for body text or labels, as it will overwhelm the hierarchy.
• Do maintain a 1.5× line-height ratio for body text (24px line-height at 16px font-size) to ensure comfortable reading and professional appearance.

**Don't**

• Don't introduce new accent colors beyond sage-green (#8ea05f) and technical blue (#1863dc) — the palette is intentionally restrained to maintain authority and clarity.
• Don't use rounded corners exceeding 6px on cards or containers; excessive rounding undermines the architectural precision of the brand.
• Don't apply opacity or transparency effects to text; always use solid colors with sufficient contrast (minimum 4.5:1 for body text, 3:1 for large text).
• Don't use glassmorphism, blur effects, or gradient overlays — the brand aesthetic is geometric and technical, not ethereal or atmospheric.
• Don't center-align body copy or multi-line text; left-align is the default for technical credibility and readability.