```jsx noeditor
import Note from '../../src/_doc/Note';

<Note type="warning">
These typography rules are not implemented in the app and are still a work in progress.
</Note>
```

Our [brand page](https://kit.com/brand) lists our brand typefaces. This document shows how
we use them around the application.

Kit Sans is a custom font designed just for us and captures everything our brand stands for—boldness, sincerity, and expertise. It's sleek and professional but with a touch of warmth and personality in its curves. It’s designed to stand out in headlines and make a statement.

Paired with Libre Franklin for body text, Kit Sans brings a cohesive, polished look to our brand.

```jsx noeditor
import Type from '../../src/_doc/Type';

<>
  <link href="https://fonts.googleapis.com/css2?family=Libre+Franklin:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
  <Type />
</>
```

#### Example Copy
```jsx noeditor
import Type from '../../src/_doc/Type';
<Type section="copy" />
```

#### Sizing
In edge cases when we need to use a font size different from what is offered by default in our headings and paragraph, we use text classes. The sizes below will resize a text to the given size when used as **text-{size}** e.g `text-xl`.
```jsx noeditor
import Type from '../../src/_doc/Type';
<Type section="sizing" />
```

#### Weights
Font weight is an important typographic variable that can add emphasis and differentiate content hierarchy. Weight and size pairings must be carefully balanced. Here are the weights available in our open sans font.
```jsx noeditor
import Type from '../../src/_doc/Type';
<Type section="weight" />
```