text: 
  export const common = {
    white: 'hsl(0, 0%, 100%)',
    black: 'hsl(0, 0%, 0%)',
    transparent: 'transparent',
    current: 'current'
  }
  
  // Shamelessly pinched from tailwind, its a great scale. Thanks to a great team.
  export const gray = {
    50: '#ffffff',
    75: '#fafbff',
    100: '#f7fafc',
    200: '#edf2f7',
    300: '#e2e8f0',
    400: '#cbd5e0',
    500: '#a0aec0',
    600: '#718096',
    700: '#4a5568',
    800: '#2d3748',
    900: '#1a202c'
  }
  
  // These scales are hurried, with colours taken from crayola colours.
  // In all honesty they don't really fit too well and tailwind colours could be
  // used again here. In any case, it doesn't matter too much at present as
  // defining the schema is more important than the actual content right now.
  export const red = {
    400: '#fe6f5e',
    500: '#fd0e35',
    600: '#ed0a3f',
    700: '#c62d42'
  }
  
  export const blue = {
    400: '#93ccea',
    500: '#4997d0',
    600: '#4570e6',
    700: '#00468C'
  }
  
  export const yellow = {
    400: '#fbe7b2',
    500: '#fbe870',
    600: '#fcd667',
    700: '#ffae42'
  }
  
  export const green = {
    400: '#93dfb8',
    500: '#33cc99',
    600: '#29AB87',
    700: '#00755e'
  }
  
  export const lightAlpha = {
    100: 'hsla(0, 100%, 100%, 0.03)',
    200: 'hsla(0, 100%, 100%, 0.12)',
    300: 'hsla(0, 100%, 100%, 0.20)',
    400: 'hsla(0, 100%, 100%, 0.32)',
    500: 'hsla(0, 100%, 100%, 0.48)',
    600: 'hsla(0, 100%, 100%, 0.62)',
    700: 'hsla(0, 100%, 100%, 0.80)',
    800: 'hsla(0, 100%, 100%, 0.88)',
    900: 'hsla(0, 100%, 100%, 0.92)'
  }
  
  export const darkAlpha = {
    100: 'hsla(0, 0%, 0%, 0.03)',
    200: 'hsla(0, 0%, 0%, 0.12)',
    300: 'hsla(0, 0%, 0%, 0.20)',
    400: 'hsla(0, 0%, 0%, 0.32)',
    500: 'hsla(0, 0%, 0%, 0.48)',
    600: 'hsla(0, 0%, 0%, 0.62)',
    700: 'hsla(0, 0%, 0%, 0.80)',
    800: 'hsla(0, 0%, 0%, 0.88)',
    900: 'hsla(0, 0%, 0%, 0.92)'
  }
  