OVHcloud DESIGN.md

Design System Inspiration of OVHcloud

Overview

Visual Theme & Atmosphere

OVHcloud provides public and private cloud, shared hosting and dedicated servers, alongside domain names and communications services. Its history begins in 1999, when Octave Klaba founded OVH while studying at ICAM in Lille to meet a community need for internet hosting. The company describes its mission through openness, trust and customers' freedom to build. Company, history.

The 2019 adoption of the OVHcloud name made the company's cloud focus explicit. Its announcement connects the identity change to international growth and an open, reversible cloud. Today's measured homepage puts domain registration and hosting beside Public Cloud, managed Kubernetes, databases, data pipelines and AI projects. This is an infrastructure catalogue with both introductory offers and technical product language. Rebrand announcement, homepage.

The visual signature is a deep blue utility bar and hero, cyan accents, white content areas and compact semibold actions. Filled blue buttons darken on hover; the white hero action turns pale cyan. The captured hero combines an illustrated robot with a domain offer. These are observations of the live marketing surface, rather than claims about the intent behind every brand asset.

The measured homepage is the French edition (ovhcloud.com/fr/, HTML lang="fr"). OVHcloud also publishes ODS as assets, guidelines and components for consistent experiences across its products; this reference's values come from the homepage capture, without importing unmeasured console components. Official ODS repository.

Brand Narrative

The company's own history connects community hosting in 1999 to the OVHcloud name in 2019. The name announcement frames cloud infrastructure as open and reversible, while the current catalogue brings domains, servers and data/AI services together. For a builder, the useful visual continuity is the blue/cyan palette, semibold actions and clear product hierarchy visible on this homepage. History, name announcement, homepage.

Principles

The company explicitly describes its SMART cloud through simplicity, multiple locations, accessibility, reversibility and transparency. These are company principles, rather than inferred component rules. Company.

For this measured surface, practical design guidance is to separate the primary action from text actions, preserve visible label typography, and distinguish a transparent interaction wrapper from its painted child.

Personas

No persona research was verified.

Colors

Preserve the two ink values: the measured card paragraphs use #4d5693, while the input and --ods-color-text use #4d5592. The paragraph census contains primary blue ×25, prose ink ×20 and white ×10; the most frequent paragraph colour alone does not identify a universal body colour.

The census contains 1,314 computed root properties, including 1,308 --ods-* entries, and 1,528 declared names, including 1,512 --ods-* entries. These counts include aliases and state declarations, rather than that many independent visual decisions. The complete lists and ownership decisions are in the research report.

Typography

Live-loaded: the census names Source Sans Pro at 400, 600 and 700 normal, plus additional faces recorded as normal normal and normal italic. The typography family token uses this live-loaded CSS family. Heading and button declarations also begin with that family.

Official product-use statement: no opened typography document independently establishes a font for every OVHcloud product. The ODS repository describes its cross-product scope, without supplying such a statement in the page inspected.

Official distributed assets: no separate official font kit or font licence was opened. As live delivery evidence, the stylesheets expose first-party @font-face sources: relative WOFF2 paths under ovh_theme_patternlab/dist/fonts/source-sans-pro/, and /_next-menu/_next/static/media/source-sans3-variable-custom.b05291b0.woff2 with an italic companion. The latter filename is recorded under the CSS family Source Sans Pro; it does not justify renaming the measured family. The census does not resolve whether a local(...) source or a URL supplied each face.

Declared-only: Source Code Pro has normal and italic @font-face rules but no loaded face. Source Sans Pro 300 normal and the separate fixed 400 italic rule are also absent from the loaded-face list. They receive no specimen or family token. The raw body declaration is a system fallback stack; it is not evidence that a system face is the brand face.

Unresolved: font licensing, exact downloaded resource selection and typography on the signed-in console. Substitute: none chosen. Loaded icons and ODS Icon are icon fonts and are excluded from text-family tokens.

Layout

