OVH Brand Design System Deep Dive

1. Brand Overview

The OVH design language on proof.ovh.net is stripped down, almost brutally functional. This isn’t a marketing-heavy consumer brand site — it’s a utilitarian resource, and the design reflects that. No gradients, no ornamental flourishes. The palette is minimal. Typography is basic. Layout spacing is mechanical.

This tells me a lot about their design philosophy: clarity over aesthetics, speed over embellishment, and absolute adherence to a functional grid. OVH is a tech infrastructure brand — they sell hosting, servers, and network services. This kind of audience doesn’t want to be distracted by visual fluff; they want quick access to the data and tools. The design system supports that by using a flat interface, strong primary blue, and very few visual layers.

There’s almost no distinctive logo work on the page. In fact, the logo wasn’t extracted from the design data, which is unusual — the favicon links to the main OVH site, but the test environment here is stripped bare. That reinforces the sense that this is a utility subdomain, not the main marketing site.

Typography is telling: Source Sans Pro for certain links, but otherwise we see Times — not a custom or modern sans-serif, just the default serif. This is rare in tech brands, and it’s probably incidental (this is a testing tool, not a marketing site). Still, the presence of Times means any hierarchy relies entirely on spacing and color, not typeface personality.

Spacing is clean and predictable — an 8px base grid. No odd values. Everything snaps to that rhythm. There are no breakpoints defined in the extracted data, which suggests fixed or minimal responsive behavior here. No border radius, no shadows. This is pure flat design.

