---
version: alpha
name: Backblaze — Luminous Infrastructure
colors:
  navy: "#000033"
  primary: "#E20626"
  white: "#FFFFFF"
  offwhite: "#FAF9F8"
  muted: "#4C4C6E"
typography:
  hero:
    fontFamily: "Spacegrotesk, sans-serif"
    fontSize: 75px
    fontWeight: 500
    lineHeight: 1.2
  product-title:
    fontFamily: "Spacegrotesk, sans-serif"
    fontSize: 48px
    fontWeight: 500
    lineHeight: 85px
  card-title:
    fontFamily: "Spacegrotesk, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.25
  body:
    fontFamily: "Dmsans, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.75
spacing:
  mobile-gutter: 24px
  card-inset: 24px
  action-y: 10px
  action-x: 20px
rounded:
  card: 4px
  pill: 50px
components:
  navigation:
    textColor: "{colors.white}"
    backgroundColor: "{colors.navy}"
  product-title:
    textColor: "{colors.navy}"
    typography: "{typography.product-title}"
  product-copy:
    textColor: "{colors.muted}"
    typography: "{typography.body}"
  sales-action:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.white}"
    rounded: "{rounded.pill}"
  light-section:
    backgroundColor: "{colors.offwhite}"
  solution-card:
    typography: "{typography.card-title}"
    rounded: "{rounded.card}"
---

## Overview

Backblaze turns infrastructure into a vivid visual narrative: a midnight-blue masthead, luminous burgundy/red hero, oversized offset headline, white pill action and a sequence of pastel-gradient product comparisons. Small isometric servers, chips and storage devices make technical offerings tangible. Three-column link cards and customer proof organize a long enterprise landing page without replacing the visual story with a dashboard mockup.

Observed at 1440px desktop and 390 × 844 mobile in light color preference. The full desktop page is 8516px tall. Computed styles provide exact values below; gradient positions and decorative proportions are visual estimates. Only the mobile opening was visually inspected. No hover, expanded menus, signup or carousel interaction was tested. Logos, quotations and performance claims are source content, not reusable evidence for another company.

## Colors

Use navy #000033 for navigation, footer and major text on light panels. The measured red #E20626 supplies primary sales-action fills and the flame identity. White is the high-contrast text and button surface on dark sections; offwhite #FAF9F8 underlies several light sections. Muted copy uses #4C4C6E.

The hero is not a flat red block: the screenshot has dark plum at the top/right and a red glow rising from the lower left. Middle product panels are pale, with pink near the bottom-left and lavender-blue at the right. These gradient descriptions are visual observations, not recovered CSS stops. Keep the pale panel text navy and the dark hero text white. Violet/blue technical illustration accents should remain subordinate to red conversion accents.

## Typography

Display headings use the CSS family Spacegrotesk, with sans-serif fallback; body and controls use Dmsans. The desktop hero computes to 75px, weight 500, with 90px line-height. It is visually a two-line headline whose second line is offset right; the sampled heading box does not describe all painted text because the composition extends beyond that box. Follow the screenshot for this special hero alignment.

Large product titles compute to 48px/85px, weight 500, with deliberately open vertical rhythm. Solution-card headings use 20px/25px and weight 600. Body paragraphs use 16px/28px. Desktop navigation is approximately 15px, weight 600; utility links are about 13.33px.

At 390px the hero is 55px with the same 90px leading and wraps into five very tall lines. This is an observed design tradeoff, not a recommendation to force every mobile hero to be this tall. Product headings compute to 48px/60px on mobile. Preserve the medium-weight geometric voice rather than switching to condensed ultra-bold display type.

## Layout

Desktop navigation has a small utility row above the main logo/menu/action row. The hero uses a spacious dark canvas with an offset headline, compact description and single white Run a PoC pill. A faded logo strip and a large customer quote sit below, followed by three translucent solution cards.

Product sections use two nearly equal columns, approximately 472px wide in sampled text areas, with content anchors around x=224px and x=744px. A fine warm vertical rule separates the illustration/copy/action column from the oversized statement column. Alternate which side carries the large title. The main interior width is roughly 1040px by visual estimate. Later sections include a pale quote-and-metrics block, integration logos, a dark three-card row, a backup product panel, a white three-column benefits grid, award marks and a large gradient closing action.

At 390px the utility links and desktop menu disappear, leaving logo and hamburger. Hero content is centered with a measured 24px outer gutter and 342px heading width. The first action is near the bottom of the 844px opening viewport, so avoid claiming an immediate above-the-fold conversion advantage. Sampled solution-card widths become 342px with 24px padding, but lower mobile sections were not visually reviewed. No horizontal document overflow was detected.

## Elevation & Depth

Depth comes from luminous color fields and isometric illustrations, not heavy card shadows. Dark solution cards are subtly lighter than their backdrop and have fine boundaries. Pale product panels stay mostly flat; the technical objects carry their own small cast shadows. Do not add a universal floating-card shadow or glass blur to the whole page. Exact gradient stops and shadow recipes were not measured.

## Shapes

Primary actions are pills with measured 50px radius and 10px vertical / 20px horizontal anchor padding. Solution cards use a modest 4px radius and 24px inset, keeping large information regions box-like. Arrow marks are angular up-and-right strokes. The contrast between pill controls, thin dividing rules and faceted illustrations is central to the style.

## Components

- Navigation: dense but orderly two-row desktop structure, white text over navy, red Contact Sales pill and a quieter Start Free link. Mobile uses a compact single row. Expanded menus are uninspected.
- Hero: oversized, staggered geometric heading, short support copy and white/red action. Do not confuse the sampled anchor's inherited gray text style with the visibly red child label.
- Logo strip: white/gray customer marks with varying opacity. The captured sequence is one state; no rotation timing is inferred.
- Solution card: icon, 20px heading, explanatory paragraph and short arrow link on a translucent dark tile.
- Product split: technical illustration plus paragraph and action on one side, giant navy statement on the other, separated by a fine vertical line.
- Benefits grid: pale violet icon tiles, navy titles, muted copy and red text-arrow links. Keep the icon/titles consistently aligned across three desktop columns.
- Closing conversion band: return to saturated red/navy light effects, a centered white headline and a small white pill, followed by the dark footer.
- Consent affordance: a small green cookie-settings launcher remains in the bottom-left; it is not a blocking consent dialog and is not part of the brand's design system.

## Do's and Don'ts

- Do alternate dark storytelling sections with pale, readable product panels.
- Do use real technical illustrations to explain storage rather than decorative AI blobs.
- Do distinguish the pill conversion controls from rectangular information cards.
- Do audit the tall mobile heading when adapting this pattern to other copy.
- Don't treat sampled inherited anchor colors as the painted child-label colors.
- Don't transplant customer logos, quoted outcomes or performance numbers to another brand.
- Don't invent dropdown, carousel or hover behavior from static screenshots.