Dropbox — Black Six-Column Resource Footer

---
version: alpha
name: Dropbox — Black Six-Column Resource Footer
colors:
  ink: '#F7F5F2'
  sample-1: '#000000'
typography:
  heading:
    fontFamily: '"Atlas Grotesk Web", "Atlas Grotesk", AtlasGrotesk, -apple-system,
      BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif,
      "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
    fontSize: 20px
    fontWeight: 500
    lineHeight: 30px
  body:
    fontFamily: '"Atlas Grotesk Web", "Atlas Grotesk", AtlasGrotesk, -apple-system,
      BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif,
      "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
    fontSize: 14px
    fontWeight: 400
    lineHeight: 22px
---

## Overview
An isolated Dropbox black footer with six link categories, white typography, social icons and a separated language selector. Inspected on 2026-10-03 at 1440px desktop and 390px mobile. The screenshot isolates `footer`; bounds were measured after a warm-up render and checked again after capture.

## Colors
Opaque token values come from computed CSS samples in this reference. The sampled-canvas token, when present, is a screenshot pixel sample. Gradients, alpha fills, photography and artwork are described visually rather than reduced to a single invented color.

## Typography
The computed heading sample (Dropbox) uses "Atlas Grotesk Web", "Atlas Grotesk", AtlasGrotesk, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", 20px, weight 500, leading 30px. Supporting text uses "Atlas Grotesk Web", "Atlas Grotesk", AtlasGrotesk, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" at 14px / 22px. The matching mobile heading-category sample is 16px / 24px. These are local computed samples, not a complete universal type scale. Use properly licensed fonts or appropriate fallbacks.

## Layout
Desktop presents Dropbox, Products, Features, Support, Resources and Company as six aligned columns. At 390px the groups form two columns across three stacked rows. Social marks and the language selector sit beneath, with generous vertical spacing. Complete footer evidence is available at both widths. Desktop image: 1440 × 642 px. Mobile viewport: 390 × 844 px; isolated mobile components may be taller than the viewport. Two measured widths do not establish exact CSS breakpoints.

## Elevation & Depth
The footer is a flat black surface with no card elevation. A short subtle divider separates social controls from the locale control.

## Shapes
Simple text links, small social glyphs and an inline chevron keep the information architecture dense without pill or card wrappers.

## Components
Six navigation groups, X/Facebook/YouTube marks, divider and English (United States) locale control. Links were inspected visually but destinations, focus and language switching were not exercised.

## Do’s and Don’ts
Keep category hierarchy and generous line spacing even on small screens. Do not convert the observed two-column mobile layout into unverified accordion behavior. Provide useful labels, visible focus and reduced-motion alternatives when adapting; these are recommendations rather than a source accessibility audit.