Intouch Design
System

Themeable React component primitives focused on developer experience, performance, and accessibility.

Hello world
<Box
    color="white"
    backgroundColor="#5e00ff"
    padding="48px"
    textTransform="uppercase"
>
    Hello world
</Box>
<Box
    color="white"
    backgroundColor="#5e00ff"
    padding="48px"
    textTransform="uppercase"
>
    Hello world
</Box>
Live Demo

Organize styles into reusable component variants, and customize those variants on the fly.

Hello world
<Heading
    variant="Fancy"
    fontSize="1.875rem"
    letterSpacing="0.1em"
    borderBottom="3px solid"
>
    Hello world
</Heading>
<Heading
    variant="Fancy"
    fontSize="1.875rem"
    letterSpacing="0.1em"
    borderBottom="3px solid"
>
    Hello world
</Heading>
Live Demo

Build a global theme containing design tokens and scales, then use those values to style your app.

Hello world
<Text
    color="Primary"
    backgroundColor="Secondary"
    padding={2}
    fontSize={4}
>
    Hello world
</Text>
<Text
    color="Primary"
    backgroundColor="Secondary"
    padding={2}
    fontSize={4}
>
    Hello world
</Text>
Live Demo

Follow the links to learn more: