import { Meta, Subtitle } from '@storybook/addon-docs';

<Meta title="Introduction" />

<div style={{backgroundColor: '#242424', padding: '20px', borderRadius: '20px', marginBottom: '50px', textAlign: 'center'}}>
  <img src='radius_logo_inverted.png' />
</div>

<Subtitle>
  The Radius is an opinionated assemblage of open-source tools and libraries
  that allow you to accelerate your design system. The choice of tools, their
  composition, and a set of foundational components guides you on how to build a
  constraint-based system.
</Subtitle>

### What Does It Include?

Radius is a seed project and not a library. It is built with composition in mind. You can replace any component or any part of the stack or create new things to extend it.

- The **design kit** is built and maintained in [Figma](https://www.figma.com). It includes a set of foundational components and a reference architecture.
- The **component library** bootstrapped using [TSDX](https://github.com/jaredpalmer/tsdx), mirrors the Figma components and is built using Typescript, React, [Styled System](https://styled-system.com/) and [Styled Components](https://www.styled-components.com).
- [Storybook](https://storybook.js.org/) acts as both the **developer sandbox** and the **documentation** platform.
- [Chromatic](http://chromaticqa.com) runs visual regression tests, [CircleCI](https://circleci.com/) runs all other forms of testing and [Netlify](https://www.netlify.com/) builds and deploys Storybook as a static site.

### Definitions

- **Design Kit —** a library of shared styles, symbols or components that can be used by product teams to design or prototype new experiences.
- **Design Tokens —** the overall visual design of a digital product. This foundation defines characteristics such as typography, colors, icons, spacing and information architecture.
- **Component Library —** a set of JavaScript components that are version controlled and are composed to build one or more products.
- **Documentation —** a set of guidelines on how to consume the Design System, design and dev considerations and detailed documentation for each component. The documentation site often includes a live playground that is aimed at the consumers to try out components in the browser.
- **Developer Sandbox —** a tool for developing components in isolation, document use cases and write structural or visual tests.