Resources Colors Typography Grid Forms Buttons Cards Photo Styles Sections

Documentation

Launch Scout Design System

A living style guide to help us work better together.

Our primary typeface that we use for headlines and body copy is Museo Sans. We also use Oswald for accent headlines.

Colors

Hex: #61666E
HSL: hsl(217, 6%, 41%)
Sass: $gray-400

Hex: #F90B66
HSL: hsl(337, 95%, 51%)
Sass: $red-400

Hex: #F7A006
HSL: hsl(38, 95%, 50%)
Sass: $yellow-400

Hex: #8AD3E3
HSL: hsl(191, 61%, 72%)
Sass: $blue-400

Hex: #9B74E8
HSL: hsl(260, 72%, 68%)
Sass: $purple-400

Hex: #6042BC
HSL: hsl(255, 48%, 50%)
Sass: $purple-500

Hex: #2C1760
HSL: hsl(257, 61%, 23%)
Sass: $purple-600

Hex: #190641
HSL: hsl(259, 83%, 14%)
Sass: $purple-700

Typography

<h1>Heading 1

<h2>Heading 2

<h3>Heading 3

<h4>Heading 4

<h5>Heading 5

<h6>Heading 6

<p>Paragraph Tag: Sure, we love to geek out over technology and design. But it's all for a bigger purpose - boosting your business. We build apps that radically improve productivity, profits, client relationships and more.</p>

<p class="captions">Caption Class: Sure, we love to geek out over technology and design. </p>

<i>italic copy</i>
<b>bold copy</b>
<strong>strong copy</strong>

Highlight <span class="highlight">

<blockquote>blockquote</blockquote>

Grid Layout

2 Column Grid

<div class="grid grid--2">

3 Column Grid

<div class="grid grid--3">

4 Column Grid

<div class="grid grid--4">

5 Column Grid

<div class="grid grid--5">

Grid Item Spans 2 Columns

<div class="grid__child--span-2">

Grid Item Spans 3 Columns

<div class="grid__child--span-3">

Forms

Text Input

Text Area

Checkboxes

Option 1

Option 2

Option 3

Radios

Option 1

Option 2

Option 3

Buttons

Basic CTA

Cards

class="card"

class="card card--dark"

class="card card--light"

class="card card--off-light"

Batched.io

Visualizing and managing a printer's production floor

See how we transformed a manual process into a dynamic scheduling tool.

Photos

Launch Scout photos are bright and collaborative, capturing the culture of our team. We use well lit documentary style photography, edited for true to life color.