We have a lot of colours that we use across the application. Here they are sorted into categories.
Brand colours
#0068ac
#fcb034
#031e31
Grays
#333
#595959
#777
#888
#ccc
#ddd
#efefef
#f7f7f7
Status colours
#70a328
#4e9451
#ef542f
<p>
<strong>Brand colours</strong>
</p>
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
<div class="thumbnail text-center">
<img class="img-responsive" src="http://placehold.it/300x300/0068ac/0068ac" />
AB blue
<br><code>#0068ac</code>
<!-- Variable name: $ab-blue -->
</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
<div class="thumbnail text-center">
<img class="img-responsive" src="http://placehold.it/300x300/fcb034/fcb034" />
AB orange
<br><code>#fcb034</code>
<!-- Variable name: $ab-orange -->
</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
<div class="thumbnail text-center">
<img class="img-responsive" src="http://placehold.it/300x300/031e31/031e31" />
AB background blue
<br><code>#031e31</code>
<!-- Variable name: $bg-blue -->
</div>
</div>
</div>
<p>
<strong>Grays</strong>
</p>
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
<div class="thumbnail text-center">
<img class="img-responsive" src="http://placehold.it/300x300/333333/333333" />
Darkest gray
<br><code>#333</code>
<!-- Variable name: $gray-really-dark -->
</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
<div class="thumbnail text-center">
<img class="img-responsive" src="http://placehold.it/300x300/595959/595959" />
Dark gray
<br><code>#595959</code>
<!-- Variable name: $gray-dark -->
</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
<div class="thumbnail text-center">
<img class="img-responsive" src="http://placehold.it/300x300/777777/777777" />
Normal gray
<br><code>#777</code>
<!-- Variable name: $gray-normal -->
</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
<div class="thumbnail text-center">
<img class="img-responsive" src="http://placehold.it/300x300/888888/888888" />
Medium gray
<br><code>#888</code>
<!-- Variable name: $gray-medium -->
</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
<div class="thumbnail text-center">
<img class="img-responsive" src="http://placehold.it/300x300/cccccc/cccccc" />
Light gray
<br><code>#ccc</code>
<!-- Variable name: $gray-light -->
</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
<div class="thumbnail text-center">
<img class="img-responsive" src="http://placehold.it/300x300/dddddd/dddddd" />
Lighter gray
<br><code>#ddd</code>
<!-- Variable name: $gray-lighter-->
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
<div class="thumbnail text-center">
<img class="img-responsive" src="http://placehold.it/300x300/efefef/efefef" />
Background gray
<br><code>#efefef</code>
<!-- Variable name: $bg-gray -->
</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
<div class="thumbnail text-center">
<img class="img-responsive" src="http://placehold.it/300x300/f7f7f7/f7f7f7" />
Light background gray
<br><code>#f7f7f7</code>
<!-- Variable name: $bg-gray-light -->
</div>
</div>
</div>
<p>
<strong>Status colours</strong>
</p>
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
<div class="thumbnail text-center">
<img class="img-responsive" src="http://placehold.it/300x300/70a328/70a328" />
Success
<br><code>#70a328</code>
<!-- Variable name: $good -->
</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
<div class="thumbnail text-center">
<img class="img-responsive" src="http://placehold.it/300x300/4e9451/4e9451" />
Darker success
<br><code>#4e9451</code>
<!-- Variable name: $dark-good -->
</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
<div class="thumbnail text-center">
<img class="img-responsive" src="http://placehold.it/300x300/ef542f/ef542f" />
Danger
<br><code>#ef542f</code>
<!-- Variable name: $bad -->
</div>
</div>
</div>
We use Open Sans for everything directly Autobutler-related (minus our logo). Specimens and further info can be found on Google Fonts, which is also where we serve the font from.
These are our headings. They are almost the same as the Bootstrap defaults, except we use a font weight of 300 (light).
h1. Heading |
|
h2. Heading |
|
h3. Heading |
|
h4. Heading |
|
h5. Heading |
|
h6. Heading |
|
<table class="table">
<tbody>
<tr>
<td>
<h1>h1. Heading</h1>
</td>
<td class="vertical-align-middle text-muted">
<h1><code>font-size: 36px</code></h1>
</td>
</tr>
<tr>
<td>
<h2>h2. Heading</h2>
</td>
<td class="vertical-align-middle text-muted">
<h2><code>font-size: 30px</code></h2>
</td>
</tr>
<tr>
<td>
<h3>h3. Heading</h3>
</td>
<td class="vertical-align-middle text-muted">
<h3><code>font-size: 24px</code></h3>
</td>
</tr>
<tr>
<td>
<h4>h4. Heading</h4>
</td>
<td class="vertical-align-middle text-muted">
<h4><code>font-size: 18px</code></h4>
</td>
</tr>
<tr>
<td>
<h5>h5. Heading</h5>
</td>
<td class="vertical-align-middle text-muted">
<h5><code>font-size: 14px</code></h5>
</td>
</tr>
<tr>
<td>
<h6>h6. Heading</h6>
</td>
<td class="vertical-align-middle text-muted">
<h6><code>font-size: 12px</code></h6>
</td>
</tr>
</tbody>
</table>
Just a hr
that's supposed to be as simple as possible. A thin,
gray line to separate content. A little bit darker than the Bootstrap default.
<hr>
We have a few default styles for most input types. A little extra padding, solid border, and rounded corners.
<form class="form-horizontal" action="#" method="post">
<div class="form-group">
<label class="control-label col-sm-2"><code>input[type=text]</code></label>
<div class="col-sm-10">
<input class="form-control" type="text" name="text" id="text">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2"><code>input[type=search]</code></label>
<div class="col-sm-10">
<input class="form-control" type="search" name="search" id="search">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2"><code>input[type=email]</code></label>
<div class="col-sm-10">
<input class="form-control" type="email" name="email" id="email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2"><code>input[type=tel]</code></label>
<div class="col-sm-10">
<input class="form-control" type="tel" name="tel" id="tel">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2"><code>input[type=password]</code></label>
<div class="col-sm-10">
<input class="form-control" type="password" name="password" id="password">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2"><code>input[type=file]</code></label>
<div class="col-sm-10">
<input class="form-control" type="file" name="file" id="file">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2"><code>input[type=number]</code></label>
<div class="col-sm-10">
<input class="form-control" type="number" name="number" id="number">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2"><code>select</code></label>
<div class="col-sm-10">
<select class="form-control ab-dropdown" name="select" id="select">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2"><code>textarea</code></label>
<div class="col-sm-10">
<textarea class="form-control" name="textarea" id="textarea" cols="30" rows="10"></textarea>
</div>
</div>
</form>
Our links are Autobutler blue (#0068ac
) by default and become a
little darker (#004979
) on hover.
<a href="https://nyan.cat">A blue link!</a>