{
  "schema": "brand-kit@2",
  "palette": {
    "paper": "#FFFFFF",
    "surface": "#F7F5F2",
    "ink": "#1E1919",
    "ink_muted": "#736C64",
    "accent": "#0061FE",
    "on_accent": "#F7F5F2",
    "night": "#1E1919",
    "on_night": "#F7F5F2",
    "extras": [
      {
        "name": "azalea",
        "hex": "#CD2F7B",
        "role": "accent; also the \"Testimonial\" overline on the security panel cards (12px/700)",
        "prov": "published",
        "source": "https://brand.dropbox.com/color"
      },
      {
        "name": "pink",
        "hex": "#FFAFA5",
        "role": "accent (light); text on it is #892055",
        "prov": "published",
        "source": "https://brand.dropbox.com/color"
      },
      {
        "name": "crimson",
        "hex": "#9B0032",
        "role": "accent",
        "prov": "published",
        "source": "https://brand.dropbox.com/color"
      },
      {
        "name": "sunset",
        "hex": "#FA551E",
        "role": "accent; text on it is #4E0119",
        "prov": "published",
        "source": "https://brand.dropbox.com/color"
      },
      {
        "name": "rust",
        "hex": "#BE4B0A",
        "role": "accent",
        "prov": "published",
        "source": "https://brand.dropbox.com/color"
      },
      {
        "name": "tangerine",
        "hex": "#FF8C19",
        "role": "accent",
        "prov": "published",
        "source": "https://brand.dropbox.com/color"
      },
      {
        "name": "gold",
        "hex": "#9B6400",
        "role": "accent",
        "prov": "published",
        "source": "https://brand.dropbox.com/color"
      },
      {
        "name": "vivid-vargas",
        "hex": "#FAD24B",
        "role": "accent (light); text on it is #684505",
        "prov": "published",
        "source": "https://brand.dropbox.com/color"
      },
      {
        "name": "canopy",
        "hex": "#0F503C",
        "role": "accent",
        "prov": "published",
        "source": "https://brand.dropbox.com/color"
      },
      {
        "name": "lime",
        "hex": "#B4DC19",
        "role": "accent (light); text on it is #175641",
        "prov": "published",
        "source": "https://brand.dropbox.com/color"
      },
      {
        "name": "ocean",
        "hex": "#007891",
        "role": "accent",
        "prov": "published",
        "source": "https://brand.dropbox.com/color"
      },
      {
        "name": "zen",
        "hex": "#14C8EB",
        "role": "accent",
        "prov": "published",
        "source": "https://brand.dropbox.com/color"
      },
      {
        "name": "navy",
        "hex": "#283750",
        "role": "accent; the dark partner of Cloud",
        "prov": "published",
        "source": "https://brand.dropbox.com/color"
      },
      {
        "name": "cloud",
        "hex": "#B4C8E1",
        "role": "accent (light); text on it is Navy #283750",
        "prov": "published",
        "source": "https://brand.dropbox.com/color"
      },
      {
        "name": "plum",
        "hex": "#78286E",
        "role": "accent",
        "prov": "published",
        "source": "https://brand.dropbox.com/color"
      },
      {
        "name": "orchid",
        "hex": "#C8AFF0",
        "role": "accent (light); text on it is #682760",
        "prov": "published",
        "source": "https://brand.dropbox.com/color"
      },
      {
        "name": "pink-dark",
        "hex": "#892055",
        "role": "text on Pink #FFAFA5 (tonal pair)",
        "prov": "published",
        "source": "https://brand.dropbox.com/color"
      },
      {
        "name": "sunset-dark",
        "hex": "#4E0119",
        "role": "text on Sunset #FA551E (tonal pair)",
        "prov": "published",
        "source": "https://brand.dropbox.com/color"
      },
      {
        "name": "vivid-vargas-dark",
        "hex": "#684505",
        "role": "text on Vivid Vargas #FAD24B (tonal pair)",
        "prov": "published",
        "source": "https://brand.dropbox.com/color"
      },
      {
        "name": "lime-dark",
        "hex": "#175641",
        "role": "text on Lime #B4DC19 (tonal pair)",
        "prov": "published",
        "source": "https://brand.dropbox.com/color"
      },
      {
        "name": "orchid-dark",
        "hex": "#682760",
        "role": "text on Orchid #C8AFF0 (tonal pair)",
        "prov": "published",
        "source": "https://brand.dropbox.com/color"
      },
      {
        "name": "blue-hover",
        "hex": "#0057E5",
        "role": "primary button and nav button hover fill",
        "prov": "observed",
        "source": "https://www.dropbox.com/"
      },
      {
        "name": "focus-ring",
        "hex": "#428BFF",
        "role": "focus ring on every button and link: box-shadow 0 0 0 3px",
        "prov": "observed",
        "source": "https://www.dropbox.com/"
      },
      {
        "name": "announcement",
        "hex": "#DEEBFF",
        "role": "announcement bar ground (56px strip above the nav)",
        "prov": "observed",
        "source": "https://www.dropbox.com/"
      },
      {
        "name": "announcement-text",
        "hex": "#0044AF",
        "role": "announcement bar text and its two 24px icons",
        "prov": "observed",
        "source": "https://www.dropbox.com/"
      },
      {
        "name": "hairline",
        "hex": "#EDE9E3",
        "role": "1px line under the white nav, on light grounds",
        "prov": "observed",
        "source": "https://www.dropbox.com/"
      },
      {
        "name": "media-placeholder",
        "hex": "#EEE9E2",
        "role": "ground behind card images while they load (industry and article card media frames)",
        "prov": "observed",
        "source": "https://www.dropbox.com/"
      },
      {
        "name": "muted-on-dark",
        "hex": "#A09D9B",
        "role": "muted text on Graphite: rgba(247,245,242,0.6) flattened on #1E1919",
        "prov": "observed",
        "source": "https://www.dropbox.com/"
      },
      {
        "name": "panel-top",
        "hex": "#292C31",
        "role": "security panel gradient, top stop (linear-gradient #292C31 to #000000, top to bottom)",
        "prov": "observed",
        "source": "https://www.dropbox.com/"
      },
      {
        "name": "card-dark",
        "hex": "#1C1D21",
        "role": "testimonial cards inside the security panel (on its near-black lower half)",
        "prov": "observed",
        "source": "https://www.dropbox.com/"
      },
      {
        "name": "footer",
        "hex": "#000000",
        "role": "footer and locale strip ground; also the customer logos in the marquee",
        "prov": "observed",
        "source": "https://www.dropbox.com/"
      },
      {
        "name": "hairline-on-black",
        "hex": "#474644",
        "role": "footer divider: 1px rgba(142,139,135,0.5) on #000000",
        "prov": "observed",
        "source": "https://www.dropbox.com/"
      }
    ]
  },
  "typography": {
    "display": {
      "family": "Archivo",
      "weight": 650,
      "tracking": -0.02,
      "line_height": 1.2,
      "fallback_stack": "Arial, Helvetica, sans-serif",
      "width_axis": 112,
      "note": "Archivo \"wdth\" 112, \"wght\" 650, -0.02em for hero, feature and card titles (stands in for Sharp Grotesk 20 Medium 500). Wide section headlines: \"wdth\" 125, \"wght\" 400, 0.01em, set 2px larger. Calibrated 2026-10-29 on \"Less uploading. Less explaining. More doing.\" at 40px: Sharp Grotesk 20 Medium is 910.8px wide, ink 0.167 per glyph. Archivo \"wdth\" 112, \"wght\" 650, -0.02em gives 904px (-0.7%) and ink 0.164 (-2%). The old 112/500/0 was 905px but ink 0.138 (-17%), which is why it read light and loose. Best of the rest: Archivo 108/650/0 906px, ink 0.158; Schibsted Grotesk 650 857px (-6%); Inter Tight 650 809px (-11%); Familjen Grotesk 650 782px (-14%)",
      "real_weight": 500
    },
    "body": {
      "family": "Public Sans",
      "weight": 400,
      "line_height": 1.5,
      "scale": 1,
      "fallback_stack": "-apple-system, Arial, Helvetica, sans-serif",
      "tracking_em": 0.01,
      "note": "Public Sans 400, letter-spacing 0.01em, stands in for Atlas Grotesk. Tested 2026-10-29 on the hero lead (20px) and an industry-card body (16px), same copy: width 1356.5 vs 1361.1 (-0.3%) and 973.6 vs 975.5 (-0.2%); ink 0.101-0.102 vs 0.104 (-3%); x-height 51.7 vs 52.7 (-2%); \"o\" 56.5 vs 56.7. Inter 400 matches width (+0.2%) but its x-height is 3.6% taller and its rounds 6% wider, which is why it read denser. Hanken, Figtree and Instrument Sans ran 4-8% narrow at every weight 330-400 Labels that are Atlas Medium 500 (buttons, nav, small headings, eyebrows) take Public Sans 650 at 0.01em."
    }
  },
  "style": {
    "motion": "one easing, cubic-bezier(0.65, 0, 0.45, 1); fewer, purposeful moves; a wink, not confetti"
  },
  "voice": {
    "tone": [
      "Simple",
      "Helpful",
      "Human",
      "Magic"
    ],
    "notes": [
      "Simple: crystal clear, trim words, strong nouns, tell a story.",
      "Helpful: say what's coming next and show how to get there.",
      "Human: write the way you talk; real people read the words.",
      "Magic: charm with wit; clever is good, fresh language that surprises is better."
    ],
    "rules": [
      {
        "id": "headline-case",
        "kind": "headline_case",
        "value": "sentence",
        "prov": "observed",
        "note": "Sentence case is observed on dropbox.com; the guide sets no case rule."
      },
      {
        "id": "name-not-verb",
        "kind": "avoid",
        "terms": [
          "Dropboxes",
          "Dropbox's",
          "Dropboxing",
          "Dropbox it"
        ],
        "instead": "Dropbox as a capitalized adjective, spelled as is (\"Dropbox files\")"
      },
      {
        "id": "no-jargon",
        "kind": "guidance",
        "text": "No jargon: write the way you talk"
      },
      {
        "id": "say-next-step",
        "kind": "guidance",
        "text": "Every message says what happens next and how to get there"
      },
      {
        "id": "trim-words",
        "kind": "guidance",
        "text": "Trim words; prefer strong, concrete nouns"
      }
    ]
  },
  "spec": {
    "source": "https://www.dropbox.com/",
    "how": "computed styles, bounding boxes and pixel scans at 1440 and 390 px wide, on 2026-10-28 and 2026-10-29",
    "provenance": "observed",
    "layout": {
      "page_margin": {
        "desktop": 48,
        "phone": 24
      },
      "section_padding": {
        "desktop": 72,
        "phone": 72,
        "feature": {
          "390": 72,
          "768": 72,
          "1024": 96,
          "1440": 120
        },
        "logo_strip": 72
      },
      "hero_text_max": 513,
      "nav_height": 72,
      "announcement_bar_height": 56,
      "two_up_card_width_at_1440": 596,
      "container_max": 1344,
      "gutter": 24,
      "columns": 24,
      "columns_phone": 12,
      "hero_height": 735,
      "phone_nav_height": 48
    },
    "type": [
      {
        "role": "Hero headline",
        "face": "display",
        "size": {
          "desktop": 40,
          "phone": 32
        },
        "line_height": 1.2,
        "tracking_px": -0.8,
        "weight": 650,
        "width_axis": 112,
        "cut": "Sharp Grotesk width 20, Medium (dense)",
        "stand_in": "Archivo \"wdth\" 112, \"wght\" 650, letter-spacing -0.02em (the real cut is Sharp Grotesk 20 Medium, weight 500, tracking 0)",
        "real_weight": 500
      },
      {
        "role": "Section headline (wide cut)",
        "face": "display",
        "size": {
          "desktop": 34,
          "phone": 26
        },
        "line_height": 1.13,
        "tracking_px": 0.3,
        "weight": 400,
        "width_axis": 125,
        "cut": "Sharp Grotesk 23 Book (wide, light)",
        "stand_in": "Archivo \"wdth\" 125, \"wght\" 400, letter-spacing 0.01em, set 2px larger than the real 32/24 (34/26) with line-height 38.4px desktop, 28.8px phone. Sharp Grotesk 23 has an 8% taller x-height (57 vs 53 per 100) and wider round letters (\"o\" 25.1 vs 23.0 at 32px); Archivo can't get wider than 125, so tracking alone (1.4px) spaced the letters apart. At 34px with 0.01em, the line and each word land within 5% of the real widths (line 931 vs 934; \"Dropbox\" 164 vs 165) and the x-height matches within 2%, with letters touching as tightly as the real cut. Tested 2026-10-29: wdth 115 to 125, tracking 0 to 0.02em",
        "real_size": {
          "desktop": 32,
          "phone": 24
        }
      },
      {
        "role": "Feature headline",
        "face": "display",
        "size": {
          "desktop": 26,
          "phone": 26
        },
        "line_height": 1.3,
        "tracking_px": -0.52,
        "weight": 650,
        "width_axis": 112,
        "cut": "Sharp Grotesk width 20, Medium",
        "stand_in": "Archivo \"wdth\" 112, \"wght\" 650, letter-spacing -0.02em (the real cut is Sharp Grotesk 20 Medium, weight 500, tracking 0)",
        "real_weight": 500
      },
      {
        "role": "Card title",
        "face": "display",
        "size": {
          "desktop": 18,
          "phone": 18
        },
        "line_height": 1.2,
        "tracking_px": -0.36,
        "weight": 650,
        "width_axis": 112,
        "cut": "Sharp Grotesk width 20, Medium",
        "stand_in": "Archivo \"wdth\" 112, \"wght\" 650, letter-spacing -0.02em (the real cut is Sharp Grotesk 20 Medium, weight 500, tracking 0)",
        "real_weight": 500
      },
      {
        "role": "Small heading",
        "face": "body",
        "size": {
          "desktop": 20,
          "phone": 20
        },
        "line_height": 1.2,
        "weight": 650,
        "use": "logo-strip line, integration names, footer column heads (16px on phone)",
        "tracking_px": 0.2,
        "real_weight": 500,
        "stand_in": "Public Sans 650, 0.01em (Atlas Grotesk Medium 500). Button label \"Try Dropbox free\" 16px: 130.4 vs 130.5px, ink 0.145 vs 0.152; nav \"Products Solutions Business Pricing\" 14px: 244 vs 247px, ink 0.151 vs 0.154. Public Sans 500 was 5% narrow and 19% light"
      },
      {
        "role": "Lead",
        "face": "body",
        "size": {
          "desktop": 20,
          "phone": 16
        },
        "line_height": 1.5,
        "weight": 400,
        "tracking_px": 0.2
      },
      {
        "role": "Body",
        "face": "body",
        "size": {
          "desktop": 16,
          "phone": 16
        },
        "line_height": 1.5,
        "weight": 400,
        "tracking_px": 0.16
      },
      {
        "role": "Eyebrow and button label",
        "face": "body",
        "size": {
          "desktop": 16,
          "phone": 16
        },
        "line_height": 1.2,
        "weight": 650,
        "tracking_px": 0.16,
        "real_weight": 500,
        "stand_in": "Public Sans 650, 0.01em (Atlas Grotesk Medium 500). Button label \"Try Dropbox free\" 16px: 130.4 vs 130.5px, ink 0.145 vs 0.152; nav \"Products Solutions Business Pricing\" 14px: 244 vs 247px, ink 0.151 vs 0.154. Public Sans 500 was 5% narrow and 19% light"
      },
      {
        "role": "Nav link",
        "face": "body",
        "size": {
          "desktop": 14,
          "phone": 14
        },
        "line_height": 1.43,
        "weight": 650,
        "use": "left group 500, right account links 400; phone menu items 24px/500",
        "tracking_px": 0.14,
        "real_weight": 500,
        "stand_in": "Public Sans 650, 0.01em (Atlas Grotesk Medium 500). Button label \"Try Dropbox free\" 16px: 130.4 vs 130.5px, ink 0.145 vs 0.152; nav \"Products Solutions Business Pricing\" 14px: 244 vs 247px, ink 0.151 vs 0.154. Public Sans 500 was 5% narrow and 19% light"
      },
      {
        "role": "Pill label",
        "face": "body",
        "size": {
          "desktop": 14,
          "phone": 14
        },
        "line_height": 1.2,
        "weight": 400,
        "tracking_px": 0.14
      },
      {
        "role": "Overline",
        "face": "body",
        "size": {
          "desktop": 12,
          "phone": 12
        },
        "line_height": 1.2,
        "weight": 700,
        "use": "\"Article\" in muted, \"Testimonial\" in Azalea; sentence case",
        "tracking_px": 0.12
      },
      {
        "role": "Footer link",
        "face": "body",
        "size": {
          "desktop": 14,
          "phone": 14
        },
        "line_height": 1.57,
        "weight": 400,
        "tracking_px": 0.14
      }
    ],
    "components": {
      "button_primary": {
        "fill": "accent",
        "text": "on_accent",
        "ring_px": 2,
        "ring": "accent",
        "radius": 16,
        "height": 71,
        "padding_x": 24,
        "font_size": 16,
        "weight": 650,
        "states": {
          "hover": {
            "css": {
              "background-color": "#0057E5"
            },
            "measured": {
              "bg": "#0057E5",
              "border": "2px solid #0061FE (unchanged)",
              "text": "#F7F5F2"
            },
            "prov": "observed",
            "source": "https://www.dropbox.com/",
            "source_note": "hero 'Try Dropbox free'"
          },
          "focus": {
            "css": {
              "box-shadow": "0 0 0 3px #428BFF",
              "outline-offset": "1px"
            },
            "measured": {
              "ring": "box-shadow 0 0 0 3px #428BFF",
              "outline_offset": "1px",
              "note": "Measured by keyboard Tab (:focus-visible). The pointer was still over the button, so bg read #0057E5."
            },
            "prov": "observed",
            "source": "https://www.dropbox.com/",
            "source_note": "hero 'Try Dropbox free'"
          }
        },
        "note": "Hero \"Try Dropbox free\": 231 x 71 on desktop (padding 24 all round), 231 x 55 on phone (padding 16 24). Label 16/500 then a 24px right arrow, 24px gap. One per band, never beside a secondary in the hero",
        "real_weight": 500
      },
      "button_secondary": {
        "fill": "none",
        "text": "ink",
        "ring_px": 2,
        "ring": "ink",
        "radius": 16,
        "height": 55,
        "padding_x": 24,
        "font_size": 16,
        "weight": 650,
        "states": {
          "hover": {
            "css": {
              "background-color": "rgba(0, 0, 0, 0.08)"
            },
            "measured": {
              "bg": "rgba(0,0,0,0.08)",
              "border": "unchanged",
              "text": "unchanged"
            },
            "prov": "observed",
            "source": "https://www.dropbox.com/",
            "source_note": "outline 'Try Dropbox free' on a white band"
          },
          "focus": {
            "css": {
              "box-shadow": "0 0 0 3px #428BFF",
              "outline-offset": "1px"
            },
            "measured": {
              "ring": "box-shadow 0 0 0 3px #428BFF",
              "outline_offset": "1px",
              "bg": "transparent"
            },
            "prov": "observed",
            "source": "https://www.dropbox.com/",
            "source_note": "outline 'Try Dropbox free' on a white band"
          }
        },
        "note": "Outline, 55 tall at every width (padding 16 24), same 24px arrow after the label. The 71 primary and the 55 outline never share a row: rows pair a 55 outline with an arrow link, 48px apart",
        "real_weight": 500
      },
      "button_nav": {
        "fill": "accent",
        "text": "on_accent",
        "radius": 12,
        "height": 40,
        "padding_x": 12,
        "font_size": 16,
        "weight": 650,
        "note": "Get started: 117 x 40, padding 0 12, label 16/500, no arrow, hover #0057E5",
        "real_weight": 500
      },
      "pill_label": {
        "fill": "surface",
        "text": "ink_muted",
        "radius": "pill",
        "height": 32,
        "padding_x": 15,
        "note": "Feature eyebrow: padding 4 15 4 10, a 16px line icon then the label 14/400 in muted text, 4px gap; centered above the feature headline, 16px above it",
        "prov": "observed",
        "source": "https://www.dropbox.com/"
      },
      "card": {
        "fill": "surface",
        "on": "paper",
        "radius": 12,
        "shadow": "none",
        "border": "none",
        "note": "Industry card: 596 x 197 at 1440, Coconut on white, radius 12, overflow hidden; image left 186px wide full height (object-fit cover); text column padding 24, gap 12: title 18/500 display, body 16/24 muted, arrow link 16/500 Graphite at the bottom. Phone: 310 wide, no image, padding 24"
      },
      "card_dark": {
        "fill": "#1C1D21",
        "on": "the security panel gradient (#292C31 to #000000), where it sits on near-black",
        "radius": 16,
        "shadow": "none",
        "border": "none",
        "note": "Testimonial card: 720 x 291, padding 8, gap 8; square photo 275 x 275 radius 8 with a 24px play glyph bottom-left; text column: \"Testimonial\" 12/700 Azalea, quote 18/21.6 display 500 Coconut, 14/21 body at 60% Coconut, \"Watch testimonial\" underlined link at the bottom. Cards scroll sideways (drag), 24px gap, clipped by the panel edge. Measured 2026-10-29; on Graphite #1E1919 it would barely show, so keep it on the panel",
        "prov": "observed"
      },
      "button_secondary_on_dark": {
        "fill": "none",
        "text": "on_night",
        "ring_px": 2,
        "ring": "on_night",
        "radius": 16,
        "height": 55,
        "padding_x": 24,
        "font_size": 16,
        "weight": 650,
        "note": "Coconut #F7F5F2 2px ring and text on Graphite or the security panel; 24px arrow after the label; hover not measured (use rgba(247,245,242,0.12))",
        "prov": "observed",
        "source": "https://www.dropbox.com/",
        "real_weight": 500
      },
      "arrow_link": {
        "text": "ink",
        "font_size": 16,
        "weight": 650,
        "underline": "1px, under the label only",
        "icon": "24px right arrow, 4px after the label",
        "height": 19,
        "note": "\"Learn more\", \"Connect now\", \"See all integrations\", \"Read article\". Coconut on dark grounds, Graphite on light.",
        "prov": "observed",
        "source": "https://www.dropbox.com/",
        "states": {
          "hover": {
            "css": {},
            "measured": {
              "change": "no computed change measured (color, underline and icon transform the same)"
            },
            "prov": "observed",
            "source": "https://www.dropbox.com/",
            "source_note": "'Learn more', transparent-style button in a Graphite band"
          },
          "focus": {
            "css": {
              "box-shadow": "0 0 0 3px #428BFF",
              "outline-offset": "1px"
            },
            "measured": {
              "ring": "box-shadow 0 0 0 3px #428BFF",
              "outline_offset": "1px"
            },
            "prov": "observed",
            "source": "https://www.dropbox.com/",
            "source_note": "'Learn more', transparent-style button in a Graphite band"
          }
        },
        "real_weight": 500
      },
      "announcement_bar": {
        "fill": "#DEEBFF",
        "text": "#0044AF",
        "height": 56,
        "note": "Full-width, centered: 24px chat icon, 8px, label 14/500, 24px right arrow. Phone: wraps to 3 lines, 100px tall, padding 16 24",
        "prov": "observed",
        "source": "https://www.dropbox.com/"
      },
      "nav_mark": {
        "fill": "accent",
        "height": 40,
        "note": "Desktop: the Tab, a 40 x 40 Dropbox Blue square (radius 0) with the 30 x 25 glyph in Coconut, set flush against the 93 x 22 Graphite word mark (12px left padding). Phone: the bare blue glyph (30 x 25) in a 48 x 48 tap target, no square, no word mark",
        "prov": "observed",
        "source": "https://www.dropbox.com/"
      },
      "media_frame": {
        "fill": "#FFFFFF",
        "radius": 28,
        "border": "8px white",
        "shadow": "0 4px 16px rgba(30,25,25,0.08); video tile 0 4px 10px rgba(30,25,25,0.16)",
        "note": "Hero frame: about 691 x 424 at 1440, a photo inside an 8px white rim, outer radius about 28, inner about 20. Floating pill on it: white, 60px tall, full radius, 24px glyph + 26px label. Overlapping video tile: 303 x 212, 8px white rim, radius about 12, bottom-right, hanging 110px below and 37px left of the frame edge. Read from pixels, 2026-10-29",
        "prov": "observed",
        "source": "https://www.dropbox.com/"
      },
      "file_card": {
        "fill": "#FFFFFF",
        "radius": 12,
        "note": "Product-UI card over a square photo in feature bands: thumbnail on #EEE9E2, filename 16/400, meta 16/400 muted; a \"Share\" split pill on the thumbnail. Overlaps the photo edge by about 58px",
        "prov": "inferred",
        "source": "https://www.dropbox.com/",
        "shadow": "0 0 0 1px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.12)"
      },
      "logo_marquee": {
        "logo_color": "#000000",
        "item_box": 150,
        "gap": 96,
        "speed_px_per_s": 22,
        "control": "32px pause/play icon button",
        "note": "Customer logos in black, each in a 150 x 150 box (object-fit contain), 96px apart (246 pitch), one row, drifting left about 22px/s, clipped at the viewport, no fade. A 32px pause/play icon button sits centered 4px below the row",
        "prov": "observed",
        "source": "https://www.dropbox.com/"
      },
      "security_panel": {
        "fill": "linear-gradient(#292C31, #000000)",
        "radius": 20,
        "note": "STATIC STATE: 1075 wide at x=182 (1440), 1345 tall, radius 20; testimonial row overhangs both sides (12px left, 135px right, clipped at x=1392). Animation only: scales from 0.8 x 0.9 to 1.0 (1344 wide at x=48 at 1440, 976 at x=24 at 1024) as its top travels from 800px to 100px below the viewport top. 768 and below: full-bleed, radius 0, no scaling. Inside: 120px top padding, content centered (max 776): 64px lock, 32px, headline, 16px, body, 32px, buttons; collage and dialog; testimonial cards",
        "prov": "observed",
        "source": "https://www.dropbox.com/"
      }
    },
    "signature": [
      {
        "id": "tonal-pair",
        "name": "A color with its own dark",
        "where": "colored grounds: tiles, section openers, illustration panels",
        "spec": "a light accent ground carries text in a deep shade of the same hue, never black or white (yellow #FAD24B with #684505, cloud #B4C8E1 with #283750, pink #FFAFA5 with #892055)",
        "once": "one hue per panel",
        "example": {
          "ground": "#FAD24B",
          "ink": "#684505",
          "text": "Keep every draft in one place",
          "mark_style": "none"
        },
        "dont_example": {
          "ground": "#FAD24B",
          "ink": "#FFFFFF",
          "text": "Keep every draft in one place",
          "mark_style": "none"
        },
        "dont": "put white or plain black on an accent: the pair is what makes it Dropbox"
      },
      {
        "id": "the-tab",
        "name": "The Tab starts the layout",
        "where": "page and slide compositions; on dropbox.com the nav lockup is the Tab plus the word mark (desktop) and the bare blue glyph (phone)",
        "spec": "the glyph sits inside a plane (the guide gives no color: Dropbox Blue in the nav, observed 2026-10-29); the rest of the layout is set from that corner. In the nav it is a 40px blue square with the word mark flush beside it",
        "once": "one Tab per composition",
        "example": {
          "ground": "accent",
          "ink": "on_accent",
          "text": "Layout starts from the Tab",
          "mark_style": "none"
        },
        "dont_example": {
          "ground": "paper",
          "ink": "accent",
          "text": "Layout starts from the Tab",
          "mark_style": "none"
        },
        "dont": "float the glyph as decoration with nothing aligned to it"
      },
      {
        "id": "blue-is-action",
        "name": "Filled blue is for buttons",
        "where": "the dropbox.com homepage (observed on the dropbox.com homepage, 2026-10-28)",
        "spec": "Dropbox Blue fills buttons and the nav CTA; the bands are Coconut, white and Graphite. Campaigns do use full blue grounds (the Dash x McLaren billboards), so this is a web pattern, not a brand law",
        "once": "one filled blue button per band",
        "example": {
          "ground": "surface",
          "text": "Try it free",
          "button": true
        },
        "prov": "observed"
      }
    ],
    "bands": [
      {
        "ground": "#DEEBFF",
        "content": "announcement",
        "label": "Announcement bar · 56px · Blue-tint strip, centered one-line link",
        "desktop": "1440 x 56, sticky with the nav; text 14/500 #0044AF between a 24px chat icon and a 24px arrow",
        "phone": "wraps to 3 centered lines, 100px tall",
        "anatomy": [
          "announcement: #DEEBFF ground, #0044AF text and icons, no close button"
        ]
      },
      {
        "ground": "paper",
        "content": "nav",
        "label": "White nav · 72px · Tab + word mark, 4 links left, account links + Get started right",
        "desktop": "72 tall, 24px side padding, 1px #EDE9E3 bottom line, sticky under the announcement bar",
        "phone": "48 tall: blue glyph left; Sign up, Log in (14/400) and a 32px hamburger right",
        "anatomy": [
          "nav: links 14px, left group 500 with 16px chevrons on Products and Solutions, right group 400 after a 24px globe icon"
        ]
      },
      {
        "ground": "surface",
        "content": "hero",
        "label": "Coconut hero · 735px tall · headline left (max 513) · framed product visual right",
        "headline": "Your headline, left-aligned",
        "desktop": "text column x48, vertically centered: headline top at y=351 (223px below the nav), lead 16px below, 71px primary 32px below that; media box 735 x 735 at x657, right edge on the 48px margin",
        "phone": "stacked, left-aligned, 24px sides: headline 40px below the nav, lead, 231 x 55 primary, then a full-bleed 390 x 390 media square",
        "anatomy": [
          "hero media: white-rimmed rounded photo frame (about 691 x 424) with a floating \"Open in Dropbox\" pill and an overlapping video tile bottom-right; see components media_frame"
        ]
      },
      {
        "ground": "surface",
        "content": "logos",
        "label": "Coconut proof strip · centered line + black logo marquee · pause button",
        "desktop": "72px below the hero; 20/24 500 line centered, 32px, logo row (150px boxes, 96px apart) drifting left, 32px pause button below",
        "phone": "same; line wraps to 3 lines at 28px sides, about 2 logos visible",
        "anatomy": [
          "logos: oversized black customer logos, never grey, never in a grid"
        ]
      },
      {
        "ground": "night",
        "content": "text",
        "label": "Graphite intro · centered eyebrow + wide-cut headline + body + arrow link",
        "headline": "Bring your files to every tool",
        "align": "center",
        "desktop": "72px top; centered column 827 wide: eyebrow 16/500, 16px, wide-cut headline 32/38.4, 16px, body 16/24, 32px, \"See all integrations\" arrow link",
        "phone": "same, centered, 28px sides, headline 24/28.8",
        "anatomy": [
          "integration intro: everything Coconut on Graphite, no buttons, one arrow link"
        ]
      },
      {
        "ground": "night",
        "content": "cards",
        "label": "Graphite integrations · open 3-column grid, 2 rows, no card boxes",
        "desktop": "columns 366 wide at x124, 537, 951; rows 235 tall, 72px apart. Each: 48px partner mark, 16px, name 20/500, 16px, body 16/24 Coconut with underlined inline links, arrow link at the bottom",
        "phone": "one column, 310 wide at 40px sides, about 72px between items",
        "anatomy": [
          "integration item: no fill, no border, left-aligned; marks in their own colors on Graphite"
        ]
      },
      {
        "ground": "paper",
        "content": "split",
        "label": "White feature bands ×3 · centered pill, headline, body, buttons · photo + product UI below",
        "desktop": "120px top on the first; each band 881 tall. Text column centered, 780 wide: pill label, 16px, feature headline 26/33.8, 16px, body 16/24 muted, 32px, a 55px outline button (and an arrow link 48px to its right). 48px below, a 997 x 600 media cell: a square photo 500 x 500 (square corners) with white product-UI cards overlapping its inner edge; photo left, right, left on the three bands",
        "phone": "72px top; text centered at 48px sides; media stacks under the buttons, full width",
        "anatomy": [
          "feature media: photo of a person or the work, square corners; product UI as white radius-12 cards, never a full screenshot"
        ]
      },
      {
        "ground": "#292C31",
        "content": "panel",
        "label": "Security panel · 1075px inset rounded charcoal-to-black panel, lock, layered art, testimonial cards overhanging its sides",
        "desktop": "static: 1075 wide at x=182, radius 20, gradient #292C31 to #000000; testimonial cards (720 x 291, #1C1D21) overhang the panel by 12px left and 135px right. Animation only: scales to 1344 at x=48",
        "phone": "768 and below: full-bleed, square corners, 24px sides; testimonial cards 300 x 615 with the photo on top",
        "anatomy": [
          "security panel: the one inset, rounded plane on the page; see components security_panel and card_dark"
        ]
      },
      {
        "ground": "paper",
        "content": "cards",
        "label": "White industries · wide-cut headline + 2 x 3 Coconut cards, image left",
        "desktop": "headline centered 32/38.4 wide cut, 72px, cards 596 x 197 in two columns (x112 and x732, 24 gap), 24px between rows",
        "phone": "one column, 310 wide, no images, text only, 24px padding",
        "anatomy": [
          "industry card: see components card"
        ]
      },
      {
        "ground": "surface",
        "content": "cards",
        "label": "Coconut resources · wide-cut headline + 3 white article cards + blue text link",
        "desktop": "72px top; headline centered, 72px, three cards 390 x 480 (gap 24): image 390 x 219 on top, then padding 0 24 24: \"Article\" 12/700 muted, title 18/500, body 16/24 muted, \"Read article\" underlined. Then \"View more resources\" 16/400 Dropbox Blue link centered, and a 16/24 disclaimer line, 72px bottom",
        "phone": "cards stacked, 310 wide at 40px sides",
        "anatomy": [
          "article card: white on Coconut, radius 12, overflow hidden"
        ]
      },
      {
        "ground": "#000000",
        "content": "footer",
        "label": "Black footer · six link columns, social icons, locale",
        "desktop": "96px of black above the column heads; six columns 183 wide at a 207 pitch starting x100; then 32px social icons and a locale button",
        "phone": "two columns (x28 and x195), headings 16/24",
        "anatomy": [
          "footer: all text Coconut on #000000; no logo"
        ]
      }
    ],
    "responsive": {
      "measured_at": [
        390,
        768,
        1024,
        1440
      ],
      "source": "https://www.dropbox.com/",
      "date": "2026-10-28",
      "rows": [
        {
          "what": "hero headline size",
          "values": {
            "390": "32px / 38.4 lh, Sharp Grotesk 500",
            "768": "40px / 48",
            "1024": "40px / 48",
            "1440": "40px / 48"
          }
        },
        {
          "what": "section headline size",
          "values": {
            "390": "24px / 28.8, 'Sharp Grotesk 23' (wide cut) 400",
            "768": "32px / 38.4",
            "1024": "32px / 38.4",
            "1440": "32px / 38.4"
          }
        },
        {
          "what": "body size",
          "values": {
            "390": "16px / 24 (lead also 16/24)",
            "768": "16px / 24 (lead 16/24)",
            "1024": "16px / 24 (lead 20/30)",
            "1440": "16px / 24 (lead 20/30)"
          }
        },
        {
          "what": "page margin",
          "values": {
            "390": 24,
            "768": 32,
            "1024": 48,
            "1440": 48
          }
        },
        {
          "what": "section padding",
          "values": {
            "390": "72 (no larger feature padding present)",
            "768": "72 (no larger feature padding present)",
            "1024": "72; feature bands 96",
            "1440": "72; feature bands 120"
          }
        },
        {
          "what": "container max width",
          "values": {
            "390": "full width",
            "768": "full width",
            "1024": "full width",
            "1440": "1344 inner (1440 outer), i.e. 48px each side"
          }
        },
        {
          "what": "grid columns",
          "values": {
            "390": 12,
            "768": 24,
            "1024": 24,
            "1440": 24
          }
        },
        {
          "what": "gutter",
          "values": {
            "390": 24,
            "768": 24,
            "1024": 24,
            "1440": 24
          }
        }
      ],
      "prov": "observed"
    },
    "breakpoints": {
      "all": [
        480,
        768,
        1024,
        1280,
        1440,
        1920
      ],
      "phone_max": 479
    },
    "motion": [
      {
        "name": "brand",
        "easing": "cubic-bezier(0.65, 0, 0.45, 1)",
        "use": "brand and product motion",
        "prov": "published",
        "source": "https://brand.dropbox.com/motion"
      },
      {
        "name": "button-state",
        "easing": "cubic-bezier(0.4, 0, 0.6, 1)",
        "duration_ms": 100,
        "use": "button hover and press on dropbox.com",
        "prov": "observed",
        "source": "https://www.dropbox.com/"
      }
    ],
    "icons": {
      "sizes": [
        {
          "name": "spot",
          "px": 120,
          "use": "spot illustrations"
        },
        {
          "name": "pictogram",
          "px": 64,
          "use": "pictograms"
        },
        {
          "name": "ui",
          "px": 24,
          "use": "UI icons"
        }
      ],
      "prov": "published",
      "source": "https://brand.dropbox.com/iconography"
    },
    "page": {
      "source": "https://www.dropbox.com/",
      "date": "2026-10-29",
      "prov": "observed",
      "announcement": {
        "summary": "A one-line blue-tint link strip above the nav",
        "ground": "#DEEBFF",
        "height": "56px desktop (sticky with the nav), 100px on phone (3 wrapped lines)",
        "anatomy": [
          "centered: 24px chat-bubble icon, 8px gap, label 14px/500 #0044AF, 24px right arrow",
          "no close button, no border"
        ]
      },
      "nav": {
        "summary": "White 72px bar: the Tab + word mark left, four links, then account links and one blue button right",
        "ground": "#FFFFFF",
        "height": "72px desktop, 48px phone",
        "border": "1px #EDE9E3 bottom line",
        "logo": "Desktop: the Tab, a 40 x 40 Dropbox Blue square (radius 0) with the 30 x 25 Coconut glyph, flush against the 93 x 22 Graphite word mark; lockup 169 x 40 at x24. Phone: bare blue glyph 30 x 25 in a 48px target at x9",
        "links": "4 on the left (Products, Solutions with 16px chevrons, then 2 plain), 14px/500 Graphite, 24px between labels, starting 12px after the logo; chevrons rgba(82,74,62,0.82)",
        "actions": "right-aligned: 24px globe icon, then 4 text links 14px/400 Graphite (Contact sales, Get app with chevron, Sign up, Log in), then \"Get started\" 117 x 40 Dropbox Blue, radius 12, 16/500 Coconut, 24px from the right edge",
        "sticky": "announcement + nav stay pinned at the top (128px together)",
        "phone": "glyph left; Sign up and Log in 14/400 and a 48px hamburger (32px icon) right. Menu opens full-screen white: items 24px/500 rows 77px tall, accordions for Products and Solutions, a full-width 55px \"Get started\" pinned near the bottom"
      },
      "hero": {
        "summary": "Coconut, 735px tall: left-aligned headline, lead and one arrow button; right, a white-rimmed rounded photo frame with floating product pills",
        "desktop": "grid with text at x48 (max 513 wide) and a 735 x 735 media box at x657 (ends on the 48 margin). Vertical anchors from the page top: announcement 0 to 56, nav 56 to 128, hero 128 to 863, headline top y=351, lead y=463 (16px below the headline), button y=585 (32px below the lead). Text block vertically centered in the band",
        "phone": "order: headline, lead, button, media. Left-aligned, 24px sides. Headline at y=188 (40px below the nav), 32/38.4, 4 lines in 342px: budget 55 to 64 characters (about 16 per line). With 4 lines, the lead follows 16px below, the 231 x 55 button top sits at y=462, and the 390 x 390 media square starts at y=541 with the photo frame inside it at about y=628. A 3-line headline (42 to 44 characters) moves everything up 38px (button y=423 or 447, depending on lead length)",
        "media": "THE DOMINANT ELEMENT: a landscape photo frame about 691 x 424 (about 16:10) with an 8px white rim, outer radius about 28, soft warm shadow, a bright outdoor photo inside. Everything else only overlaps it: a white pill (about 278 x 60, full radius) centered on the photo with the glyph and a product verb; a white-rimmed video tile 303 x 212 over the bottom-right corner, hanging about 110px below the frame; document or prompt cards only while animating (see at rest). The pill is never bigger than the frame and never replaces it",
        "type": "headline 40/48 Sharp Grotesk 20 Medium; stand-in Archivo \"wdth\" 112, \"wght\" 650, -0.02em (904 vs 910.8px on the measured line, ink within 2%). Graphite, sentence case. Lead 20/30 Atlas 400 (stand-in Public Sans 400, 0.01em) in rgba(82,74,62,0.82)",
        "cta": "one primary only: 231 x 71, radius 16, padding 24, label 16/500 + 24px right arrow 24px after it",
        "proof": "none in the hero; proof starts in the next band (logo marquee)",
        "headline_budget": "2 lines at 1440 in the 513px column: 40 to 48 characters, 6 to 8 words (the measured line has 44). 3 lines at 1440 pushes the button down by 48px; 4 lines on phone is normal",
        "at_rest": "exactly three things: one dominant photo frame, one product pill centered on the photo, one video tile over its lower-right corner. Document and prompt cards appear only during the animation sequence, one at a time, and never stack with the pill and tile. A static hero shows the three, nothing more",
        "vertical_desktop": "at 1440: headline top y=351; media frame top y=284 (67px above the headline top); video tile bottom y=817 (466px below the headline top, about 160px below the CTA bottom at y=656). The media box itself runs 128 to 863. The frame is taller than the text block on both ends",
        "static_state": "the at-rest three: frame, centered \"Open in Dropbox\" pill, lower-right video tile. Animation only: the prompt pill, document card and \"Create a share link\" card play in and out over 12.3s",
        "shadows": "Only three things cast shadows, all baked into product video on dropbox.com and fitted from pixel falloff (2026-10-29): hero photo frame rim 0 4px 16px rgba(30,25,25,0.08) (13px below, 6px right, about 2px above); video tile 0 4px 10px rgba(30,25,25,0.16) (10px below, 4px at the sides); product UI cards 0 0 0 1px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.12). Nothing else has a shadow: no buttons, nav, cards, testimonial cards, industry or article cards, panel or photos"
      },
      "sections": [
        {
          "name": "Logo marquee",
          "summary": "A centered trust line over a moving row of oversized black customer logos",
          "ground": "Coconut #F7F5F2",
          "desktop": "starts 72px below the hero; line 20/24 Atlas 500 centered (max 886); logo row 32px below; band 246 tall",
          "phone": "line wraps at 28px sides; logos the same size, about two in view",
          "anatomy": [
            "logos pure black, each in a 150 x 150 contain box, 96px gaps, drifting left at about 22px/s, clipped at the screen edge",
            "a 32px circular pause/play icon button (Graphite outline icon) centered 4px below the logos"
          ],
          "components": "logo_marquee",
          "static_state": "logos in one row starting at x=-52 with a 246px pitch (cut off at both screen edges). Animation only: drifting left at about 22px/s",
          "headline_measure": "1 line (589px), max-width 640px"
        },
        {
          "name": "AI integrations",
          "summary": "Graphite band: centered intro with the wide cut, then an open three-column grid of partner marks",
          "ground": "Graphite #1E1919",
          "desktop": "72px top padding; centered column 827 wide: eyebrow 16/500, wide-cut headline 32/38.4 (2 lines), body 16/24, arrow link; 72px; grid of 3 columns x 366 (x124, 537, 951), 2 rows 72px apart; 72px bottom",
          "phone": "intro centered at 28px sides (headline 24/28.8); grid becomes one column at 40px sides",
          "anatomy": [
            "eyebrow, headline, body and links all Coconut #F7F5F2 on Graphite",
            "each item: 48px tall partner mark, 16px, name 20/24 Atlas 500, 16px, 3 to 4 lines of 16/24 body with underlined inline links, then an arrow link (\"Connect now\")",
            "no card fills, borders or dividers",
            "marks stand free on Graphite: 48px tall, their own colors (OpenAI and SpaceX in Coconut, Claude in its orange, Gemini in its gradient), no tile, circle or container. If a partner mark is missing, set the partner name in the body face (20/24, 500, Coconut) instead; never a colored icon tile. When the name stands in for the mark, drop the mark slot: the card heading carries the name once (\"ChatGPT\", not \"ChatGPT\" over \"Dropbox in ChatGPT\") (ours)"
          ],
          "components": "arrow_link",
          "type": "wide-cut headline: Archivo \"wdth\" 125, \"wght\" 400, 0.01em, 34px on 38.4px (26 on 28.8 phone), Coconut, centered, 2 lines in an 827px column",
          "headline_measure": "max-width 490px, centered: 2 balanced lines of 439 and 486px at 1440 (eyebrow, body and link keep the 827px column)"
        },
        {
          "name": "Feature bands",
          "summary": "Three white bands (Find, Organize, Share): centered text, then a square photo with white product-UI cards overlapping it",
          "ground": "White #FFFFFF",
          "desktop": "120px top on the first band, 881px per band; text column 780 wide centered; buttons row 32px below the body; media cell 997 x 600 starts 48px below the buttons; photo 500 x 500 alternates left, right, left",
          "phone": "72px top; text centered at 48px sides; one 55px outline button; media full width below",
          "anatomy": [
            "pill label: Coconut pill 32 tall, 16px icon + 14/400 muted label",
            "feature headline 26/33.8 Sharp Grotesk Medium, Graphite, centered",
            "body 16/24 muted, centered",
            "buttons: 55px outline (Graphite 2px ring) + an arrow link 48px to its right; the first band has the outline only",
            "media: square photo, square corners; white UI cards (radius 12, 1px border, soft shadow) overlap its inner edge by about 58px",
            "photos: 500 x 500 square, art-directed (fashion on a warm brown studio ground, a race car mid-corner, hands at a laptop), never a generic office stock shot"
          ],
          "components": "pill_label, button_secondary, arrow_link, file_card",
          "image_sequence": "each image band is its own visual chapter, in order: fashion (portrait pair on warm brown), then racing (car close-up), then hands at devices. Never a generic office shot, and no image appears twice on the page (hero, feature bands, security art, testimonials, industries and resources each use different images)",
          "ui_rule": "product UI uses real image thumbnails (photos and artwork from the same story), photo avatars, and compact controls: 12-14px labels, 28-32px chips and fields, small black or Coconut buttons. Never initials in circles, never file-extension badges or pastel file icons, never empty thumbnail boxes. The hero pills, feature UI and sharing dialog are product video and images on dropbox.com, not HTML; use the slot assets or rebuild them to match exactly",
          "static_state": "per band: headline top 48px below the band top (168 on the first, which has 120 padding); square photo 500 x 500 whose top is 508px below the headline top; product UI (640 x 400, or 711 x 400 on band 2) whose top is 275px below the photo top and whose left is 356px right of the photo's left, so it overlaps the photo by 144px. Photo left, right, left (x=222, 718, 222). Animation only: on scroll the UI slides and the photo and UI rise into the text",
          "fashion_pair": "band 1 media is two portraits in a 500 x 500 box, not one photo: rear (blue coat, back turned) 304 x 412 at (29, 0); front (orange coat) 304 x 412 at (167, 33), so it steps 138px right and 33px down and covers the rear's right 166px. Each has a file caption under it: name 16/400 Graphite (\"Broadmire knit\", \"DSC_1241\") and meta 14/400 muted (\"PNG · 32.4 KB\"). Square corners, no shadow. The site only ships the composite; slot_assets has the front portrait whole and the visible strip of the rear",
          "headline_measure": "1 line each at 1440 (302, 574 and 445px) in a 780px column; on phone they wrap in 294px"
        },
        {
          "name": "Security panel",
          "summary": "An inset, rounded charcoal-to-black panel: lock, centered message, layered art with a sharing dialog, testimonial cards",
          "ground": "linear-gradient(#292C31, #000000) on white page",
          "desktop": "STATIC STATE (use this for builds and screenshots): panel 1075 wide at x=182 (182px margins at 1440), top y=5437, 1345 tall, radius 20, gradient #292C31 to #000000. Message column centered; collage and dialog below; testimonial cards 720 x 291 at x=170 and x=914, so the first card hangs 12px past the panel's left edge and the row runs 135px past its right edge to x=1392, where it is clipped; card bottoms 46px above the panel bottom. Animation only: as the panel scrolls up it scales from 0.8 x 0.9 to 1.0, ending 1344 wide at x=48 with the cards inside",
          "phone": "768 and 390: full-bleed, radius 0, 24px sides, no scaling; testimonial cards 300 x 615 (photo 284 square on top), sideways scroll",
          "anatomy": [
            "64px Coconut lock icon centered, 32px above the headline",
            "headline 26/33.8 Sharp Grotesk Medium Coconut; body 16/24 at rgba(247,245,242,0.6)",
            "buttons: outline-on-dark 231 x 55 (2px Coconut ring) + arrow link 48px right",
            "art: three photos stacked and offset (about 206, 162 and 374 wide), the sharing-dialog UI card (about 595 x 480, white, radius 16) overlapping their right side, a small \"Share\" split pill above it",
            "testimonial cards #1C1D21 radius 16, sliding past the panel edge (clipped)",
            "testimonial photo: 275 square, radius 8, the person greyscale and the room tinted one accent (pink #EBCCD6 to #C56A87, or a teal #36A2B6 ground), baked into the image; 24px play glyph bottom-left"
          ],
          "components": "security_panel, button_secondary_on_dark, card_dark",
          "balance": "the collage top sits 148px above the dialog card's top (77px above the top of the dialog image, which includes the Share pill row). Collage block about 526 x 481 (206 x 261, 162 x 167, 374 x 473, stacked and offset; the 374 x 473 sky image is frontmost and tallest); dialog 595 x 480 overlapping the collage's right edge by about 163px. The collage is never shorter than the dialog, and the dialog never covers more than a third of it",
          "testimonial_row": "static: first card at x=170 (12px outside the panel's left edge), row clipped at x=1392 (135px outside its right edge), bottoms 46px above the panel bottom. Animation only: at full scale the first card sits 122px inside the left edge and the row is clipped at the panel edge",
          "headline_measure": "1 line (404px) in the 776px column"
        },
        {
          "name": "Industries",
          "summary": "White band: wide-cut headline over six Coconut cards with an image on the left",
          "ground": "White #FFFFFF",
          "desktop": "headline centered 32/38.4 wide cut, 72px gap, 2 columns x 3 rows of 596 x 197 cards at x112 and x732",
          "phone": "one column of text-only cards, 310 wide",
          "anatomy": [
            "card: Coconut, radius 12, 186px photo left full height, title 18/500, body 16/24 muted, \"Learn more\" arrow link",
            "photo: 186 x 197, flush left, full card height, object-fit cover centered, cropped from a 16:9 or 3:2 documentary photo of people at work; no radius of its own (the card clips it)"
          ],
          "components": "card",
          "headline_measure": "1 line (734px) in the 827px column",
          "image_order": "left to right, top to bottom: Construction, Media / Technology, Professional services / Manufacturing, Education; each photo shows that industry's people at work (slot_assets)"
        },
        {
          "name": "Resources",
          "summary": "Coconut band: wide-cut headline, three white article cards, a blue text link and a disclaimer line",
          "ground": "Coconut #F7F5F2",
          "desktop": "72px top; headline centered; 72px; three 390 x 480 cards (gap 24) at x112; \"View more resources\" 16/400 #0061FE centered 72px below; disclaimer 16/24 Graphite centered (665 wide); 72px bottom",
          "phone": "cards stacked at 40px sides",
          "anatomy": [
            "article card: white, radius 12, image 390 x 219 on top (no radius of its own), body padding 0 24 24, \"Article\" 12/700 muted, title 18/500, body 16/24 muted, \"Read article\" underlined 16/500",
            "the page ends here: resource cards, then the blue text link, then a one-line 16/24 disclaimer, then the black footer. No closing CTA band, no final headline"
          ],
          "headline_measure": "1 line (689px) in the 827px column"
        }
      ],
      "footer": {
        "summary": "Black, six link columns, social icons, a short divider and a locale picker; no logo",
        "ground": "#000000",
        "anatomy": [
          "96px of black above the column heads",
          "link counts per column, left to right: 9, 11, 8, 8, 10, 4 (4 to 11, columns end at different heights)",
          "six columns 183 wide at a 207px pitch from x100: head 20/30 Atlas 500 Coconut, 26px, links 14/22 400 Coconut on a 34px rhythm",
          "32px social icons (X, Facebook, YouTube) 44px apart, about 64px below the longest column",
          "a 132px x 1px divider rgba(142,139,135,0.5), 36px below the icons",
          "locale button: 24px globe, \"English (United States)\" 16/400 Coconut, 24px chevron",
          "216px of black below"
        ],
        "phone": "two columns at x28 and x195, heads 16/24, the same links; social icons in 44px targets"
      },
      "dark_ground": {
        "secondary_button": "2px #F7F5F2 ring, #F7F5F2 label, transparent fill, 55 tall, radius 16, 24px arrow",
        "link": "arrow link 16/500 #F7F5F2, 1px underline under the label, 24px arrow; inline links in body are underlined Coconut",
        "muted_text": "rgba(247,245,242,0.6), about #A09D9B on Graphite",
        "hairline": "1px rgba(142,139,135,0.5), about #474644 on black",
        "logo": "full logo on Graphite (light variant) where a logo is needed; the homepage footer shows none",
        "headline_weight": "same 500 as on light grounds on dropbox.com (no lighter cut measured)"
      }
    }
  },
  "system": {
    "fixed": [
      "The glyph, the word mark and the Tab",
      "Dropbox Blue, Coconut and Graphite",
      "DB Sharp Grotesk"
    ],
    "flex": "The accents and imagery. Each story or photo can take its own accent from the sixteen; the core three stay put.",
    "traits": [
      {
        "is": "Simple",
        "text": "Keep it crystal clear. Trim words. Use strong nouns. Craft a story.",
        "source": "https://brand.dropbox.com/voice-and-tone",
        "prov": "published"
      },
      {
        "is": "Helpful",
        "text": "Help people take action; tell them what's coming, then show how to get there.",
        "source": "https://brand.dropbox.com/voice-and-tone",
        "prov": "published",
        "paraphrase": true
      },
      {
        "is": "Human",
        "text": "Stay real and relatable; write the way you talk; avoid jargon; real people read your words.",
        "source": "https://brand.dropbox.com/voice-and-tone",
        "prov": "published",
        "paraphrase": true
      },
      {
        "is": "Magic",
        "text": "Charm them with wit. Clever is great. Fresh language is even better.",
        "source": "https://brand.dropbox.com/voice-and-tone",
        "prov": "published"
      }
    ]
  },
  "proportion": {
    "note": "Share of homepage height by band ground on dropbox.com at 1440px (observed, 2026-10-28)",
    "source": "https://www.dropbox.com/",
    "parts": [
      {
        "name": "White",
        "hex": "#FFFFFF",
        "n": 3439
      },
      {
        "name": "Graphite",
        "hex": "#1E1919",
        "n": 2263
      },
      {
        "name": "Coconut",
        "hex": "#F7F5F2",
        "n": 1715
      },
      {
        "name": "Black (footer)",
        "hex": "#000000",
        "n": 625
      }
    ],
    "prov": "observed"
  },
  "formats": [
    {
      "format": "Landing page",
      "level": 2,
      "must": "Announcement strip, white nav with the Tab, Coconut hero with a rimmed rounded product frame, black logo marquee, Graphite band in the wide cut, one inset rounded dark panel, black six-column footer",
      "flex": "which feature bands, the accent in photos, how many testimonial cards"
    },
    {
      "format": "Deck",
      "level": 2,
      "must": "Coconut slides, Graphite type, the Tab top left; blue only on the ask",
      "flex": "one accent per section, with its dark partner"
    },
    {
      "format": "Proposal page",
      "level": 2,
      "must": "Coconut hero, one Graphite band for the price, one blue button for the next step",
      "flex": "a customer-files collage of the buyer's own work"
    },
    {
      "format": "Ad",
      "level": 3,
      "must": "The Tab, a medium-weight headline, a blue button",
      "flex": "an accent ground with its dark partner"
    },
    {
      "format": "Social post",
      "level": 4,
      "must": "An accent ground with its dark partner, plus the glyph",
      "flex": "a photo matched to the accent"
    },
    {
      "format": "Email",
      "level": 1,
      "must": "Full logo top left, one blue button",
      "flex": "a spot illustration"
    },
    {
      "format": "Error message",
      "level": 1,
      "must": "Plain words and the fix",
      "flex": "a mini illustration to soften it, as their imagery guide allows"
    }
  ],
  "checks": [
    {
      "name": "Logo hidden",
      "text": "Cover the logo. It should still read as Dropbox: Coconut and Graphite planes, blue on the action in product and web pieces (campaigns may run full blue grounds), a medium-weight grotesk, an accent with its own dark."
    },
    {
      "name": "Swap test",
      "text": "Put a competitor's logo on it. If a blue-on-white SaaS page could wear it just as well, it's generic, and it goes back."
    }
  ],
  "examples": [
    {
      "chapter": "color",
      "do": {
        "ground": "#B4C8E1",
        "ink": "#283750",
        "text": "Plan the launch together"
      },
      "do_caption": "Cloud with Navy: a light accent carries its own dark.",
      "dont": {
        "ground": "#B4C8E1",
        "ink": "#FFFFFF",
        "text": "Plan the launch together"
      },
      "dont_caption": "White on a light accent fails contrast and breaks the pairing."
    },
    {
      "chapter": "color",
      "do": {
        "ground": "surface",
        "text": "Start free",
        "button": true
      },
      "do_caption": "Blue is the next step: a filled button on Coconut.",
      "dont": {
        "ground": "surface",
        "text": "Your work, in one place",
        "ink": "accent"
      },
      "dont_caption": "Blue headlines: on the live site headlines stay Graphite."
    },
    {
      "chapter": "voice",
      "do": {
        "ground": "paper",
        "text": "Upload the file. Then send the link."
      },
      "do_caption": "Helpful: what's next and how to get there.",
      "dont": {
        "ground": "paper",
        "text": "Leverage seamless content-collaboration workflows."
      },
      "dont_caption": "Jargon. Their guide asks you to write the way you talk."
    },
    {
      "chapter": "type",
      "do": {
        "ground": "paper",
        "text": "Find the file, not the folder",
        "font": "display",
        "weight": 500
      },
      "do_caption": "Medium weight, no tracking, sentence case.",
      "dont": {
        "ground": "paper",
        "text": "FIND THE FILE",
        "font": "display",
        "weight": 800
      },
      "dont_caption": "Heavy caps: the live site never sets headlines above 500."
    },
    {
      "chapter": "logo",
      "do": {
        "ground": "paper",
        "text": "Works with Dropbox",
        "font": "body"
      },
      "do_caption": "Name it in text, only when true, with your own mark leading.",
      "dont": {
        "ground": "paper",
        "text": "Dropbox your files"
      },
      "dont_caption": "The name used as a verb. Their legal guide forbids it."
    }
  ],
  "make_it_yours": {
    "note": "Everything above transfers. These are Dropbox's own and must be replaced with yours: name and logo, purpose, positioning, messaging pillars, proof, taglines and boilerplate.",
    "replace": [
      "identity",
      "purpose",
      "positioning",
      "messaging.pillars",
      "messaging.proof_points",
      "messaging.taglines",
      "messaging.boilerplate"
    ],
    "reference": {
      "purpose": {
        "mission": {
          "text": "Our mission is to design a more enlightened way of working",
          "prov": "published",
          "source": "https://www.dropbox.com/about"
        },
        "story": {
          "text": "Dropbox started in 2007 to make files sync simply; it now builds products that remove busywork so people can focus on meaningful work, against tools that interrupt and fragment teams.",
          "prov": "published",
          "source": "https://www.dropbox.com/about",
          "paraphrase": true
        },
        "values": [
          {
            "name": "Be worthy of trust",
            "means": "act with integrity and honesty, even when no one is watching.",
            "prov": "published",
            "source": "https://www.dropbox.jobs/blogs/dropbox-values",
            "paraphrase": true
          },
          {
            "name": "They win, we win",
            "means": "customers' success is the company's success; start from their needs.",
            "prov": "published",
            "source": "https://www.dropbox.jobs/blogs/dropbox-values",
            "paraphrase": true
          },
          {
            "name": "Keep it simple",
            "means": "build focused products; avoid needless complexity in plans and process.",
            "prov": "published",
            "source": "https://www.dropbox.jobs/blogs/dropbox-values",
            "paraphrase": true
          },
          {
            "name": "Own it",
            "means": "take full responsibility, clear your own blockers, learn from mistakes.",
            "prov": "published",
            "source": "https://www.dropbox.jobs/blogs/dropbox-values",
            "paraphrase": true
          },
          {
            "name": "Make work human",
            "means": "design for people's real needs; a compassionate, inclusive culture.",
            "prov": "published",
            "source": "https://www.dropbox.jobs/blogs/dropbox-values",
            "paraphrase": true
          }
        ]
      },
      "positioning": {
        "statement": {
          "text": "For teams drowning in scattered files and tools, Dropbox is one place to store, share and find work, so less time goes to busywork and more to finished work.",
          "prov": "inferred",
          "why": "Assembled from the published boilerplate line, the framework's problem line, the about-page story and the homepage H1; Dropbox publishes no single positioning statement.",
          "source": "https://investors.dropbox.com/node/13491/pdf"
        },
        "category": {
          "text": "Dropbox is one place to keep life organized and keep work moving.",
          "prov": "published",
          "source": "https://investors.dropbox.com/node/13491/pdf"
        },
        "audience": {
          "text": "individuals and teams; the homepage names construction, media, technology, professional services, manufacturing and education. Dash campaign work targets creative and marketing teams.",
          "prov": "observed",
          "source": "https://www.dropbox.com/",
          "paraphrase": true,
          "also": [
            "https://sketchdeck.com/work/dropbox-dash-x-mclaren-proving-ai-can-drive-speed-without-losing-quality/"
          ],
          "source_note": "2026-10-28"
        },
        "problem": {
          "text": "How we all work today is messy",
          "prov": "published",
          "source": "https://brand.dropbox.com/framework"
        },
        "promise": {
          "text": "Dropbox is designed to simplify the frenzy of modern work.",
          "prov": "published",
          "source": "https://brand.dropbox.com/framework"
        },
        "differentiators": [
          {
            "text": "Scale and trust: over 700 million registered users",
            "prov": "observed",
            "source": "https://www.dropbox.com/",
            "source_note": "2026-10-28"
          },
          {
            "text": "Dropbox content brought into AI tools (OpenAI, Anthropic, Google Gemini and others) rather than a closed assistant",
            "prov": "observed",
            "source": "https://www.dropbox.com/",
            "source_note": "2026-10-28"
          },
          {
            "text": "Dash: one search across the apps a team already uses, with content access controls",
            "prov": "published",
            "source": "https://www.businesswire.com/news/home/20241015662879/en"
          },
          {
            "text": "Security framed as first, not an add-on (\"Security never comes second\")",
            "prov": "observed",
            "source": "https://www.dropbox.com/",
            "source_note": "2026-10-28"
          }
        ],
        "alternatives": [
          {
            "text": "Google Drive, Microsoft OneDrive, Box (file storage); Notion, Asana and app-native search (for Dash)",
            "prov": "inferred",
            "why": "Category peers; Dropbox names none as competitors. Trade coverage of Dash lists Google Drive, OneDrive, Notion and Asana as apps it connects to.",
            "source": "https://cfotech.com.au/story/dropbox-launches-ai-tool-to-centralise-workplace-searches"
          }
        ]
      },
      "messaging": {
        "taglines": [
          {
            "text": "For All Things Worth Saving",
            "prov": "published",
            "source": "https://www.marketingdive.com/news/campaign-trail-dropbox-injects-humanity-into-file-storage-with-revamped-br/604826",
            "where": "2021 brand campaign by Instrument: billboards, CTV, social"
          },
          {
            "text": "Find anything. Protect everything.",
            "prov": "observed",
            "source": "https://dash.dropbox.com/",
            "where": "Dropbox Dash product page title and the Oct 2024 Dash for Business release title",
            "source_note": "page title, 2026-10-28"
          },
          {
            "text": "Go from idea to done with Dropbox.",
            "prov": "published",
            "source": "https://brand.dropbox.com/voice-and-tone",
            "where": "Sample line in the voice guide"
          },
          {
            "text": "Get to work, with a lot less work.",
            "prov": "published",
            "source": "https://brand.dropbox.com/voice-and-tone",
            "where": "Sample line in the voice guide"
          }
        ],
        "attributes": [
          "humanity",
          "clarity",
          "action",
          "delight"
        ],
        "key_messages": [],
        "boilerplate": {
          "text": "Dropbox is one place to keep life organized and keep work moving. More than 700 million registered users across 180 countries rely on it. Its mission is to design a more enlightened way of working. Headquartered in San Francisco.",
          "prov": "published",
          "source": "https://investors.dropbox.com/node/13491/pdf",
          "paraphrase": true,
          "why": "Paraphrase of the \"About Dropbox\" press paragraph (the full paragraph runs over 15 words)."
        },
        "pillars": [
          {
            "name": "Find",
            "claim": "Find what you need fast, across Dropbox and your other apps",
            "prov": "inferred",
            "why": "Homepage H2 'Find it fast, every time' and the whole Dash product line",
            "source": "https://www.dropbox.com/",
            "proof": [
              "p-175-types",
              "p-gibbard"
            ]
          },
          {
            "name": "Sync and share",
            "claim": "Everyone stays in sync; sharing big files doesn't slow work down",
            "prov": "inferred",
            "why": "Homepage H2s 'Cloud storage that keeps everyone in sync' and 'Share files without the slowdown'",
            "source": "https://www.dropbox.com/",
            "proof": [
              "p-250gb"
            ]
          },
          {
            "name": "Secure",
            "claim": "Security is built in, never second",
            "prov": "inferred",
            "why": "Homepage H2 'Security never comes second'",
            "source": "https://www.dropbox.com/",
            "proof": []
          },
          {
            "name": "Works with your AI",
            "claim": "Your Dropbox content goes to work inside the AI tools you already use",
            "prov": "inferred",
            "why": "Homepage hero and H2 'Bring Dropbox content into your favorite AI tools' (2026-10-28)",
            "source": "https://www.dropbox.com/",
            "proof": [
              "p-mclaren"
            ]
          }
        ],
        "proof_points": [
          {
            "id": "p-700m",
            "kind": "stat",
            "text": "Over 700 million registered users",
            "source": "https://www.dropbox.com/"
          },
          {
            "id": "p-180",
            "kind": "stat",
            "text": "Registered users across 180 countries",
            "source": "https://investors.dropbox.com/node/13491/pdf"
          },
          {
            "id": "p-250gb",
            "kind": "stat",
            "text": "Large file transfers up to 250GB",
            "source": "https://www.dropbox.com/"
          },
          {
            "id": "p-175-types",
            "kind": "stat",
            "text": "Previews for 175+ file types",
            "source": "https://www.dropbox.com/"
          },
          {
            "id": "p-mclaren",
            "kind": "customer",
            "text": "Official Technology Partner of the McLaren Formula 1 Team (multi-year, from 2024)",
            "source": "https://www.mclaren.com/racing/partners/dropbox/mclaren-racing-announces-dropbox-as-an-official-technology-partner-of-mclaren-formula-1-team/"
          },
          {
            "id": "p-gibbard",
            "kind": "quote",
            "text": "\"Dropbox Dash brings a level of clarity to this chaos.\" Ben Gibbard, Death Cab for Cutie",
            "source": "https://dash.dropbox.com/"
          },
          {
            "id": "p-drakes",
            "kind": "quote",
            "text": "\"For the McLaren F1 Team, speed is a competitive advantage.\" Jonathan Drakes, McLaren F1 Team",
            "source": "https://dash.dropbox.com/"
          },
          {
            "id": "p-logos",
            "kind": "customer",
            "text": "Homepage logo strip: McLaren, Crunch, Cirque du Soleil, Wag!, Hydro Flask, Katz Media Group, Zoom, Lincoln Center",
            "source": "https://www.dropbox.com/"
          }
        ],
        "claim_boundaries": [
          {
            "text": "Never make the Dropbox name plural or possessive, or use it as a noun or verb; it is a capitalized adjective.",
            "prov": "published",
            "source": "https://www.dropbox.com/branding"
          },
          {
            "text": "Partners may say 'works with Dropbox' or 'compatible with Dropbox' only if it's true.",
            "prov": "published",
            "source": "https://www.dropbox.com/branding"
          },
          {
            "text": "Never edit, recolor, rotate, stretch or otherwise modify the logo, or fold it into another logo or product name.",
            "prov": "published",
            "source": "https://www.dropbox.com/branding"
          },
          {
            "text": "Delight stays small: the motion guide prefers a wink over confetti.",
            "prov": "published",
            "source": "https://brand.dropbox.com/motion"
          },
          {
            "text": "No jargon.",
            "prov": "published",
            "source": "https://brand.dropbox.com/voice-and-tone"
          }
        ]
      }
    }
  }
}