Dropbox Brand

A brand-guidelines site where the navigation is the home page. A white screen with a drawn logo scrolls open into an 8-tile colour mosaic around one blue button; the same mosaic is the menu on every subpage, and clicking a tile turns that tile into the next page's opening. There is no WebGL, no GSAP and no smooth-scroll library: native scroll, CSS transforms, masks, clip widths and a few Canvas 2D and Rive pieces. The brand rules are demonstrated by touchable widgets (a bezier editor, a variable-font playground, magnifying colour chips) instead of described.

Rebuild: design-inspiration-rebuilds/design-agencies/dropbox-brand (fictional content, generated images, open-source fonts; installed with the optional design-inspiration-rebuilds skill). Run it with npm install && npm run dev.

Design Tokens

:root {
  --accent: #0061fe; --line: #5f9dff66; --dark: #1e1919;
  --nav-easing: cubic-bezier(.4, 0, .2, 1);
  --swoop: cubic-bezier(.6, 0, 0, 1);
  --tile-transition: .35s var(--nav-easing);
  --nav-tile-gap: 10px;  --button-size: 90px;      /* 5px / 64px at <=991px */
  --opening-margin: 120px; --opening-gutter: 24px;  /* 60/12 at <=991, 32 at <=767 */
}

• Type: a variable wide grotesk for display (original: DB Sharp Grotesk, wght 250-900 plus a wdth axis; substitute: Bricolage Grotesque) at weight ~500-520 and width 100-108. Body and UI in a neutral grotesk (original: Atlas Grotesk; substitute: Inter). Mono readouts in Noto Sans Mono. Script words, if any, use Caveat Brush rather than traced lettering.
• Scale (1440 / 390): page title clamp(0, 10vw, 200px) = 144px / 46.8px with -0.02em tracking and text-wrap: balance; h1 60 / 36, h2 40 / 28, body 14/22, annotation 12/20.
• Grid: 12 columns, 120px margins and 24px gutters on the subpage openings. Everything is in px; fluidity comes from vw maths and one clamp.
• Shape: the mosaic has 8px radii on its four outer corners only, inner corners 0. Hairlines are 1px. No shadows on the UI.

Motion Spec

Key excerpts

Home scroll curve: src/easing.js

export function cubicBezier(x1, y1, x2, y2) {
  const cx = 3 * x1, bx = 3 * (x2 - x1) - cx, ax = 1 - cx - bx;
  const cy = 3 * y1, by = 3 * (y2 - y1) - cy, ay = 1 - cy - by;
  const sx = (t) => ((ax * t + bx) * t + cx) * t;
  const sy = (t) => ((ay * t + by) * t + cy) * t;
  return (x) => {
    if (x <= 0) return 0;
    if (x >= 1) return 1;
    let lo = 0, hi = 1, t = x;
    for (let i = 0; i < 12; i++) {           // 12 subdivisions
      t = (lo + hi) / 2;
      sx(t) < x ? (lo = t) : (hi = t);
    }
    return sy(t);
  };
}
export const homeCurve = cubicBezier(1, 0.25, 0.85, 1);

Raw scroll progress goes through homeCurve once per frame; its output drives tile scale, tile translation and the button states.

Scroll toolkit (no smooth-scroll library): src/fx/scroll.js

export function onFrame(fn) {
  let t = false;
  const run = () => { t = false; fn(); };
  const req = () => { if (!t) { t = true; requestAnimationFrame(run); } };
  addEventListener('scroll', req, { passive: true }); addEventListener('resize', req);
  fn();
}
export const stickyProgress = (el) => {
  const r = el.getBoundingClientRect();
  return clamp(-r.top / Math.max(1, r.height - innerHeight));
};

Outline to fill mask: src/styles/pages.css, src/fx/mask-reveal.js

.w { position: relative; display: inline-block; color: transparent; -webkit-text-stroke: 1.2px var(--c1-fg); }
.w::after { content: attr(data-w); position: absolute; left: 0; top: 0; color: var(--c1-fg); -webkit-text-stroke: 0;
  mask: linear-gradient(90deg, #000 50%, transparent 50%) 0 0 / 200% 100%;
  mask-position: var(--mp, 100%) 0; }

// words revealed in sequence: global progress g is split by cumulative letter counts
const p = easeOutQuad(clamp((g - a) / (b - a)));
w.style.setProperty('--mp', `${100 * (1 - p)}%`);

The mask is a hard-edged gradient at 200% width, so moving mask-position from 100% to 0% wipes the solid copy across the outlined word.

Subpage opening stagger: src/opening.js

const ease = 'cubic-bezier(.6,0,.6,1)';
const set = (el, d) => {
  el.style.transition = `opacity .7s ${d}ms ${ease}, transform .7s ${d}ms ${ease}, background-color .3s ${d + 400}ms ease-in-out`;
};
op.querySelectorAll('.ol-h').forEach((el, i) => set(el, i * 200));
op.querySelectorAll('.ol-v').forEach((el, i) => set(el, i * 200 + 100));
op.querySelectorAll('.title-wrap, .oel').forEach((el, i) => set(el, i * 80 + 160));
requestAnimationFrame(() => op.classList.remove('pre'));

Drag with momentum: src/fx/drag-scroller.js

const tick = () => {
  s.v *= friction;                       // .95 per frame
  apply(s.x + s.v);
  if (Math.abs(s.v) > 0.1) raf = requestAnimationFrame(tick);
};
// pointermove
s.v = (dx / dt) * 50 / 3;                // release velocity scaled by the original's x50

prefers-reduced-motion: the tile-to-page transition, carousels, marquees and the type contrast card are disabled or fixed; content is simply visible. No horizontal overflow at 768 or 390 on any page.

Why Award-Worthy

1. The menu is the home page and the transition. Scroll pulls the mosaic out of a white screen; clicking a tile makes that very tile the next page's opening, with the title landing in the same column on the same dark background. No spinner, no wipe, and the overscroll-to-open and button warp reuse the same motion, so navigation feels like one physical system.
2. The guidelines demonstrate themselves. A timeline and bezier editor, a live variable-font playground, magnifying colour chips and a fake "Generate options" streamer: every rule is something you can touch.
3. A strict, tiny system. One blue, one near-black, eight identity pairs, hairline grids and one variable typeface. Constraint reads as confidence, and the 12-column vw maths holds at any width.
4. Native performance and robustness. No scroll-jacking and no WebGL; rAF-throttled handlers write transforms and masks. Reduced motion is honoured, hidden layers are inert, and transitions are suppressed during resize.
5. Collaboration metaphors as brand. Cursor tags, doodles, selection handles and timelines make the brand feel like the product: a shared workspace.

Anti-patterns it avoids: no custom cursor replacing the system one; no preloader percentage; no fake-smooth scroll lag; no autoplay audio; no blocking WebGL; no horizontal overflow; no hidden navigation (button and Escape always reach the menu).

Credits

• Original: brand.dropbox.com by Daybreak Studio. Design and content are the intellectual property of their creators.
• Recognition: Awwwards Site of the Month (Feb 2025), Site of the Day, Developer Award.
• This study is an independent clean-room analysis. The rebuild uses a fictional brand, generated images and open-source fonts; it contains no original code, assets or copy.