Design tokens

Page generated on: 4/17/2024, 11:07:51 AM

Colors:

{
  "colors": {
    "primary": {
      "25": "#B0C6C1",
      "50": "#41AFB0",
      "75": "#379596",
      "100": "#0B646B"
    },
    "secondary": {
      "25": "#FF9A4E",
      "50": "#FF7812",
      "75": "#F27211",
      "100": "#E66C10"
    },
    "longread": {
      "25": "#F49886",
      "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": "#73655F",
      "50": "#A6988F",
      "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"
  },
  "heading": {
    "line-height": 1.2,
    "sans-serif": {
      "xxs": {
        "font-size": 0.8125,
        "s": {
          "font-size": 0.9375
        }
      },
      "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
        }
      }
    },
    "serif": {
      "xxs": {
        "font-size": 1.0625,
        "s": {
          "font-size": 1.3125
        }
      },
      "xs": {
        "font-size": 1.0625,
        "s": {
          "font-size": 1.3125
        }
      },
      "s": {
        "font-size": 1.275,
        "s": {
          "font-size": 1.575
        }
      },
      "m": {
        "font-size": 1.53,
        "s": {
          "font-size": 1.89
        }
      },
      "l": {
        "font-size": 1.836,
        "s": {
          "font-size": 2.268
        }
      },
      "xl": {
        "font-size": 2.2032,
        "s": {
          "font-size": 2.7216
        }
      },
      "xxl": {
        "font-size": 2.64384,
        "s": {
          "font-size": 3.26592
        }
      }
    }
  },
  "body": {
    "line-height": 1.5,
    "sans-serif": {
      "line-height": 1.4,
      "xxs": {
        "font-size": 0.875,
        "s": {
          "font-size": 0.9375
        }
      },
      "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
        }
      }
    },
    "serif": {
      "xxs": {
        "font-size": 1.0625,
        "s": {
          "font-size": 1.3125
        }
      },
      "xs": {
        "font-size": 1.0625,
        "s": {
          "font-size": 1.3125
        }
      },
      "s": {
        "font-size": 1.275,
        "s": {
          "font-size": 1.575
        }
      },
      "m": {
        "font-size": 1.275,
        "s": {
          "font-size": 1.575
        }
      },
      "l": {
        "font-size": 1.275,
        "s": {
          "font-size": 1.575
        }
      },
      "xl": {
        "font-size": 1.275,
        "s": {
          "font-size": 1.575
        }
      },
      "xxl": {
        "font-size": 1.275,
        "s": {
          "font-size": 1.575
        }
      }
    }
  }
}

Fonts

bold:

bold-serif:

regular:

regular-serif:

Media query sizes:

{
  "sizes": {
    "xs": "\"640px\"",
    "s": "\"640px\"",
    "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

longread

persoonlijk

negative

neutral

Fonts

SVG Icons