前一日我們建立好的規則如下圖：

接下來再將我們制定好的規則寫進設定檔，提供組件建立時讀取即可。

const theme = {
  colors: {
   primary: '#60C4F8',
   secondary: '#71D664',
   success: '#5EB253',
   info: '#60A6F8',
   warning: '#FFC05A',
   danger: '#F86C6C',
   black: '#33484B',
   white: '#FFF',
   grey4: '#60797C',
   grey3: '#8B9FA2',
   grey2: '#B2BFC1',
   grey1: '#D9E0E2',
   grey0: '#FAFAFA',
  },
  typography: {
    htmlFontSize: 16,
    h1: { fontSize: '6rem'},
    h1: { fontSize: '4.5rem'},
    h1: { fontSize: '3.75rem'},
    h1: { fontSize: '3rem'},
    h1: { fontSize: '2.25rem'},
    h1: { fontSize: '1.75rem'},
    content: { fontSize: '1rem'},
  },
  spacing: 8,
  getSpacing: (num = 1) => {
    return 8 * num;
  }
}