Design tokens

Page generated on: 9/14/2020, 8:39:48 AM

Colors:

{
  "colors": {
    "primary": {
      "25": "#B0C6C1",
      "50": "#41AFB0",
      "75": "#379596",
      "100": "#0B646B"
    },
    "secondary": {
      "25": "#FF9A4E",
      "50": "#FF7812",
      "75": "#F27211",
      "100": "#E66C10"
    },
    "longread": {
      "25": "#F47C65",
      "50": "#F05031",
      "75": "#D6472C",
      "100": "#A3180F"
    },
    "persoonlijk": {
      "25": "#F2B384",
      "50": "#F28533",
      "75": "#E57E30",
      "100": "#CC702B"
    },
    "negative": {
      "25": "#D54B4B",
      "50": "#E01111",
      "75": "#C60F0F",
      "100": "#AD0D0D"
    },
    "neutral": {
      "0": "#000000",
      "10": "#191919",
      "20": "#332F2C",
      "30": "#4C4642",
      "40": "#917F78",
      "50": "#B4A59B",
      "60": "#CDBEB4",
      "70": "#E5D1C6",
      "80": "#F1DED2",
      "90": "#FFEADB",
      "100": "#FFFFFF"
    }
  }
}

primary

25:

50:

75:

100:

secondary

25:

50:

75:

100:

longread

25:

50:

75:

100:

persoonlijk

25:

50:

75:

100:

negative

25:

50:

75:

100:

neutral

10:

20:

30:

40:

50:

60:

70:

80:

90:

100:

Typography:

{
  "font-family": {
    "bold": "ProximaNovaBold",
    "bold-serif": "ArnhemProBold",
    "regular": "ProximaNovaRegular",
    "regular-serif": "ArnhemProBlond"
  }
}

Fonts

bold:

bold-serif:

regular:

regular-serif:

Media query sizes:

{
  "sizes": {
    "xs": "\"640px\"",
    "s": "\"641px\"",
    "m": "\"768px\"",
    "l": "\"1024px\"",
    "xl": "\"1280px\""
  }
}

Design tokens

primary

secondary

longread

persoonlijk

negative

neutral

Fonts

SVG Icons