Dropbox Brand Guidelines

:root {
  --color-dominant: #0564fc;
  --color-surface: #91bcfc;
  --color-ink: #013383;
  --color-accent: #7c7c78;
  --color-detail: #d9e1eb;
}

/* CSS variables exposed by source */
:root {
  --color--identity--pink: #ffafa5;
  --color--identity--on-yellow: #684505;
  --accent--tab: #0061fe;
  --color--identity--blue: #b4c8e1;
  --color--accent--plum: #78286e;
  --color--identity--cyan: #3dd3ee;
  --color--accent--line-solid: #5f9dff;
  --color--accent--cloud: #b4c8e1;
  --color--identity--on-cyan: #055463;
  --surface--background-light: white;
  --color--accent--canopy: #0f503c;
  --color--identity--on-red: #4e0119;
  --color--accent--gold: #9b6400;
  --color--accent--azalea: #cd2f7b;
  --text--text-subtle-light: #736c64;
  --color--accent--tangerine: #ff8c19;
  --accent--logo: white;
  --color--identity--on-orange: #6d2e09;
  --color--identity--on-blue: #283750;
  --color--identity--red: #fa551e;
  --color--identity--purple: #c8aff0;
  --accent--ui-accent: #0061fe;
  --color--accent--crimson: #9b0032;
  --color--identity--on-green: #175641;
  --text--base: #1a1918;
  --color--identity--green: #b4dc19;
  --text--text-light: #1e1919;
  --color--accent--lime: #b4dc19;
  --color--accent--zen: #14c8eb;
  --color--accent--ocean: #007891;
  --color--identity--on-purple: #682760;
  --color--identity--yellow: #fad24b;
  --color--accent--coconut: #f7f5f2;
  --text--text-subtle-dark: #bbb5ae;
  --color--accent--pink: #ffafa5;
  --color--accent--rust: #be4b0a;
  --color--accent--vivid-vargas: #fad24b;
  --surface--background-dark: #1e1919;
  --color--identity--orange: #f9a34b;
  --color--accent--orchid: #c8aff0;
  --text--text-dark: white;
  --color--identity--on-pink: #892055;
  --surface--overlay-subtle: #f7f6f5;
  --color--accent--navy: #283750;
  --color--accent--sunset: #fa551e;
  --color--accent--line: #5f9dff66;
  --opening-span-4: calc(4 * calc((calc(100vw - calc(2 * 120px)) - calc(11 * 24px)) / 12) + 3 * 24px);
  --opening-col-11-left: calc(120px + 10 * (calc((calc(100vw - calc(2 * 120px)) - calc(11 * 24px)) / 12) + 24px));
  --body-margin: calc((100vw - min(calc(100vw - calc(2 * 120px)), 1920px)) / 2);
  --opening-col-6-left: calc(120px + 5 * (calc((calc(100vw - calc(2 * 120px)) - calc(11 * 24px)) / 12) + 24px));
  --body-span-3: calc(3 * calc((min(calc(100vw - calc(2 * 120px)), 1920px) - calc(11 * 24px)) / 12) + 2 * 24px);
  --opening-span-10: calc(10 * calc((calc(100vw - calc(2 * 120px)) - calc(11 * 24px)) / 12) + 9 * 24px);
  --opening-col-10-left: calc(120px + 9 * (calc((calc(100vw - calc(2 * 120px)) - calc(11 * 24px)) / 12) + 24px));
  --opening-span-5: calc(5 * calc((calc(100vw - calc(2 * 120px)) - calc(11 * 24px)) / 12) + 4 * 24px);
  --nav-easing-swoop: cubic-bezier(.6,0,0,1);
  --body-col-11-left: calc(calc((100vw - min(calc(100vw - calc(2 * 120px)), 1920px)) / 2) + 10 * (calc((min(calc(100vw - calc(2 * 120px)), 1920px) - calc(11 * 24px)) / 12) + 24px));
  --opening-col-8-right: calc(120px + 7 * (calc((calc(100vw - calc(2 * 120px)) - calc(11 * 24px)) / 12) + 24px) + calc((calc(100vw - calc(2 * 120px)) - calc(11 * 24px)) / 12));
  --body-col-12-left: calc(calc((100vw - min(calc(100vw - calc(2 * 120px)), 1920px)) / 2) + 11 * (calc((min(calc(100vw - calc(2 * 120px)), 1920px) - calc(11 * 24px)) / 12) + 24px));
  --opening-col-10-right: calc(120px + 9 * (calc((calc(100vw - calc(2 * 120px)) - calc(11 * 24px)) / 12) + 24px) + calc((calc(100vw - calc(2 * 120px)) - calc(11 * 24px)) / 12));
  --opening-col-12-right: calc(100vw - 120px);
}