The Design Graph Framework

export default {
  fonts: {
    body: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
    heading: '"Avenir Next", sans-serif',
    monospace: 'Menlo, monospace',
  },
  colors: {
    text: '#000',
    background: '#fff',
    primary: '#33e',
    secondary: '#119',
    muted: '#f6f6f6',
  },
  fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 96],
  space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
}

import { ThemeUIProvider } from 'theme-ui'
import theme from './theme'

export default function App() {
  return (
    <ThemeUIProvider theme={theme}>
      <YourApp />
    </ThemeUIProvider>
  )
}

/** @jsxImportSource theme-ui */

export default function Button({ children }) {
  return (
    <button
      sx={{
        bg: 'primary',
        color: 'white',
        px: 4,
        py: 2,
        fontSize: 2,
        borderRadius: 4,
        cursor: 'pointer',
        '&:hover': {
          bg: 'secondary',
        },
      }}
    >
      {children}
    </button>
  )
}