--- layout: page title: Style Guide sitemap: false --- ## Colors ### Primary

{% for color in site.data.colors.primary %}

${{ color.name }} #{{ color.hex }}

{% endfor %}

### Grays

{% for color in site.data.colors.grays %}

${{ color.name }} #{{ color.hex }}

{% endfor %}

### Errors

{% for color in site.data.colors.errors %}

${{ color.name }} #{{ color.hex }}

{% endfor %}

# Typography ## Body Copy Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis [parturient montes](#), nascetur ridiculus mus. Nullam id dolor id nibh **ultricies vehicula**. Donec *ullamcorper nulla* non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. ```html

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

```

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus.

```html

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus.

``` Maecenas sed diam eget risus varius blandit sit amet non magna. ```html Maecenas sed diam eget risus varius blandit sit amet non magna. ```

Maecenas sed diam eget risus varius blandit sit amet non magna.

```html

Maecenas sed diam eget risus varius blandit sit amet non magna.

``` ## Headings # Heading 1 ## Heading 2 ### Heading 3 #### Heading 4 ## Lists * Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. * Est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. * Maecenas sed diam eget risus varius blandit sit amet non magna. 1. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. 2. Est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. 3. Maecenas sed diam eget risus varius blandit sit amet non magna. ## Components ### Buttons Button Button Button Button ```html Button Button Button Button ``` Button Button Button Button ```html Button Button Button Button ``` ### Alerts

Lucas ipsum dolor sit amet kenobi ubese yaka weequay aka trioculus

Lucas ipsum Lucas ipsum dolor sit amet kenobi ubese yaka weequay aka trioculus

```html

Lucas ipsumLucas ipsum dolor sit amet kenobi ubese yaka weequay aka trioculus

```