Wymer Electrical

Overview

Wymer Electrical is a London-based commercial electrical contractor established in 1977, serving high-profile projects across the City of London and beyond. The design system embodies 'Industrial Precision Modernism'—a philosophy that marries the clean, grid-based rigor of architectural documentation with contemporary web accessibility. The aesthetic is deliberately restrained: a white canvas (rgb(255, 255, 255)) anchors the interface, while a signature red accent (#c73232) appears on critical actions and project highlights, evoking both the brand's heritage and the energy of live electrical systems. The UI evokes confidence and technical competence, never flashy, always purposeful.

The brand voice is direct, professional, and grounded in decades of expertise. Vocabulary favors concrete nouns (installations, circuits, compliance) over marketing abstractions. Tone is reassuring without being patronizing—the firm speaks to architects, developers, and facilities managers as peers. Example sentence: 'We've completed 47 major installations across the Square Mile, each to full Building Regulations compliance and delivered on schedule.'

Colors

The color system is anchored in a neutral, high-contrast foundation designed for clarity and accessibility. Primary surface (#ffffff) provides the clean canvas; on-surface text (#212121) maintains WCAG AAA contrast (21:1 ratio). The surface stack progresses through carefully calibrated grays—surface-dim (#f4f4f4), surface-container (#f9f9f9), surface-container-high (#e6e6e6)—to create visual hierarchy without relying on color saturation. The primary accent, a deep red (#c73232), is reserved exclusively for call-to-action buttons, active navigation states, and project highlights; it appears sparingly but unmistakably, commanding attention without overwhelming. Secondary blue (#1863dc) supports informational elements and secondary CTAs. Tertiary gray (#4e4b66) provides a sophisticated neutra

Typography

The typography system uses Montserrat exclusively, a geometric sans-serif that conveys both modernity and engineering precision. Display (60px, weight 700, -0.02em tracking) anchors hero sections and major project titles; Headline-lg (40px, weight 600) frames section introductions; Headline-md (28px, weight 600) breaks content into digestible chunks. Body-lg (18px, weight 400) and Body-md (16px, weight 400) form the reading layer, with 28px and 24px line-heights respectively, ensuring legibility at all sizes. Label-md (14px, weight 500, 0.02em tracking) and Label-sm (12px, weight 500, 0.03em tracking) are used for UI labels, button text, and metadata. All headings use negative letter-spacing (-0.01em to -0.02em) to tighten the geometric letterforms and reinforce the architectural aesthetic

Layout

The layout operates on a 12-column grid with a max-width of 1300px, centered on the viewport. The gutter is 24px (md spacing), applied consistently between columns and sections. Hero sections span full-width with a 40px (lg spacing) vertical rhythm; content sections use 24px (md spacing) for section separation and 12px (sm spacing) for component grouping. Container padding is 24px on desktop, reducing to 12px on tablets and 8px on mobile. White-space is generous but purposeful: the interface breathes, with ample margins around project images and text blocks. The spacing scale (xs: 4px, sm: 12px, md: 24px, lg: 40px, xl: 64px) is used hierarchically—xs for micro-interactions (icon spacing), sm for component padding, md for section margins, lg for hero sections, xl for page-level separation.

Elevation & Depth

Depth is conveyed through a restrained shadow system and subtle surface color shifts, never through darkness or blur. Level 1 (Base): white surface (#ffffff) with no shadow, establishing the primary plane. Level 2 (Cards, inputs): 1px border in outline-variant (#cccccc) plus a soft shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to lift elements 4–8px above the base. Level 3 (Modals, popovers): the same 1px border plus a deeper shadow (0 -1px 10px 0 rgba(172, 171, 171, 0.3)) to suggest 12–16px elevation. Hover states intensify the shadow to (0 -1px 10px 0 rgba(172, 171, 171, 0.3)) and shift the backgro

Shapes

The shape philosophy is 'Architectural Sharpness'—minimal rounding that respects the precision of engineering drawings while remaining approachable. Buttons use 4px border-radius (DEFAULT), a subtle softening that feels contemporary without compromising legibility. Cards and containers use 8px (lg), providing a gentle frame around content. Inputs use 4px (DEFAULT) to align with buttons, creating a cohesive interaction layer. Badges and pills use full (9999px) for a distinctly rounded accent. Navigation elements and list items use 6px (md) as a middle ground. The rationale: sharp corners (0px)

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary (#c73232 background, white text, 40px height, 8px 27px padding, 4px radius) is used exclusively for primary CTAs (e.g., 'Contact', 'Request Quote'). On hover, the background shifts to #b02828 (a 15% darkening) with a 200ms transition. Button-secondary (rgba(0, 0, 0, 0.4) background, white text, 0px 4px 4px 0px radius) is used for secondary actions adjacent to primary buttons; on hover, it darkens to rgba(0, 0, 0, 0.55). Button-ghost (transparent background, primary red text, 1px outline-variant border, 4px radius) is used for tertiary actions; on hover, it gains a surface-container-high background. All buttons use Montserrat 14px weight 500 with 0.02em letter-spacing.

Containers & Surfaces Cards (surface

Do's and Don'ts

**Do**

• Do use primary red (#c73232) exclusively for critical actions and active states—it is the brand's signature and must remain rare and impactful.
• Do maintain at least 24px (md spacing) between major sections and 12px (sm spacing) between components to preserve the clean, breathing aesthetic.
• Do apply the 200ms ease-in-out transition to all state changes (hover, focus, active) to signal interactivity without jarring the user.
• Do use Montserrat weight 600 for all headings and weight 500 for all labels—no intermediate weights or serif typefaces.
• Do ensure all text meets WCAG AAA contrast ratios: on-surface (#212121) on surface (#ffffff) achieves 21:1, exceeding the 7:1 requirement.

**Don't**

• Don't use primary red (#c73232) for body text, backgrounds, or decorative elements—reserve it for CTAs and active states only.
• Don't apply blur filters, transparency overlays, or glassmorphism effects; the system relies on shadows and color shifts for depth.
• Don't use border-radius greater than 12px (xl) except for badges (full); excessive rounding dilutes the architectural precision.
• Don't mix typefaces or use system fonts; Montserrat is the exclusive brand typeface across all weights and sizes.
• Don't reduce spacing below 8px (xs) or apply padding less than 8px to interactive elements; maintain the 8px baseline grid and 44px minimum touch targets.