Joyent's font is Libre Franklin, which is available to use at [Google Fonts](https://fonts.google.com/specimen/Libre+Franklin).

The font sizes in the toolkit are based on an [augmented fourth modular scale](http://www.modularscale.com/?15,24&px&1.414), with base font size of **15px**.

### Headings

Headings are available from `h1` through to `h4`. If demand is shown for `h5` and `h6`, these will be included in the toolkit.

To learn more about the correct usage of HTML headings, visit [MDN web docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements).

#### Heading 1
```jsx
const H1 = require('/').H1;
<H1>Inspire the lazy</H1>
```

#### Heading 2
```jsx
const H2 = require('/').H2;
<H2>Inspire the lazy</H2>
```

#### Heading 3
```jsx
const H3 = require('/').H3;
<H3>Inspire the lazy</H3>
```

#### Heading 4
```jsx
const H4 = require('/').H4;
<H4>Inspire the lazy</H4>
```

### Paragraph
```jsx
const P = require('/').P;
<P>Joyent experts provide 360 degree support for modern application architectures, including development frameworks, container orchestration tools, and hybrid cloud infrastructures.</P>
```

### Small
If you need to display content that is less important that the main body text, or where space is more constrained, you can use the `<small>` element. This will reduce the text size to 13px.

```jsx
const Small = require('/').Small;
<Small>
Triton is 100% open source and designed to eliminate cloud provider lock-in. With support for popular container management tools like Kubernetes, augmented by our own open source project ContainerPilot, we are working with the community to deliver simple to operate platform services that are open and portable.
</Small>
```

### Label
The `<label>` element is used for captions in the user interface and information labels (i.e. text that is not continuous body text).

Read more about using the `<label>` element on the [MDN web docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label).

```jsx
const Label = require('/').Label;
<Label>
Hybrid, Modern and Open, Triton is engineered to run the world’s largest cloud native applications
</Label>
```

### Anchors
Links in the toolkit are named `Anchor`. This is to avoid confusion with `Link`, which is a [React Router routing link](http://knowbody.github.io/react-router-docs/api/Link.html).

#### Primary
Primary anchor is a type of a link that sits outside the body text.

```
const Anchor = require('/').Anchor;
<Anchor href="https://joyent.com">Inspire the lazy</Anchor>
```

#### Reversed
Reversed anchors is used on dark backgrounds, where a default anchor would not provide enough contrast.

```
const Anchor = require('/').Anchor;
<span style={{'background-color': '#343434'}}>
  <Anchor  href="https://joyent.com" reversed>Inspire the lazy secondary</Anchor>
</span>
```

#### Disabled
Disabled anchors cannot be actioned and the cursor is disabled.

```
 const Anchor = require('/').Anchor;
 <Anchor disabled  href="https://joyent.com">Inspire the lazy disabled</Anchor>
```