DESIGN.md · Analysis

Enovum Data Centers

enovumdc.com · 1 Nov 2026 · 47 colors · Assistant, Hoefler Text

Enovum Data Centers

Enovum integrates cabinets to hyperscalers, delivering speed and quality through a diverse and robust, vertically integrated data center infrastructure with 24/7 remote hands support.

Colors

surface#ffffff

surface-dim#e9edf1

surface-bright#ffffff

surface-container-lowest#ffffff

surface-container-low#f6f7f8

surface-container#f0f2f4

surface-container-high#e6e9ec

surface-container-highest#d9dde2

on-surface#111111

on-surface-variant#111111

inverse-surface#111111

inverse-on-surface#ffffff

outline#767676

outline-variant#cccccc

surface-tint#0073a8

primary#0073a8

on-primary#ffffff

primary-container#005177

on-primary-container#ffffff

inverse-primary#5bc0de

secondary#005075

on-secondary#ffffff

secondary-container#bfdcea

on-secondary-container#005075

tertiary#5cb85c

on-tertiary#111111

tertiary-container#5cb85c

on-tertiary-container#111111

error#d9534f

on-error#111111

error-container#f8d7da

on-error-container#721c24

primary-fixed#0073a8

primary-fixed-dim#005177

on-primary-fixed#ffffff

on-primary-fixed-variant#bfdcea

secondary-fixed#005075

secondary-fixed-dim#32373c

on-secondary-fixed#ffffff

on-secondary-fixed-variant#bfdcea

tertiary-fixed#5cb85c

tertiary-fixed-dim#5bc0de

on-tertiary-fixed#111111

on-tertiary-fixed-variant#ffffff

background#ffffff

on-background#111111

surface-variant#f0f2f4

Typography

display: fontFamily: Assistant · fontSize: 47px · fontWeight: 600 · lineHeight: 47px · letterSpacing: -0.94px
headline-lg: fontFamily: Assistant · fontSize: 36px · fontWeight: 600 · lineHeight: 42px · letterSpacing: -0.01em
headline-md: fontFamily: Assistant · fontSize: 28px · fontWeight: 600 · lineHeight: 34px
title-lg: fontFamily: Assistant · fontSize: 22px · fontWeight: 600 · lineHeight: 30px
body-lg: fontFamily: Hoefler Text · fontSize: 22px · fontWeight: 400 · lineHeight: 39.6px
body-md: fontFamily: Hoefler Text · fontSize: 22px · fontWeight: 400 · lineHeight: 39.6px
label-md: fontFamily: Assistant · fontSize: 16px · fontWeight: 400 · lineHeight: 24px · letterSpacing: 0.05em
label-sm: fontFamily: Assistant · fontSize: 14px · fontWeight: 400 · lineHeight: 20px · letterSpacing: 0.05em

Design guidance

Overview

Enovum Data Centers is a vertically integrated colocation provider serving clients from single cabinets to hyperscale deployments. The brand positions itself as an engineering-led, transparent partner, and the visual system follows an Architectural Minimalism movement: a white canvas, a deep navy and steel-blue palette drawn from the physical facility, and photographic hero imagery of cabling and server rows that does the emotional work. The response it evokes is reassurance and competence rather than excitement.

The voice is direct, factual and calm, favouring concrete capability statements over marketing adjectives. Vocabulary centres on redundancy, remote hands, infrastructure and projects. Example sentence: "From single cabinets to hyperscalers, Enovum is vertically integrated to deliver speed and quality."

Colors

