---
name: Theming
order: 3
---

import { Playground } from 'docz';

import { Box } from '~/components/Box';

import { theme } from '~/styles/theme';

# Theming

Polymath UI is using [Styled Components theming capabilities](https://www.styled-components.com/docs/advanced#theming).

Every spacing and typography styles should follow the scales provided in the theme.

## Default theme

Components are designed based on the following theme:

<Playground>
  <pre>{JSON.stringify(theme, null, 4)}</pre>
</Playground>
