# Welcome to Torii Design System

## How to use Torii

Our design system exists to seamlessly connect Design and Development. As a designer you will find guidelines that will help you during the process, and as a developer you will find optimized tokens ready for code implementation.

## Navigating Torii

Torii has 2 main sections: Styles and Components. This helps us keep the system organized and easy to use.

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th data-hidden></th><th data-hidden data-card-cover data-type="files"></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Styles</strong></td><td>This section holds the foundations of our design system, such as Branding, Color, Typography, Shape or Motion.</td><td></td><td><a href="https://731967297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8ndDn1pXs9bTMd1eSAm3%2Fuploads%2FFvN2KGdWcT7v8g4rq6lV%2Fstyles-cover.png?alt=media&#x26;token=0b80ea7a-4f24-4535-b3c3-385b81b90bde">styles-cover.png</a></td><td><a href="../styles">styles</a></td></tr><tr><td><strong>Components</strong></td><td>Components are interactive building blocks used to create a user interface. They are the equivalent to widgets in Flutter.</td><td></td><td><a href="https://731967297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8ndDn1pXs9bTMd1eSAm3%2Fuploads%2FJMQqrKFNVxPYyrf5yjRo%2Fcomponents-cover.png?alt=media&#x26;token=cd774d52-1852-4111-ac03-c6c52379462d">components-cover.png</a></td><td><a href="../components">components</a></td></tr></tbody></table>

## The Changelog - Stay up to date

Each component has its own Changelog section. Revisit it every time you need to stay up to date with changes to that specific component either in Design or Development.

The versioning system includes three digits:

* The **first** one changes when there are **major updates** like a big overhaul of a component of foundation.
* The **second** one when there are **minor updates** like new variants to a component.
* The **third** one is used for **patches and fixes** like an adjustment of color in a component for accesibility.

<figure><img src="https://731967297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8ndDn1pXs9bTMd1eSAm3%2Fuploads%2FmzHhN4TmLj8KaoKioeai%2Fchangelog.png?alt=media&#x26;token=e0ebee9c-a023-46b1-ac23-a529a8974275" alt=""><figcaption></figcaption></figure>