Some random companies design system...

theme.js

/**
 * * Styled Components Theme *
 * This theme file contains an object which holds values for
 * common variables such as color, fonts, box shadows, and more.
 * Our theme file pulls many of its conventions from styled-system.
 *
 * * Further Reading:
 * - https://primer.style/components/docs/primer-theme
 * - https://styled-system.com/table
 */

/**
 * Borders
 */
const borders = ['0', '1px solid', '2px solid', `3px solid`];

/**
 * Breakpoints
 */
const breakpoints = [0, 480, 768, 1024, 1440];
[breakpoints.xsmall, breakpoints.small, breakpoints.medium, breakpoints.large, breakpoints.xlarge] = breakpoints;

/**
 * Colors
 */
const colors = {
  red: {
    primary: `#a60000`,
    secondary: `#ff0000`,
  },

  grey: {
    primary: `#f7f7f7`,
    secondary: `#e8e6e6`,
    highlight: `#606060`,
    disabled: `#828282`,
  },

  black: {
    primary: `#353535`,
    secondary: `#4a4a4a`,
  },

  brown: {
    primary: `#4c3327`,
  },

  green: {
    primary: `#00683b`,
    secondary: `#005530`,
    highlight: `#80bb00`,
  },

  orange: {
    primary: `#fb7932`,
    secondary: `#fb6900`,
  },

  white: {
    primary: `#ffffff`,
  },
};

colors.state = {
  error: colors.red.primary,
  errorBg: ``,
  warning: ``,
  warningBg: ``,
  success: colors.green.highlight,
  successBg: ``,
};

colors.border = {
  lighterGray: colors.lighterGray,
  lightGray: '#c5c5c5',
};

/**
 * Buttons
 */
const buttons = {
  primary: {
    bg: colors.green.primary,
    borderColor: ``,
    borderStyle: ``,
    borderWidth: ``,
    color: colors.white.primary,
    ':hover': {
      bg: ``,
      borderColor: ``,
    },

    ':focus': {
      bg: ``,
      borderColor: ``,
    }
  },

  active: {
    bg: colors.orange.primary,
    borderColor: ``,
    borderStyle: ``,
    borderWidth: ``,
    color: colors.white.primary,
    ':hover': {
      bg: ``,
      borderColor: ``,
    },

    ':focus': {
      bg: ``,
      borderColor: ``,
    }
  },

  disabled: {
    bg: '',
    borderColor: ``,
    borderStyle: ``,
    borderWidth: ``,
    color: '',
    ':hover': {
      bg: ``,
      borderColor: ``,
    },

    ':focus': {
      bg: ``,
      borderColor: ``,
    }
  },

  cancel: {
    bg: '',
    borderColor: ``,
    borderStyle: ``,
    borderWidth: ``,
    color: '',
    ':hover': {
      bg: ``,
      borderColor: ``,
    },

    ':focus': {
      bg: ``,
      borderColor: ``,
    }
  },
};

/**
 * Fonts
 */
const fonts = {
  normal: `"freight-sans-pro", Georgia,Times, Times New Roman, sans-serif`,
  trendSansOne: `"Trend HM Sans One" ,sans-serif`,
};

const fontSizes = [12, 14, 16, 18, 24, 28, 32, 40];
[
  fontSizes.xsmall,
  fontSizes.small,
  fontSizes.medium,
  fontSizes.large,
  fontSizes.xlarge,
  fontSizes.xxlarge,
  fontSizes.xxxlarge,
] = fontSizes;

const fontWeights = {
  light: 300,
  normal: 400,
  semiBold: 600,
  bold: 700,
};

/**
 * Gutters
 */

const gutters = [0, 4, 8, 16, 24, 32];
[gutters.none, gutters.xsmall, gutters.small, gutters.medium, gutters.large, gutters.xlarge] = gutters;

/**
 * Line Heights
 */

const lineHeights = {
  condensedUltra: 1,
  condensed: 1.25,
  default: 1.5,
  expanded: 2.0,
  expandedUltra: 2.5,
};

/**
 * Max Widths
 */

const maxWidths = {
  menu: 256,
  xsmall: 350,
  small: 544,
  medium: 768,
  large: 1000,
  xlarge: 1280,
};

/**
 * Radii
 */

const radii = [0, 4, 8, 12, 30];

/**
 * Shadows
 */
const shadows = {
  small: '0 1px 1px rgba(27, 31, 35, 0.1)',
  medium: '0 1px 5px rgba(27, 31, 35, 0.15)',
  large: '0 1px 15px rgba(27, 31, 35, 0.15)',
  xlarge: '0 10px 50px rgba(27, 31, 35, 0.07)',
  dropdown: 'inset 0 0 0 0 rgba(0,0,0,0.1), 0 0 3px 1px rgba(0,0,0,0.3)',
  formControl: 'inset 0 1px 2px rgba(0,0,0,0.1)',
};

/**
 * Spacing
 */
const space = [0, 4, 8, 16, 32, 64, 128, 256, 512];
[space.none, space.xsmall, space.small, space.medium, space.large, space.xlarge, space.xxlarge] = space;

/**
 * Timings
 */

const timings = [250, 400, 600, 1000, 4000];

/**
 * Z-Index
 */
const zIndices = {
  contentMask: 500,
  header: 1000,
  modal: 2000,
  googleMapsAutocomplete: 2100,
};

export default {
  borders,
  breakpoints,
  colors,
  buttons,
  fonts,
  fontSizes,
  fontWeights,
  gutters,
  lineHeights,
  maxWidths,
  radii,
  shadows,
  space,
  timings,
  zIndices,
};