HiVolt Energy

Overview

HiVolt Energy is an industrial-grade digital platform for mission-critical prime power infrastructure—serving utilities, data centers, and mission-critical facilities that cannot tolerate downtime. The aesthetic is 'Technical Pragmatism': a clean, authoritative interface that prioritizes clarity and speed over decoration, grounded in a dual-accent color system (electric blue for primary actions, vibrant green for secondary/success states) set against a neutral, professional white canvas. The brand personality is confident, precise, and action-oriented—speaking the language of engineers and operations teams without condescension. The UI evokes trust through consistency, density of information, and immediate visual feedback on critical operations.

Voice: direct, technical but accessible, never marketing-speak. Vocabulary emphasizes reliability, speed, and precision: 'Time to Power is Now a Critical Metric,' 'Prime Power Infrastructure Built for What Cannot Wait,' 'Utility-Quality Solutions for Mission-Critical Operations.' Example sentence in brand voice: 'Your backup power is online in 47 milliseconds—that's the difference between uptime and catastrophe.'

Colors

The color system reflects industrial infrastructure priorities: reliability (blue), operational success (green), and clarity (neutral grays). Primary (#2e72bb) is the electric blue used on all CTAs, navigation highlights, and focus states—it commands attention without aggression, evoking the precision of electrical systems. Secondary (#76b82a) is a vibrant, warm green deployed on success states, confirmations, and secondary actions—it signals 'go' and operational health. The surface stack is anchored in pure white (#ffffff) for maximum legibility of technical data, with subtle gray containers (#e9ecef, #f5f5f5) for visual hierarchy and information grouping. On-surface text is a deep slate (#0f172a) for 98% contrast and accessibility on white backgrounds; muted text (#47546a) is reserved fo

Typography

Poppins is the sole typeface, chosen for its geometric clarity and strong weight differentiation—essential for distinguishing hierarchy in data-dense interfaces. Display (60px, 700 weight, -0.04em tracking) anchors hero sections and major announcements; Headline-lg (48px, 700, -0.02em) frames section titles; Headline-md (32px, 700) is used for card titles and subsection headers. Body-lg (18px, 400) and Body-md (16px, 400) carry primary content and descriptions, with 0.01em tracking to maintain legibility at smaller sizes. Label-md (14px, 600, 0.02em) is applied to buttons, badges, and form labels—the increased weight and tracking ensure these micro-interactions are visually distinct. All headings use Poppins with !important to override any inherited serif fallbacks. Apply text-shadow: 0 2p

Layout

The layout uses a 12-column grid with a 1280px max-width container, centered with auto margins. Spacing follows an 8px unit system: 24px (md) is the standard gutter between sections, 40px (lg) separates major content blocks, and 64px (xl) is reserved for hero-to-content transitions. White-space is generous but purposeful—never wasteful—allowing technical information to breathe without sacrificing density. Cards and form elements use 26px top/bottom padding and 20px left/right padding to create comfortable reading zones. The grid is fluid on mobile (single column, 12px gutters) and expands to full 12-column on desktop (1280px+). Container max-widths are enforced at 1100px for content-heavy pages to prevent line-length from exceeding 75 characters, maintaining readability of technical copy.

Elevation & Depth

Depth is achieved through subtle, consistent shadows rather than layering or blur effects. Level 1 (Base): no shadow; flat white surface (#ffffff) with 1px border in outline-variant (#abb8c3) for definition. Level 2 (Standard Card): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15)—a soft, close shadow suggesting the card hovers 4px above the surface. Level 3 (Elevated/Modal): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12)—a larger, more diffuse shadow indicating 12px elevation. Hover states increase shadow to Level 3 (0 8px 24px rgba(0, 0, 0, 0.12)) to signal interactivity. Active/pressed states use inse

Shapes

The shape philosophy is 'Technical Softness': sharp enough to feel engineered, rounded enough to feel approachable. Buttons and primary CTAs use 50px border-radius (full pill shape) to maximize visual distinctiveness and signal high interactivity. Cards, containers, and input fields use 10–12px radius—a subtle curve that softens the grid without sacrificing the technical aesthetic. Badges and small UI elements use 3–5px radius for micro-interactions. The 50px radius on buttons is the brand signature—it's the most recognizable shape element and should never be reduced. Inputs use 10px radius to

Components

Action Elements Buttons are the primary interaction pattern. Button-primary (bg: #2e72bb, text: white, 48px height, 12px 28px padding, 50px radius) is used for all primary CTAs ('Get Started,' 'Explore Applications'). On hover, the background darkens to #1a4a99 and shadow expands to 0 6px 16px rgba(30, 114, 187, 0.25), creating a lift effect over 150ms ease-out. On active/click, the background compresses to #0f3366 with inset shadow (inset 0 2px 4px rgba(0, 0, 0, 0.2)) to signal depression. Button-secondary (bg: #76b82a, text: white) follows the same pattern for secondary actions ('Get a Power Assessment'). Button-tertiary (transparent bg, 2px solid border in primary color, text: primary) is used for lower-priority actions and links—on hover, the background fills with primary-container

Do's and Don'ts

**Do**

• Do use primary blue (#2e72bb) exclusively for CTAs and focus states—it's the brand signature and must remain consistent across all interfaces.
• Do apply 50px border-radius to all buttons; this pill shape is the most recognizable brand element and signals high interactivity.
• Do maintain 24px gutters between sections and 26px padding inside cards to create breathing room for technical content.
• Do use Poppins 700 weight for all headings and 600 weight for labels/buttons—weight differentiation is critical for hierarchy in data-dense layouts.
• Do add box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to cards and 0 8px 24px rgba(0, 0, 0, 0.12) on hover to signal elevation without blur effects.
• Do enforce 1280px max-width on desktop to prevent line-length from exceeding 75 characters and maintain readability of technical copy.

**Don't**

• Don't use secondary green (#76b82a) for primary CTAs—it's reserved for success states and secondary actions only.
• Don't apply border-radius less than 10px to cards or containers; the technical aesthetic requires subtle softness, not sharp corners.
• Don't use system fonts or sans-serif fallbacks; Poppins must be loaded and applied with !important to all headings.
• Don't add blur filters, gradients, or glassmorphism effects—the industrial aesthetic demands clarity and precision, not atmospheric decoration.
• Don't exceed 600px width for cards on desktop; narrow containers improve readability and focus for mission-critical information.
• Don't use text-shadow on dark backgrounds or reduce contrast below 4.5:1 on any interactive element—accessibility is non-negotiable for infrastructure platforms.