MAIN PALETTE

Brand Blue

$brand-primary

#0082ca

2nd Blue

$brand-secondary

#283769

Background

$brand-background

#ffffff

CTA

$brand-cta

#ef7400


BRAND BLUE

Light

$brand-primary-light

#1a8ecf

Dark

$brand-primary-dark

#0074b5

BACKGROUND

Light

$brand-background-light

#f5f5f5

Dark

$brand-background-dark

#9b9b9b

2ND BLUE

Light

$brand-secondary-light

#3d4b78

Dark

$brand-secondary-dark

#23315e

CTA

Light

$brand-cta-light

#f0821a

Dark

$brand-cta-dark

#d66800


Typography

The font used for headings and body is Roboto

h1
78px

Homepage Header

Lorem Ipsum Headline H1

font-family: Roboto; font-weight: 300; font-size: 78px; color: #0082ca; letter-spacing: 1px; line-height: 92px;

h2
52px

Primary Header

Lorem Ipsum Headline H2

font-family: Roboto; font-weight: 300; font-size: 52px; color: #0082ca; letter-spacing: 1px; line-height: 60px;

h3
37px

Lorem Ipsum Headline H3

font-family: Roboto; font-weight: 300; font-size: 37px; color: #4a4a4a; letter-spacing: 0.8px; line-height: 45px;

h4
25px

Lorem Ipsum Headline H4

font-family: Roboto; font-weight: 400; font-size: 25px; color: #0082ca; letter-spacing: 0.5px; line-height: 32px;


Other type usage:

body
15px

Body Copy - This is the default body copy style that will be used for Mindflash. All typography will default to this. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, enim eos culpa autem quidem adipisci unde obcaecati voluptate molestias facilis tempora a expedita dolore distinctio optio provident perspiciatis, ipsam ipsa.

font-family: Roboto; font-weight: 400; font-size: 15px; color: #4a4a4a; letter-spacing: 0.1px; line-height: 25px;

lead
19px

Lead Copy - Adding a class of .lead to an element will give it these font styles. This is typcially used as the first paragraph of intro or lead copy, or to give some extra emphasis to the first section of text on a page.

font-family: Roboto; font-weight: 700; font-size: 19px; color: #4a4a4a; letter-spacing: 0.1px; line-height: 31px;

small
11px

This line of text is meant to be treated as fine print. You would either give an element the class of .small or wrap the content in a <small> tag

font-family: Roboto; font-weight: 600; font-size: 11px; color: #4a4a4a; letter-spacing: 0.1px; line-height: 14px;


BUTTONS

Add the class btn-rounded for the "rounded" variantion.

Orange Button

Code sample:

<button class="btn-cta">Submit</button>

Outline CTA

Code sample:

<button class="btn-outline-cta">Submit</button>

Primary CTA

Code sample:

<button class="btn-primary">Submit</button>


FORMS

COMPONENTS
Blue Block

The Blue Block component is useful for calling out content and includes a corner "flag" in the upper left to tie in logo elements to the space.

Code sample:

<div class="blue-block"></div>

Content goes here


Block Grid

The Block Grid component is useful for displaying taxonomies, related articles, and the like with background imagery in a full-width grid. You can add a title class to a .block element to create a title variation in the grid. Instead of using <div> tags for each block you can also use an <a> tag to link the entire block other content.

Code sample:

<div class="block-grid">
  <div class="inner">
    <div class="block title">
      <h3>Solutions</h3>
      <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus ac neque non</p>
    </div>
    <a href="#" class="block" style="background-image: url('<%= asset_url("/img/usecase-1.jpg") %>');">
      <div class="caption">
        <h4>Contractors <i class="icon-right-circled"></i></h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus ac neque non</p>
      </div>
    </a>
    <a href="#" class="block" style="background-image: url('<%= asset_url("/img/usecase-2.jpg") %>');">
      <div class="caption">
        <h4>Resellers <i class="icon-right-circled"></i></h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus ac neque non</p>
      </div>
    </a>
  </div>
</div>

Blockquote

The Blockquote component is simply a specially styled <blockquote> tag. You can easily implement it using the partial syntax as detailed in the example below. The partial takes one local variable and uses the block content for the quotation itself.

Locals
Variable Type Description
cite String The citation for the quote

Code sample:

<% partial "partials/blockquote", locals: { cite: "Jon Smith, COO, UBER" } do %>
  We are very happy with what we have been able to achieve in a short time. I look forward to expanding this program to other countries in the region.
<% end %>
ldquo We are very happy with what we have been able to achieve in a short time. I look forward to expanding this program to other countries in the region. rdquo
Jon Smith, COO, UBER

CTA Block

The CTA Block component is used to display up to two calls to action side-by-side. The component is implemented using the partial syntax and takes various local variables for its content:

Locals
Variable Type Description
title String The title at the top of the CTA Block
cards Array An array of Card Objects
Card Objects
Variable Type Description
icon String The slug of the icon to be used on the card
title String The title of the card
description String The description of the card
url String The URL of the "Learn More" button

Code sample:

<% partial "partials/cta-block", locals: { title: "Business-critical training that makes a difference",
    cards: [
      {
        icon: "solutions",
        title: "Solution",
        description: "Donec cursus ac neque non feugiat. Curabitur hendrerit rhoncus",
        url: "/solutions/"
      },
      {
        icon: "industries",
        title: "Industry",
        description: "Donec cursus ac neque non feugiat. Curabitur hendrerit rhoncus",
        url: "/industries"
      }
    ]
  } do
%>
<p>Mindflash delivers breakthrough innovations in content creation,<br> business analytics, program management and enterprise integration</p>
<% end %>

Business-critical training that makes a difference

Mindflash delivers breakthrough innovations in content creation,
business analytics, program management and enterprise integration

icon-solutions

Solution

Donec cursus ac neque non feugiat. Curabitur hendrerit rhoncus

Learn More

icon-industries

Industry

Donec cursus ac neque non feugiat. Curabitur hendrerit rhoncus

Learn More