Style Guide

Design principals for Gravitational

Colors

Brand Colors

.background-accent
.background-primary
.background-dark
.background-subtle

Secondary Colors

.background-notice
.background-warning
.background-error
.background-success

Highlight Colors

.background-notice
.background-warning
.background-error
.background-success

Typography

Jumbo Title

Headline Title

Regular Title

This is a paragraph with strong text, code and a hyperlink.

Fine Print
<h1 class="text-jumbo">Jumbo Title</h1>
<h2 class="text-headline">Headline Title</h2>
<h3 class="text-title">Regular Title</h3>
<p class="text-body">
  This is a paragraph with <strong>strong</strong> text, <code>code</code> and a <a href="#">hyperlink</a>.
</p>
<small class="text-small">Fine Print</small>

Decorator classes

You can add decorator classes to any of the standard typograhpical styles above to add additional visual formatting to text.

Bold

Italic

Uppercase

Accent

Error

Inverse

<p class="text-body is-bold">Bold</p>
<p class="text-body is-italic">Italic</p>
<p class="text-body is-uppercase">Uppercase</p>
<p class="text-body is-accent">Accent</p>
<p class="text-body is-error">Error</p>
<p class="text-body is-inverse background-dark">Inverse</p>

Decorative Quote

Gravitational has reduced our time to market for our Private Install offering. They not only helped on-board us to their platform but they also helped modernize our deployment process. We now have a high value offering for our enterprise customers in a fraction of time it would have taken without them.

Jacek Materna, CTO
<blockquote class="text-quote is-center">
  <p>
    <span class="text-quote-decoration is-left">&ldquo;</span>
    Gravitational has <strong>reduced our time to market for our Private Install
    offering</strong>. They not only helped on-board us to their platform
    but they also <strong>helped modernize our deployment process</strong>.
    We now have a high value offering for our enterprise customers in a fraction of time
    it would have taken without them.
    <span class="text-quote-decoration is-right">&rdquo;</span>
  </p>
  <small>Jacek Materna, CTO</small>
</blockquote>

Lists

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4
  • Item 1
  • Item 2
  • Item 3
  • Item 4
<ul class="text-list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

<ol class="text-list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ol>

<ul class="is-unstyled">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

Tables

Name Role Description Date
Ev Kontsevoy Chief Executive Officer The grand vision 1/1/2018
Taylor Wakefield Chief Operating Officer Keep the ship on the right course 1/1/2018
Sasha Klizhentas Chief Technical Officer Code all the things 1/1/2018
Ev Kontsevoy Chief Executive Officer The grand vision 1/1/2018
Taylor Wakefield Chief Operating Officer Keep the ship on the right course 1/1/2018
Sasha Klizhentas Chief Technical Officer Code all the things 1/1/2018
<table class="text-table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Role</th>
      <th>Description</th>
      <th>Date</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ev Kontsevoy</td>
      <td>Chief Executive Officer</td>
      <td>The grand vision</td>
      <td>1/1/2018</td>
    </tr>
    <tr>
      <td>Taylor Wakefield</td>
      <td>Chief Operating Officer</td>
      <td>Keep the ship on the right course</td>
      <td>1/1/2018</td>
    </tr>
    <tr>
      <td>Sasha Klizhentas</td>
      <td>Chief Technical Officer</td>
      <td>Code all the things</td>
      <td>1/1/2018</td>
    </tr>
  </tbody>
</table>

<table class="text-table">
  <tbody>
    <tr>
      <th>Ev Kontsevoy</th>
      <td>Chief Executive Officer</td>
      <td>The grand vision</td>
      <td>1/1/2018</td>
    </tr>
    <tr>
      <th>Taylor Wakefield</th>
      <td>Chief Operating Officer</td>
      <td>Keep the ship on the right course</td>
      <td>1/1/2018</td>
    </tr>
    <tr>
      <th>Sasha Klizhentas</th>
      <td>Chief Technical Officer</td>
      <td>Code all the things</td>
      <td>1/1/2018</td>
    </tr>
  </tbody>
</table>