WhiteFiber

Overview

WhiteFiber is an enterprise AI infrastructure provider selling AI-optimized colocation, turn-key private AI cloud and multi-year reserved GPU capacity to neoclouds and enterprises. The aesthetic movement is Industrial Operational Minimalism: a near-black navy canvas (#081117 to #1c242a), engineering photography of live data-center halls, and a single saturated orange signal (#e45e1b) that marks every decision point. The emotional response is controlled confidence, the feeling of a well-run facility rather than a hype-driven AI brand.

Tone is declarative, specification-led and unhurried. Sentences name concrete properties (predictable performance, operational governance, enterprise-grade SLAs) rather than adjectives. Example sentence: "Purpose-built AI infrastructure delivered via AI-optimized colocation, with reserved GPU capacity held for multi-year terms."

Colors

Primary (#e45e1b) is reserved for calls to action, the announcement strip gradient, the hero CTA block and focus/active states; its pressed state is #ff875b and its hover is #af4b1a. Secondary (#97d6ed) is a cool cyan used sparingly for data highlights and informational accents, with #425b76 as its container. Tertiary (#fab18e) is a peach tint used for badges and the nav hover underline. Surfaces step from #081117 (page background) to #1c242a (navigation glass base) to #2c353d (cards and code blocks). Light sections use #ffffff and #f3f7f8 with dark text #333333 (headline) and #2c353d. Never apply the orange to body text or large surfaces other than the single hero CTA block; it must remain the one warm signal on a cool canvas.

The navigation uses rgba(28,36,42,0.5) with blur(50px) and a

Typography

The system pairs Figtree for display, headings and labels with Manrope for long-form body copy, and Lato is loaded for embedded forms and the cookie layer. Display is 46.23px at weight 600 with a 52.25px line height (ratio 1.13) for the hero H1, which is set in white on the dark photograph. Headline-md is 40.9px at weight 500. Body runs at 19.63px Manrope weight 400 with 29.45px line height (ratio 1.5). Labels such as the primary CTA use Figtree 13.51px weight 600 with letter-spacing 0.569px (0.042em), and the secondary navigation labels use 10.67px with letter-spacing 1.28px (0.12em) in uppercase. Apply text-transform uppercase and letter-spacing 0.12em to navigation and micro-labels only; headlines keep normal tracking.

Layout

The layout is a fluid 12-column grid bounded by a 1440px container-max, with html font-size scaling from 1rem at 1440px to a 1.108vw calc between 992px and 1440px, so all rem units grow with the viewport. Sections are separated with lg (32px) and xl (40px) spacing and hairline 1px dividers rather than tinted panels. The hero splits into a 320px-wide orange CTA block on the left and a body paragraph starting at roughly 40% of the width. Gutter is md (24px). Whitespace is generous around headings but dense inside data tables, where cells use 1rem (16px) padding.

Elevation & Depth

Depth is conveyed mainly through photography and 1px hairlines rather than heavy shadows. Level 1 (base): #081117 canvas. Level 2 (navigation and dropdowns): background rgba(28,36,42,0.5), backdrop-filter: blur(50.2px), border-bottom 1px solid rgba(217,217,217,0.45), shadow 0 8px 28px rgba(0,0,0,0.28). Level 3 (cards and code blocks): #2c353d with box-shadow 0 0 0 1px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.1). Focus rings use 0 0 3px rgba(51,51,51,0.2).

Shapes

Shape philosophy is Engineered Softness: rounded forms appear where a human touches the interface, and sharp edges where the layout is structural. The hero CTA is a square-cornered orange block (0px radius) to echo rack geometry. Buttons in the nav and forms use 12.5rem (200px) full pill radius for primary actions and 1rem (16px) on the secondary cards. Cards use 1.5rem (24px) radius, code blocks 24px, table containers 1rem (16px) and inputs 0.25rem (4px) with a single bottom border.

Components

Action Elements The primary CTA is an orange (#e45e1b) pill with 0.88rem by 1.75rem padding and 1.125rem Figtree 700 text. Its hover transitions border-color and background-color over 200ms ease to #af4b1a. Secondary actions are white-filled rectangles (CONTACT US) at 8px radius with 16px horizontal padding; hover shifts to #fddccc.

Containers & Surfaces Cards sit on #2c353d with a 24px radius and 32px padding. Hovering a card lifts its surface to #f7f8fa on light sections. Navigation dropdowns use a 50px backdrop blur and transition transform 400ms ease.

Inputs & Interaction Inputs are transparent with a single 1px bottom border in #081117 and 40px height; focus replaces the border colour with the orange primary and transitions over 300ms. Checkbox chips use a 1px #000 borde

Do's and Don'ts

**Do**

• Do reserve #e45e1b for CTAs, active states and the hero CTA block so it always signals action.
• Do set the hero H1 in Figtree 600 at 46.23px over a darkened photograph with a dark overlay of at least 50% opacity.
• Do use 1px hairline dividers and rgba(217,217,217,0.45) borders to structure dense content.
• Do keep body copy in Manrope 19.63px with 29.45px line height for long-form readability.

**Don't**

• Don't apply the orange to body text, large background panels or decorative gradients beyond the announcement strip.
• Don't use drop shadows heavier than 0 8px 28px rgba(0,0,0,0.28) on any element.
• Don't round the hero CTA block; its square corners are part of the rack-geometry identity.
• Don't mix more than two font families within one section.