Logo Bigchain

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

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

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

{% endfor %}

### Secondary

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

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

{% endfor %}

### Errors

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

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

{% endfor %}

## Typography The main branding typeface is [**Europa**](http://www.europatype.com/articledetail/17), used for both text and headline. Europa is only [available from Typekit](https://typekit.com/fonts/europa) or as a paid download. Please consult a designer to assist you in using this font in your documents & presentations.

Europa Light

Europa Regular

Europa Regular Italic

Europa Bold

The light weight is only used for headlines from a certain size to retain readability on all screens. For the website this means only headings 1 - 4 are using light weight. ### 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. 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**.

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 ##### Heading 5 ###### Heading 6 ## 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. ## Logo Logo can be used with a base class and modifier classes for size & color: - `logo`: default logo - `logo--sm`: small version - `logo--full`: full width version - `logo--white`: complete white version - `logo--white--green`: white & green version ```html ``` ## Components ### Buttons Button Button Button Button ```html Button Button Button Button ``` Button Button Button Button ```html Button Button Button Button ``` Button Button Button Button ```html Button Button Button Button ``` Button Button Button Button ```html Button Button Button Button ``` Button Button Button Button ```html Button Button Button Button ``` ### Forms ```html ``` ### 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 ipsum Lucas ipsum dolor sit amet kenobi ubese yaka weequay aka trioculus

```