link-stack/packages/ui/styles/theme.ts

import { Roboto, Playfair_Display, Poppins } from "next/font/google";

const roboto = Roboto({
  weight: ["400"],
  subsets: ["latin"],
  display: "swap",
});

const playfair = Playfair_Display({
  weight: ["900"],
  subsets: ["latin"],
  display: "swap",
});

const poppins = Poppins({
  weight: ["400", "600", "700"],
  subsets: ["latin"],
  display: "swap",
});

export const fonts = {
  roboto,
  playfair,
  poppins,
};

export const colors: any = {
  veryLightGray: "#f5f5f7",
  lightGray: "#ededf0",
  mediumGray: "#e3e5e5",
  darkMediumGray: "#a3a5a5",
  highlightGray: "#818383",
  darkGray: "#33302f",
  veryDarkGray: "#25272A",
  mediumBlue: "#4285f4",
  darkBlue: "#2063d2",
  green: "#349d7b",
  lavender: "#a5a6f6",
  darkLavender: "#5d5fef",
  pink: "#fcddec",
  cdrLinkOrange: "#ff7115",
  coreYellow: "#fac942",
  helpYellow: "#fff4d5",
  dwcDarkBlue: "#191847",
  hazyMint: "#ecf7f8",
  leafcutterElectricBlue: "#4d6aff",
  leafcutterLightBlue: "#fafbfd",
  waterbearElectricPurple: "#332c83",
  waterbearLightSmokePurple: "#eff3f8",
  bumpedPurple: "#212058",
  mutedPurple: "#373669",
  warningPink: "#ef5da8",
  lightPink: "#fff0f7",
  lightGreen: "#f0fff3",
  lightOrange: "#fff5f0",
  beige: "#f6f2f1",
  brightRed: "#ff0030",
  mediumRed: "#bb0010",
  almostBlack: "#33302f",
  white: "#ffffff",
  black: "#000000",
};

export const typography: any = {
  h1: {
    fontFamily: playfair.style.fontFamily,
    fontSize: 45,
    fontWeight: 700,
    lineHeight: 1.1,
    margin: 0,
  },
  h2: {
    fontFamily: poppins.style.fontFamily,
    fontSize: 35,
    fontWeight: 700,
    lineHeight: 1.1,
    margin: 0,
  },
  h3: {
    fontFamily: poppins.style.fontFamily,
    fontWeight: 600,
    fontSize: 27,
    lineHeight: 1.1,
    margin: 0,
  },
  h4: {
    fontFamily: poppins.style.fontFamily,
    fontWeight: 700,
    fontSize: 22,
  },
  h5: {
    fontFamily: roboto.style.fontFamily,
    fontWeight: 700,
    fontSize: 16,
    lineHeight: "24px",
    textTransform: "uppercase",
    textAlign: "center",
    margin: 1,
  },
  h6: {
    fontFamily: roboto.style.fontFamily,
    fontWeight: 400,
    fontSize: 14,
    textAlign: "center",
  },
  p: {
    fontFamily: roboto.style.fontFamily,
    fontSize: 17,
    lineHeight: "26.35px",
    fontWeight: 400,
    margin: 0,
  },
  small: {
    fontFamily: roboto.style.fontFamily,
    fontSize: 13,
    lineHeight: "18px",
    fontWeight: 400,
    margin: 0,
  },
};