At 1440×1000, the header occupies two horizontal bands: a 46px utility row and a 55px product-navigation row. The computed --ovh-header-height is 101px. The homepage then presents a promotional hero, a horizontal offer-card strip, domain search, product-category links and explanatory cards. These relationships are visible in the capture; they are not a measured mobile layout.

The Public Cloud offer link measures 428px wide. The main domain input measures 669.9px wide. Treat these as desktop instances, rather than universal fixed widths. Keep the measured 16px horizontal action padding and 8px/16px input padding when reproducing those controls.

Responsive Behavior

Only the 1440×1000 desktop layout was measured; mobile, touch and breakpoint transitions remain unverified.

Elevation & Depth

The sampled product controls are flat: all six outer elements have no box shadow. White card tiles use thin cyan borders. First-party root declarations provide radii of 2px, 4px, 8px and 16px (--ods-border-radius-xs/sm/md/lg); the filled action, white action and input actually measure 8px. The card anchor and text/navigation actions measure 0px.

Motion & Easing

The filled CTA and white hero link compute to transition: all 0.1s ease-in-out 0s. The secondary action, Webmail link, input and card anchor compute to all 0s ease 0s. These are element-level strings, not a global animation specification; the secondary label's underline changes despite its outer button's zero-duration transition. The carousel ancestor transform observed during card hover is excluded from an interaction-motion prescription.

Components

Six product controls were inspected with pointer hover and a real Tab walk. Both covering dialogs were dismissed with their reject/close controls. Hover snapshots matched :hover when read; later crop validation lost that match, so the screenshots do not independently prove the hover appearance. Pressed states were unmeasured for every control.

The filled and white actions have a 2px transparent border and no shadow. All six outer controls report box-shadow: none. The card's visible rounded tile is a child of its square anchor; its radius was not independently measured, so the anchor's zero radius must not be used as a tile-radius prescription.

The four action/navigation components are harvested. The input stays in prose because its only focus change is the browser ring. The card stays in prose because the hover pass also captured carousel movement and its blur comparison contains later focus on the nested button.

States

The primary action darkens on hover and keyboard focus. The white hero link becomes pale cyan on hover and keyboard focus. Webmail changes from pale cyan to lighter blue with an underline on hover, and to white on keyboard focus. The secondary text action darkens and expands its underline on hover; keyboard focus produced no computed change within the compared scope.

The domain input has no computed hover change and only a browser auto focus ring. The card has a raw child-background hover change, a browser ring and a blur comparison affected by subsequent nested-button focus. No authored focus-ring token was established. The background/text focus observations remain here in prose; no focus token encodes the browser ring.

All pressed observations are UNMEASURED because :active did not match while the pointer was held down. No disabled state was measured. The probe compares each control, its descendants and pseudo-elements, and three ancestor levels; it cannot establish the absence of changes outside that scope.

Do's and Don'ts

• Use #0050d7 for filled actions and #000e9c for their measured hover treatment.
• Place the white hero action on the blue hero and use pale cyan for its measured hover.
• Set visible action labels to Source Sans Pro 16px/600; preserve the distinction from the outer element's 14px/600 declaration.
• Keep cyan rules and the two observed prose/input ink values distinct.
• Treat transparent link wrappers and their painted children separately.
• Keep unmeasured pressed states, browser auto rings and carousel transforms out of brand state tokens.

Voice & Tone

The French surface uses direct task verbs: “Rechercher”, “En profiter” and “En savoir plus”. Its company page pairs technical service descriptions with openness, sustainability and freedom. Reproduce this combination of concrete tasks and explicit service benefits; no broader editorial style guide was verified. Company, homepage.

Agent Prompt Guide

“Build an OVHcloud-style infrastructure offer with a white surface, #00185e headings and #4d5693 prose. Use a 52px-high #0050d7 action with white Source Sans Pro 16px/600 label, 8px radius and 16px horizontal padding. Its measured hover background is #000e9c. For an action on the blue hero, use white at rest and #bef1ff on hover, keeping the label #0050d7.”

For a secondary text action, use a transparent background on white and a blue label. Its measured hover darkens the label and reveals a 2px underline made from a background gradient, expanding from zero to full width.