If you’re designing for OVH — or aligning with this aesthetic — you have to accept: this is minimal to the point of austerity. It works because the audience is comfortable with barebones presentation. They’re here for throughput, not beauty. The blue (#000e9c) is the only real brand stamp, and it’s used sparingly but with confidence.

2. Color System

2.1 Primary Colors

The heavy hitter here is #000e9c — a deep, saturated blue. It’s almost “navy” but with a sharper, more digital feel. It shows up in the main logo and header wrapper. This kind of blue in tech branding often signals trust, stability, and professionalism. It’s darker than the common SaaS blues (#007bff, #0055cc), which makes it feel more enterprise-focused.

This works because OVH is an infrastructure provider. They’re not trying to feel playful or startup-ish; they want to say “your data is safe here.” Compared to competitors like AWS (orange/gray) or Azure (bright blue), OVH’s blue is more serious, less marketing, more engineering.

2.2 Complete Palette

Note: #0000ee is the browser default link blue, extracted from link styles.

2.3 Color Relationships

This palette is minimal: one primary, one light accent, one neutral, one functional link color. Contrast is high between primary blue and white — easily WCAG AAA for normal text. The light gray #f2f2f2 against black or blue text also passes comfortably.

The link blue (#0000ee) is a default, which is jarringly different from the primary brand blue. In a marketing site, I’d recommend replacing that with a branded variant to integrate it visually. Here, it’s fine — this is a testing tool, so usability trumps branding.

2.4 Usage Guide

• Primary Deep Blue (#000e9c) — Use for headers, brand marks, and high-importance static elements. Avoid overusing it for text; it’s too dark for large text blocks.
• Light Sky Blue (#bef1ff) — Good for highlighting sections or subtle data emphasis. Works well with white background and primary blue text.
• Light Gray (#f2f2f2) — Use for background separation and content grouping. Avoid pairing with light blue — low contrast.
• Link Blue (#0000ee) — Functional only. Don’t recolor unless you’re building a branded marketing page.

Avoid mixing the light sky blue and light gray in the same visual layer unless you’re intentionally creating subtle hierarchy — they’re close in tonal value.

3. Typography

3.1 Font Families

Two primary families appear:

• Source Sans Pro — Used for certain link contexts. No custom weights beyond 400. No Google Fonts or Adobe integration detected, suggesting self-hosted or system fallback.
• Times — Default serif, used for headings (H1) and some links. This is unusual in digital-first branding; it reads as “unstyled” but fits the functional vibe.

No variable fonts. No custom letter-spacing or transforms. This is raw, browser-default typography with minimal intervention.

3.2 Type Scale

No larger heading sizes extracted — H1 here is the same as body text, which tells you the hierarchy is purely spacing-based.

3.3 Hierarchy

The hierarchy here doesn’t rely on font size changes. That’s rare. Instead, spacing and color do the heavy lifting — headers may just be bold or colored differently. This keeps the visual weight consistent, but it’s not great for scannability in marketing contexts. In a utility tool, it’s fine.

4. Spacing & Layout

4.1 Spacing Scale

Base unit: 8px. This is the golden standard for modular design.

The frequency shows most spacing is 16px — classic comfortable padding. 60px is rare, probably for major container margins.

4.2 Layout

No breakpoints in extracted data — likely fixed width or minimal responsive scaling. This aligns with a technical tool that doesn’t need marketing-grade responsiveness.

5. Visual Elements

• Border Radius: None. All corners are sharp. This is deliberate — flat, non-playful, engineering feel.
• Shadows: None. Flat surfaces only. Depth is created via color separation.
• Borders/Dividers: Not explicitly extracted, but the absence of shadows means borders are the main separators.

This is a pure flat design system — no skeuomorphic elements.

6. Components

6.1 Buttons

No button styles extracted — likely not present in the page. This means the design system here is link-driven, not button-driven.

6.2 Links

Default link style:

• Color: #0000ee
• Text decoration: underline
• Weight: 400
• No hover styles extracted — possibly defaults or minimal changes.

This is raw HTML anchor styling, unapologetically default.

6.3 Forms

No input styles extracted — likely no forms present in this context.

6.4 Cards

No card components detected — consistent with a utility tool.

7. Design Tokens

:root {
  /* Colors */
  --color-primary-deep-blue: #000e9c;
  --color-light-sky-blue: #bef1ff;
  --color-light-gray: #f2f2f2;
  --color-link-blue: #0000ee;

  /* Typography */
  --font-source-sans-pro: "SourceSansPro", sans-serif;
  --font-times: "Times", serif;
  --font-weight-regular: 400;
  --font-size-link-lg: 20px;
  --font-size-link-sm: 16px;
  --line-height-link-lg: 1.75;

  /* Spacing */
  --space-8: 8px;
  --space-16: 16px;
  --space-20: 20px;
  --space-60: 60px;

  /* Border radius */
  --radius-none: 0;

  /* Shadows */
  --shadow-none: none;
}

8. AI Coding Assistant Prompt

# OVH Design System Specification

You are an OVH design expert. Build UIs matching their visual language exactly.

## Brand Context
OVH's visual style is utilitarian, flat, and engineering-focused. It prioritizes clarity and function over decoration. Spacing is strict, type is browser-default or minimal, and the primary brand presence comes from a deep blue.

## Color Palette
- Primary Deep Blue: #000e9c — Headers, brand marks, main logo background
- Light Sky Blue: #bef1ff — Accent backgrounds, subtle highlights
- Light Gray: #f2f2f2 — Neutral background, separators
- Link Blue: #0000ee — Default hyperlinks

## Typography
- Source Sans Pro (sans-serif) — Links at 20px, weight 400, line height 1.75
- Times (serif) — Headings and body at 16px, weight 400
- No variable fonts, no custom letter-spacing

| Level | Font           | Size  | Weight | Line Height | Use For       |
|-------|----------------|-------|--------|-------------|---------------|
| Link-lg | Source Sans Pro | 20px  | 400    | 1.75        | Prominent links |
| Link-sm | Times           | 16px  | 400    | default     | Standard links  |
| H1     | Times           | 16px  | 400    | default     | Page headings   |

## Spacing & Grid
Base: 8px grid
Scale: 8px, 16px, 20px, 60px

Map:
- 8px — tight gaps
- 16px — default padding
- 20px — medium component spacing
- 60px — large section margins

## Border Radius
- none: 0px — all components

## Shadows & Depth
Flat design — no shadows. Use color blocks and borders for separation.

## Component Specifications

### Navigation Links
Default:
```css
a {
  color: #0000ee;
  text-decoration: underline;
  font-weight: 400;
}
```
Hover: no style change unless overridden.

### Cards
Not in current system — use flat backgrounds with spacing tokens.

### Input Fields
No specific styles — browser defaults apply.

## Layout & Responsive Rules
- Fixed or minimal responsive behavior
- No breakpoints defined — design for desktop utility

## Interaction Rules
- No motion or transitions defined
- Focus indicators: browser defaults

## DO List
- Use only colors from palette
- Maintain 8px grid alignment
- Keep corners square
- Use Source Sans Pro for larger links
- Use Times for headings and small links

## DON'T List
- Add shadows
- Round corners
- Introduce unapproved colors
- Change link underline behavior without reason

## Code Examples

### Large Link
```css
.link-lg {
  font-family: "SourceSansPro", sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.75;
  color: #0000ee;
  text-decoration: underline;
}
```

### Section Container
```css
.section {
  padding: 60px;
  background-color: #f2f2f2;
}
```

### Accent Background
```css
.accent {
  background-color: #bef1ff;
  padding: 16px;
}
```

9. Summary

TL;DR — OVH’s proof site is pure utility: deep blue brand header, default link styling, serif headings, strict 8px spacing grid, no radius, no shadows. It’s flat, functional, and unapologetically minimal.

Brand Keywords:

• enterprise-minimal
• utilitarian-flat
• tech-functional
• grid-disciplined
• austere-color