The system,
with its layers intact.

pcSpace

{
  "1": {
    "desktop": 4,
    "mobile": 4
  },
  "2": {
    "desktop": 8,
    "mobile": 8
  },
  "3": {
    "desktop": 12,
    "mobile": 12
  },
  "4": {
    "desktop": 16,
    "mobile": 12
  },
  "5": {
    "desktop": 24,
    "mobile": 16
  },
  "6": {
    "desktop": 32,
    "mobile": 24
  },
  "7": {
    "desktop": 48,
    "mobile": 32
  },
  "8": {
    "desktop": 64,
    "mobile": 40
  },
  "9": {
    "desktop": 96,
    "mobile": 56
  }
}

pcGap

{
  "1": 8,
  "2": 16,
  "3": 24,
  "4": 32,
  "5": 40,
  "6": 68
}

pcStroke

{
  "hairline": {
    "desktop": 1,
    "mobile": 1
  },
  "ink": {
    "desktop": 2,
    "mobile": 1
  },
  "heavy": {
    "desktop": 3,
    "mobile": 2
  }
}

pcControl

{
  "sm": {
    "desktop": 36,
    "mobile": 28
  },
  "md": {
    "desktop": 50,
    "mobile": 40
  },
  "lg": {
    "desktop": 64,
    "mobile": 48
  },
  "xl": {
    "desktop": 82,
    "mobile": 60
  }
}

pcRadius

{
  "none": 0,
  "sm": 4,
  "md": 8
}

pcBand

{
  "bleed": 1857,
  "stage": 1820,
  "wide": 1650,
  "pair": 1569,
  "body": 1428,
  "section": 1007,
  "inline": 491,
  "stageMobile": 412
}

pcFrame

{
  "desktop": {
    "frame": 1920,
    "stage": 1820,
    "outerMargin": 50,
    "topMargin": 40
  },
  "mobile": {
    "frame": 478,
    "stage": 412,
    "outerMargin": 32,
    "topMargin": 18
  }
}

Foundations dsGrid

{
  "desktop": {
    "frame": 1440,
    "columns": 12,
    "margin": 40,
    "gutter": 24
  },
  "mobile": {
    "frame": 480,
    "columns": 4,
    "margin": 18,
    "gutter": 16
  }
}

Durations · ms

{
  "instant": 40,
  "fast": 150,
  "base": 200,
  "slow": 240,
  "page": 320,
  "hero": 620
}

Timing functions

{
  "out": "cubic-bezier(0, 0, .2, 1)",
  "emphasized": "cubic-bezier(.16, 1, .3, 1)",
  "linear": "linear",
  "step": "steps(1)"
}

Vertical travel: 12px