Colors

Primary

$brand-main-green #39BA91
$brand-main-blue #074354
$brand-main-gray #445261
$brand-main-blue-dark #101A25
$brand-main-violet #B581CF
$brand-main-blue-light #BFE6EC
$brand-main-gray-light #CAD2DA
$brand-main-gray-lighter #E8EBEF

Errors

$brand-success #388250
$brand-info #3E91CE
$brand-warning #8E8E24
$brand-danger #8F3B39

Typography

The main branding typeface is Europa, used for both text and headline. Europa is only available from Typekit 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.

<p class="large">Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus.</p>

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

<small>Maecenas sed diam eget risus varius blandit sit amet non magna.</small>

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

<p class="mini">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lists

  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 can be used with a base class and modifier classes for size & color:

<svg class="logo logo--sm" aria-labelledby="title">
    <title>Logo Bigchain</title>
    <use xlink:href="/assets/img/sprite-8113af8c0f.svg#logo"></use>
</svg>

<svg class="logo" aria-labelledby="title">
    <title>Logo Bigchain</title>
    <use xlink:href="/assets/img/sprite-8113af8c0f.svg#logo"></use>
</svg>

<svg class="logo logo--full" aria-labelledby="title">
    <title>Logo Bigchain</title>
    <use xlink:href="/assets/img/sprite-8113af8c0f.svg#logo"></use>
</svg>

Components

Buttons

Button Button Button Button

<a class="btn btn-primary">Button</a>
<a class="btn btn-primary btn-xs">Button</a>
<a class="btn btn-primary btn-sm">Button</a>
<a class="btn btn-primary btn-lg">Button</a>

Button Button Button Button

<a class="btn btn-secondary">Button</a>
<a class="btn btn-secondary btn-xs">Button</a>
<a class="btn btn-secondary btn-sm">Button</a>
<a class="btn btn-secondary btn-lg">Button</a>

Button Button Button Button

<a class="btn btn-blue">Button</a>
<a class="btn btn-blue btn-xs">Button</a>
<a class="btn btn-blue btn-sm">Button</a>
<a class="btn btn-blue btn-lg">Button</a>

Button Button Button Button

<a class="btn btn-violet">Button</a>
<a class="btn btn-violet btn-xs">Button</a>
<a class="btn btn-violet btn-sm">Button</a>
<a class="btn btn-violet btn-lg">Button</a>

Button Button Button Button

<a class="btn btn-link">Button</a>
<a class="btn btn-link btn-xs">Button</a>
<a class="btn btn-link btn-sm">Button</a>
<a class="btn btn-link btn-lg">Button</a>

Forms

Fields marked with an * are required.

We will only use your email to contact you and by submitting this form you give us permission to do so. You can change your mind at anytime by contacting us at [email protected] to have your data deleted. For more information visit our Privacy Policy.

We use Formspree & Zapier to send this form and by submitting it, you acknowledge that the information you provide will be transferred to Formspree (Privacy Policy) & Zapier (Privacy Policy) for processing. Don’t want that? Send us an email at [email protected].

<form class="form js-parsley" action="#">
    <div class="form-group">
        <input class="form-control" type="text" id="name" name="name" required>
        <label class="form-label" for="name">Your Name</label>
    </div>
    <div class="form-group">
        <input class="form-control" type="email" id="email" name="email">
        <label class="form-label" for="email">Your Email</label>
    </div>
    <div class="form-group">
        <input class="form-control" type="tel" id="phone" name="phone">
        <label class="form-label" for="phone">Your Phone</label>
    </div>
    <div class="form-group">
        <select class="form-control" id="select" name="select" required data-required="true">
            <option value="">&nbsp;</option>
            <option value="Automotive">Automotive</option>
            <option value="Banking">Banking</option>
            <option value="Consulting">Consulting</option>
            <option value="Data">Data</option>
            ...
        </select>
        <label class="form-label" for="industry">Industry</label>
    </div>
    <div class="form-group">
        <textarea class="form-control" id="comment" name="comment" rows="1"></textarea>
        <label class="form-label" for="comment">Autogrowing textarea</label>
    </div>
    <p class="form-group text-dimmed mini">
        Fields marked with an <span class="required">*</span> are required.
    </p>
    <div class="form-group">
        <input class="btn btn-primary" type="submit" value="Submit">
    </div>

    <div class="form__gdpr">
        <svg class="icon">
            <use xlink:href="/assets/img/sprite-8113af8c0f.svg#icon-heart-protect"></use>
        </svg>
        <div class="text">
            <p>We will only use your email to contact you and by submitting this form you give us permission to do so. You can change your mind at anytime by contacting us at [email protected] to have your data deleted. For more information visit our <a href="/privacy/">Privacy Policy</a>.</p>

<p>We use Formspree &amp; Zapier to send this form and by submitting it, you acknowledge that the information you provide will be transferred to Formspree (<a href="https://formspree.io/static/PrivacyPolicy.pdf">Privacy Policy</a>) &amp; Zapier (<a href="https://zapier.com/privacy/">Privacy Policy</a>) for processing. Don’t want that? Send us an email at [email protected].</p>

        </div>
    </div>
</form>

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
Lucas ipsum Lucas ipsum dolor sit amet kenobi ubese yaka weequay aka trioculus
Lucas ipsum Lucas ipsum dolor sit amet kenobi ubese yaka weequay aka trioculus
<div class="alert alert--success">
    <strong class="alert__title">Lucas ipsum</strong>
    Lucas ipsum dolor sit amet kenobi ubese yaka weequay aka trioculus
</div>

<div class="alert alert--info">
    <strong class="alert__title">Lucas ipsum</strong>
    Lucas ipsum dolor sit amet kenobi ubese yaka weequay aka trioculus
</div>

<div class="alert alert--warning">
    <strong class="alert__title">Lucas ipsum</strong>
    Lucas ipsum dolor sit amet kenobi ubese yaka weequay aka trioculus
</div>

<div class="alert alert--danger">
    <strong class="alert__title">Lucas ipsum</strong>
    Lucas ipsum dolor sit amet kenobi ubese yaka weequay aka trioculus
</div>


<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>


<div class="dropdown dropdown--hover">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>