Every design system needs a "building block" component. Can have all properties from [styled-system](https://github.com/jxnblk/styled-system).

Font sizes

    <Spokes fontSize={[1,2,3]}>Based on breakpoints</Spokes>

Margin and padding

    <Spokes m={[1,2,3]} p={[1,2,3]}>Based on breakpoints</Spokes>

Text color

    <Spokes color={["success", "warning", "danger"]}>Based on breakpoints</Spokes>

Background color

    <Spokes bg={["success", "warning", "danger"]}>Based on breakpoints</Spokes>

All of them!

    <Spokes fontSize={[1,2,3]} m={[1,2,3]} p={[1,2,3]} color={["danger", "success", "warning"]} bg={["success", "warning", "danger"]}>Based on breakpoints</Spokes>


Can be any element

    const Spokes = require("./index");
    const P = Spokes.Base.withComponent("p");

    <P f={5} m={0}>I'm a big paragraph</P>
