Design tokens

Page generated on: 1/12/2022, 9:20:48 AM

Colors:

{
  "colors": {
    "primary": {
      "25": "#B0C6C1",
      "50": "#41AFB0",
      "75": "#379596",
      "100": "#0B646B"
    },
    "secondary": {
      "25": "#FF9A4E",
      "50": "#FF7812",
      "75": "#F27211",
      "100": "#E66C10"
    },
    "accent": {
      "1": "#ffd200",
      "2": "#3f466a",
      "3": "#0075b7"
    },
    "negative": {
      "25": "#D54B4B",
      "50": "#E01111",
      "75": "#C60F0F",
      "100": "#AD0D0D"
    },
    "neutral": {
      "0": "#000000",
      "10": "#1b1b1b",
      "20": "#303030",
      "30": "#474747",
      "40": "#5e5e5e",
      "50": "#777777",
      "60": "#919191",
      "70": "#ababab",
      "80": "#c6c6c6",
      "90": "#e2e2e2",
      "100": "#FFFFFF"
    }
  }
}

primary

25:

50:

75:

100:

secondary

25:

50:

75:

100:

accent

negative

25:

50:

75:

100:

neutral

10:

20:

30:

40:

50:

60:

70:

80:

90:

100:

Typography:

{
  "font-family": {
    "bold": "GlacialBold",
    "regular": "helvetica",
    "slim": "Glacial"
  },
  "heading": {
    "line-height": 1.2,
    "sans-serif": {
      "xs": {
        "font-size": 1,
        "s": {
          "font-size": 1.125
        }
      },
      "s": {
        "font-size": 1.2,
        "s": {
          "font-size": 1.35
        }
      },
      "m": {
        "font-size": 1.44,
        "s": {
          "font-size": 1.62
        }
      },
      "l": {
        "font-size": 1.728,
        "s": {
          "font-size": 1.944
        }
      },
      "xl": {
        "font-size": 2.0736,
        "s": {
          "font-size": 2.3328
        }
      },
      "xxl": {
        "font-size": 2.48832,
        "s": {
          "font-size": 2.79936
        }
      }
    }
  },
  "body": {
    "line-height": 1.5,
    "sans-serif": {
      "line-height": 1.4,
      "xs": {
        "font-size": 0.875,
        "s": {
          "font-size": 0.9375
        }
      },
      "s": {
        "font-size": 1,
        "s": {
          "font-size": 1.125
        }
      },
      "m": {
        "font-size": 1.2,
        "s": {
          "font-size": 1.35
        }
      },
      "l": {
        "font-size": 1.2,
        "s": {
          "font-size": 1.35
        }
      },
      "xl": {
        "font-size": 1.2,
        "s": {
          "font-size": 1.35
        }
      },
      "xxl": {
        "font-size": 1.2,
        "s": {
          "font-size": 1.35
        }
      }
    }
  }
}

Fonts

bold:

regular:

slim:

Media query sizes:

{
  "sizes": {
    "xs": "\"640px\"",
    "s": "\"641px\"",
    "m": "\"768px\"",
    "l": "\"1024px\"",
    "xl": "\"1280px\"",
    "xs-min-width": "640",
    "s-min-width": "768",
    "m-min-width": "896",
    "l-min-width": "1024",
    "xl-min-width": "1280",
    "xxl-min-width": "1600"
  }
}

Design tokens

primary

secondary

accent

negative

neutral

Fonts

SVG Icons