Primary (#0073a8) is the signature steel-blue used for the navigation bar band, links and the secondary CTA "Contact us". Primary-container (#005177) is its deeper state for hover and pressed. Secondary (#005075) carries the darker navy used in the hero overlay and footer-style bands. Tertiary (#5cb85c) is reserved for positive status only.

Text is #111111 on #ffffff surfaces, with #767676 for secondary copy (meets 4.5:1 contrast). Error (#d9534f) is reserved for form validation. Hero overlays sit on a gradient from rgba(0, 51, 92, 0.85) at the bottom to transparent at the top so white copy remains legible over the photography.

Typography

The type system pairs Assistant (headings, navigation, labels) with Hoefler Text (body copy, falling back to Garamond and Times New Roman). Display sits at 47px / 600 with -0.02em tracking for the H1; headline levels step down to 36px and 28px at weight 600. Body copy is set at 22px with 39.6px line height, which is unusually large and gives the page an editorial, print-like rhythm. Apply letter-spacing: 0.05em to small navigation labels and uppercase-free labels at 14px to keep them open on the navy nav band.

Layout

The layout is a fixed-width container with a 1140px maximum and a 12-column grid, using a 20px gutter. Sections are separated by generous vertical whitespace, and the hero runs full-bleed behind a 100vh photographic crop. Use the xl spacing (20px) between card-level elements, 2xl (32px) between sections, and reserve lg (16px) for intra-component padding. Text blocks in the hero are constrained to roughly 550px so line length stays readable.

Elevation & Depth

The site is essentially flat. Hierarchy comes from colour bands and photography rather than shadows. Where a separation is needed, use a 2px hard outline (0 0 0 2px #000000) or the soft ring 0 0 2px 2px rgba(0, 0, 0, 0.6) on focused form fields. Avoid blur or glass effects; the surface stack is Level 0 white page, Level 1 navy nav band, Level 2 hero photograph with gradient overlay.

Shapes

The shape language is Soft-Technical with small radii: 2px for micro elements, 3px for inputs and list items, and 5px for buttons and cards. Buttons use a 5px radius to feel approachable without becoming pill-shaped, while badges and social icons use full 9999px circles. The small radii reflect the rectangular geometry of racks and cabinets.

Action Elements Primary buttons use #0073a8 with white label-md text, 48px height and 12px horizontal padding, transitioning to #005177 over 200ms ease. Secondary "Contact us" uses a transparent background with a 1px #0073a8 border.

Containers &

Do's and Don'ts

**Do**

Do use #0073a8 for every primary call to action and interactive link so the accent stays consistent.
Do pair Assistant headings with Hoefler Text body copy at 22px to keep the editorial rhythm.
Do lead hero sections with a factual capability statement and a photograph of real infrastructure.
Do keep radii between 2px and 5px so the interface matches the rectilinear facility geometry.

**Don't**

Don't introduce gradients or glassmorphism effects; the brand relies on flat colour bands and photography.
Don't use #0073a8 for body text, which should stay #111111 or #767676.
Don't use pill-shaped buttons; reserve full radius for badges and icons only.
Don't use marketing superlatives in headlines; state the capability plainly.

---
version: alpha
name: Enovum Data Centers
description: >-
  Enovum integrates cabinets to hyperscalers, delivering speed and quality through a diverse and robust, vertically
  integrated data center infrastructure with 24/7 remote hands support.
logo:
  src: https://www.enovumdc.com/wp-content/uploads/2021/09/cropped-favicon-2-180x180.png
colors:
  surface: '#ffffff'
  surface-dim: '#e9edf1'
  surface-bright: '#ffffff'
  surface-container-lowest: '#ffffff'
  surface-container-low: '#f6f7f8'
  surface-container: '#f0f2f4'
  surface-container-high: '#e6e9ec'
  surface-container-highest: '#d9dde2'
  on-surface: '#111111'
  on-surface-variant: '#111111'
  inverse-surface: '#111111'
  inverse-on-surface: '#ffffff'
  outline: '#767676'
  outline-variant: '#cccccc'
  surface-tint: '#0073a8'
  primary: '#0073a8'
  on-primary: '#ffffff'
  primary-container: '#005177'
  on-primary-container: '#ffffff'
  inverse-primary: '#5bc0de'
  secondary: '#005075'
  on-secondary: '#ffffff'
  secondary-container: '#bfdcea'
  on-secondary-container: '#005075'
  tertiary: '#5cb85c'
  on-tertiary: '#111111'
  tertiary-container: '#5cb85c'
  on-tertiary-container: '#111111'
  error: '#d9534f'
  on-error: '#111111'
  error-container: '#f8d7da'
  on-error-container: '#721c24'
  primary-fixed: '#0073a8'
  primary-fixed-dim: '#005177'
  on-primary-fixed: '#ffffff'
  on-primary-fixed-variant: '#bfdcea'
  secondary-fixed: '#005075'
  secondary-fixed-dim: '#32373c'
  on-secondary-fixed: '#ffffff'
  on-secondary-fixed-variant: '#bfdcea'
  tertiary-fixed: '#5cb85c'
  tertiary-fixed-dim: '#5bc0de'
  on-tertiary-fixed: '#111111'
  on-tertiary-fixed-variant: '#ffffff'
  background: '#ffffff'
  on-background: '#111111'
  surface-variant: '#f0f2f4'
typography:
  display:
    fontFamily: Assistant
    fontSize: 47px
    fontWeight: 600
    lineHeight: 47px
    letterSpacing: '-0.94px'
  headline-lg:
    fontFamily: Assistant
    fontSize: 36px
    fontWeight: '600'
    lineHeight: 42px
    letterSpacing: '-0.01em'
  headline-md:
    fontFamily: Assistant
    fontSize: 28px
    fontWeight: '600'
    lineHeight: 34px
  title-lg:
    fontFamily: Assistant
    fontSize: 22px
    fontWeight: '600'
    lineHeight: 30px
  body-lg:
    fontFamily: Hoefler Text
    fontSize: 22px
    fontWeight: '400'
    lineHeight: 39.6px
  body-md:
    fontFamily: Hoefler Text
    fontSize: 22px
    fontWeight: 400
    lineHeight: 39.6px
  label-md:
    fontFamily: Assistant
    fontSize: 16px
    fontWeight: '400'
    lineHeight: 24px
    letterSpacing: 0.05em
  label-sm:
    fontFamily: Assistant
    fontSize: 14px
    fontWeight: '400'
    lineHeight: 20px
    letterSpacing: 0.05em
rounded:
  sm: 2px
  DEFAULT: 3px
  md: 3px
  lg: 5px
  xl: 6px
  full: 9999px
spacing:
  unit: 8px
  xs: 8px
  sm: 10px
  md: 12px
  lg: 16px
  xl: 20px
  2xl: 32px
  gutter: 20px
  container-max: 1140px
elevation:
  sm: 0 0 2px 2px rgba(0, 0, 0, 0.6)
  md: '0 0 0 2px #000000'
  lg: 0 0 0 0 rgba(0, 0, 0, 0)
layout:
  containerMaxWidth: 1140px
components:
  button-primary:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.label-md}'
    rounded: '{rounded.lg}'
    padding: '{spacing.md}'
    height: 48px
  button-primary-hover:
    backgroundColor: '{colors.primary-container}'
    textColor: '{colors.on-primary-container}'
  button-secondary:
    backgroundColor: transparent
    textColor: '{colors.primary}'
    typography: '{typography.label-md}'
    rounded: '{rounded.lg}'
    padding: '{spacing.md}'
    height: 48px
  button-secondary-hover:
    backgroundColor: '{colors.surface-container-high}'
  nav-link:
    backgroundColor: transparent
    textColor: '#ffffff'
    typography: '{typography.label-md}'
    padding: '{spacing.lg}'
  nav-link-hover:
    backgroundColor: '{colors.primary-container}'
    textColor: '{colors.on-primary-container}'
  card:
    backgroundColor: '{colors.surface-container-lowest}'
    rounded: '{rounded.lg}'
    padding: '{spacing.xl}'
  card-hover:
    backgroundColor: '{colors.surface-container-high}'
  input-field:
    backgroundColor: '{colors.surface-container-lowest}'
    textColor: '{colors.on-surface}'
    typography: '{typography.body-md}'
    rounded: '{rounded.DEFAULT}'
    padding: '{spacing.sm}'
  list-item:
    backgroundColor: transparent
    rounded: '{rounded.md}'
    padding: '{spacing.sm}'
  list-item-hover:
    backgroundColor: '{colors.surface-container-high}'
    textColor: '#111111'
  badge:
    backgroundColor: '{colors.secondary-container}'
    textColor: '{colors.on-secondary-container}'
    typography: '{typography.label-sm}'
    rounded: '{rounded.full}'
    padding: '{spacing.xs}'
---

## Overview

## Colors

## Typography

## Layout

## Elevation & Depth

## Shapes

### Action Elements
Primary buttons use #0073a8 with white label-md text, 48px height and 12px horizontal padding, transitioning to #005177 over 200ms ease. Secondary "Contact us" uses a transparent background with a 1px #0073a8 border.

### Containers &

## Do's and Don'ts

**Do**
- Do use #0073a8 for every primary call to action and interactive link so the accent stays consistent.
- Do pair Assistant headings with Hoefler Text body copy at 22px to keep the editorial rhythm.
- Do lead hero sections with a factual capability statement and a photograph of real infrastructure.
- Do keep radii between 2px and 5px so the interface matches the rectilinear facility geometry.

**Don't**
- Don't introduce gradients or glassmorphism effects; the brand relies on flat colour bands and photography.
- Don't use #0073a8 for body text, which should stay #111111 or #767676.
- Don't use pill-shaped buttons; reserve full radius for badges and icons only.
- Don't use marketing superlatives in headlines; state the capability plainly.

Edit, then copy or download.