Enerblock

Overview

Enerblock is an industrial construction technology platform that connects architecture, engineering, and production into a unified digital ecosystem. The design system embodies 'Architectural Brutalism meets Digital Precision'—a high-contrast, grid-locked aesthetic that communicates technical rigor, industrial confidence, and predictable execution. The UI prioritizes clarity through bold typography (Neue Corp at 72–176px), stark color separation (vivid coral #FF5949 against deep black #0C0B11 and light grey #F0EFEB), and geometric precision. Users experience the interface as a control center: every element is intentional, every interaction is direct, and every visual hierarchy reinforces the brand's core promise of certainty in construction.

The brand voice is authoritative yet accessible, speaking in declarative statements that avoid hedging. Tone: precise, confident, forward-looking. Example: 'Industrialized technology eliminates uncertainty. Predictable execution. Measurable results.' The vocabulary favors technical terms (system, component, production, certainty, execution) paired with human-centered outcomes (confidence, control, clarity). Typography scales aggressively to command attention; spacing is generous but disciplined; color is deployed sparingly to maximize impact.

Colors

The Enerblock color system operates on a principle of maximum contrast and industrial clarity. Primary (#FF5949) is a vivid coral-red deployed exclusively on call-to-action buttons, active states, and brand-critical interactive elements—it commands attention without ambiguity. Secondary (#0C0B11, near-black) anchors the system as the dominant text color and structural frame, conveying technical authority and precision. Tertiary (#666666, mid-grey) serves as a supporting neutral for disabled states, secondary labels, and visual hierarchy reduction.

Surface stack: The light mode (default) uses a warm off-white surface (#F0EFEB) as the primary canvas, with a bright white (#FFFFFF) for elevated containers and input fields. Surface-container-high (#E9ECEF) provides subtle hover states without

Typography

Neue Corp is the exclusive typeface across all scales, reinforcing industrial precision and brand consistency. The type system uses aggressive scaling via CSS clamp() functions to maintain readability across 320px mobile to 1440px desktop without breakpoint-specific overrides. Display (176px, 600 weight, -0.01em letter-spacing) commands hero sections; Headline-LG (108px) anchors major sections; Headline-MD (72px) is the primary page title. Body-LG (24px, 500 weight) is used for subheadings and prominent descriptive text; Body-MD (16px) is the standard paragraph and UI label size. All body text uses -0.015em letter-spacing to tighten the default spacing and reinforce the technical aesthetic. Label-MD (14px, 600 weight, 0.01em spacing) is applied to buttons, form labels, and UI chrome; Label

Layout

The layout system uses a 12-column grid with a max-width of 1280px, centered on the viewport. Grid gutter is 20px on desktop (1440px+), 16px on tablet (681–980px), and 16px on mobile (≤680px). Margin (padding outside the grid) is 20px on desktop, 16px on tablet, and 16px on mobile. The grid is fluid—columns scale proportionally—but the container max-width is fixed to prevent excessive line lengths on ultra-wide displays. Spacing scale: xs (4px) for micro-adjustments, sm (12px) for tight grouping, md (24px) for standard section separation, lg (40px) for major section breaks, xl (64px) for hero-to-content transitions. Padding inside cards and containers uses md (24px) as the default; inputs and list items use sm (12px). Vertical rhythm is maintained through consistent use of lg spacing betwe

Elevation & Depth

Depth in Enerblock is conveyed through subtle shadows and border definition rather than blur or glassmorphism. The elevation system uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for minor UI elements like disabled buttons; md (0 3px 8px rgba(0, 0, 0, 0.15)) for standard cards, dropdowns, and modals; lg (0 8px 24px rgba(0, 0, 0, 0.12)) for elevated modals and floating panels. All shadows use a consistent 0° angle (directly below) to reinforce the architectural, orthogonal aesthetic. Borders are preferred over shadows for primary visual separation: 1px solid #D0D0D0 on light surfaces, 1p

Shapes

The shape philosophy is 'Architectural Minimalism'—sharp corners with minimal rounding, reflecting the precision of industrial construction. Border-radius uses four values: sm (0.1875rem / 3px) for subtle softening on inputs and small UI elements; DEFAULT (0.25rem / 4px) for buttons and cards; md (0.5rem / 8px) for larger containers and modals; lg (1rem / 16px) for hero sections and full-width containers. Full (9999px) is reserved for badges and pill-shaped elements. The rationale: buttons and cards use DEFAULT (4px) to signal interactivity without appearing soft; inputs use sm (3px) to mainta

Components

Action Elements Buttons are the primary interaction mechanism and use a consistent 48px height with 12px vertical padding and 24px horizontal padding. Primary buttons (button-primary) use background: {colors.primary} (#FF5949), color: {colors.on-primary} (white), and a 1px solid border in the same primary color. On hover, transition to background: {colors.primary-container} (#FF8873) over 200ms ease; the border remains primary to maintain visual continuity. Secondary buttons (button-secondary) use a transparent background with a 1px solid border in {colors.secondary} (#0C0B11) and text in secondary; on hover, fill the background with {colors.secondary-container} (#505050) and text becomes white. Ghost buttons (button-ghost) have no background, a 1px border in {colors.outline-variant} (

Do's and Don'ts

**Do**

• Do use Neue Corp exclusively; never substitute with system fonts or web-safe fallbacks.
• Do maintain 1px solid borders on all cards and inputs; borders are the primary visual separator, not shadows.
• Do apply the primary color (#FF5949) only to CTAs, active states, and focus indicators; never use it for body text or backgrounds.
• Do use the full 12-column grid with 20px gutters on desktop; never center content except for hero headlines.
• Do transition all interactive states (hover, focus, active) over 200ms ease; never use instant or jarring changes.
• Do maintain a minimum 4.5:1 contrast ratio between text and background on all surfaces.
• Do use md (24px) spacing as the default section separator; use lg (40px) only for major transitions.
• Do apply border-radius: 4px (DEFAULT) to buttons and cards; never exceed 8px except for full-width containers.

**Don't**

• Don't use rounded corners > 1rem except for full-width elements; the brand rejects soft, organic aesthetics.
• Don't apply shadows > lg (0 8px 24px) to any element; excessive depth contradicts the architectural precision.
• Don't use the primary color (#FF5949) for disabled states, secondary text, or non-interactive elements.
• Don't center content horizontally except for hero headlines; left-aligned layouts reinforce the grid-based aesthetic.
• Don't use blur filters, transparency overlays, or glassmorphism effects; maintain crisp, high-contrast edges.
• Don't mix typefaces; Neue Corp is the only font family across all scales and weights.
• Don't apply letter-spacing > 0.01em on body text; tightness (-0.015em) reinforces technical precision.
• Don't use color transitions or gradients on backgrounds; solid colors and borders are the only visual separators.