JSON Design tokens

For JSON lovers


_design-tokens.json:

{
  "gg-color": {
    "black": "#000000",
    "white": "#FFFFFF",
    "light-pink": "#EB5F8E",
    "light-green": "#72B72A",
    "light-blue": "#35ADCE",
    "yellow": "#FCC31E",
    "dark-pink": "#AE0D21",
    "dark-green": "#007349",
    "dark-blue": "#00528A",
    "orange": "#EA5B25",
    "graphite": "#2F2E31",
    "dove-grey": "#666666",
    "alto": "#D0D0D0",
    "wild-sand": "#F5F5F5",
    "gallery": "#ECECEC"
  },
  "gg-breakpoint": {
    "tiny": "320px",
    "small": "360px",
    "medium": "768px",
    "large": "992px"
  },
  "gg-grid": {
    "unit": "8px"
  },
  "gg-icon": {
    "small": "16px",
    "medium": "24px",
    "large": "48px",
    "huge": "72px",
    "gargantuan": "120px",
    "colossal": "192px"
  },
  "gg-image": {
    "tiny": "72px",
    "small": "120px",
    "medium": "192px",
    "large": "312px",
    "huge": "504px"
  },
  "gg-layout": {
    "min-width": "320px",
    "max-width": "1140px",
    "header-height": "56px"
  },
  "gg-spacer": {
    "fine": "4px",
    "tiny": "8px",
    "small": "16px",
    "medium": "24px",
    "large": "48px",
    "huge": "72px"
  },
  "gg-text": {
    "megaphone": {
      "font-size": "40px",
      "line-height": "48px",
      "font-weight": "700",
      "medium-breakpoint": {
        "font-size": "82px",
        "line-height": "88px",
        "letter-spacing": "-.02em"
      }
    },
    "shout": {
      "font-size": "32px",
      "line-height": "40px",
      "font-weight": "700",
      "medium-breakpoint": {
        "font-size": "54px",
        "line-height": "64px"
      }
    },
    "louder": {
      "font-size": "24px",
      "line-height": "32px",
      "font-weight": "700",
      "medium-breakpoint": {
        "font-size": "36px",
        "line-height": "48px"
      }
    },
    "loud": {
      "font-size": "20px",
      "line-height": "24px",
      "font-weight": "500",
      "medium-breakpoint": {
        "font-size": "24px",
        "line-height": "32px"
      }
    },
    "speak-up": {
      "font-size": "16px",
      "font-weight": "700",
      "line-height": "24px"
    },
    "speak": {
      "font-size": "16px",
      "font-weight": "400",
      "line-height": "24px"
    },
    "whisper-loud": {
      "font-size": "12px",
      "letter-spacing": ".02em",
      "font-weight": "700",
      "line-height": "20px"
    },
    "whisper": {
      "font-size": "12px",
      "letter-spacing": ".02em",
      "font-weight": "400",
      "line-height": "20px"
    }
  }
}