ThinkCERCA Style Guide

This style guide is an evolving document curated by Mallory Busch and Brooke Kravitz of ThinkCERCA's marketing team. It should serve as a reference point for all ThinkCERCA-branded materials.

Last updated: April 2017.

Logos

These are the only versions of the ThinkCERCA logo that should be used publicly. Any other version is outdated.

The Stacked Logo

Default logo. Use for square dimensions.

Download as: SVG PNG JPG

Download as: SVG

Download as: SVG

The Horizontal Logo

Gray version is ideal for using in the footer of printed documents.

Download as: SVG PNG JPG

Download as: SVG

Download as: SVG

The Simple Logo

Use as a favicon, or for social profiles, like Twitter.

Download as: SVG

Download as: SVG

Icons

CERCA Icons

Claim

Download as: SVG PNG

Evidence

Download as: SVG PNG

Reasoning

Download as: SVG PNG

Counterargument

Download as: SVG PNG

Audience

Download as: SVG PNG

Subject Icons

English

Download as: SVG PNG

Social Studies

Download as: SVG PNG

Science

Download as: SVG PNG

Math

Download as: SVG PNG

English

Download as: SVG PNG

Social Studies

Download as: SVG PNG

Science

Download as: SVG PNG

Math

Download as: SVG PNG

Material Design Icons

When we don't have an icon created specifically for ThinkCERCA purposes, we use Google Material Design icons.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Accounts / Passwords

<i class="material-icons">vpn_key</i>

Download as SVG

View on Google

Assign a Lesson

<i class="material-icons">assignment</i>

Download as SVG

View on Google

Benchmark Assessments

<i class="material-icons">find_in_page</i>

Download as SVG

View on Google

Classes

<i class="material-icons">people</i>

Download as SVG

View on Google

Classroom Practices

<i class="material-icons">lightbulb_outline</i>

Download as SVG

View on Google

Common Core

<i class="material-icons">school</i>

Download as SVG

View on Google

Curriculum Alignment

<i class="material-icons">all_inclusive</i>

Download as SVG

View on Google

Data Reports

<i class="material-icons">pie_chart</i>

Download as SVG

View on Google

Data-driven Instruction

<i class="material-icons">trending_up</i>

Download as SVG

View on Google

Differentiation

<i class="material-icons">group_work</i>

Download as SVG

View on Google

Getting Started

<i class="material-icons">power_settings_new</i>

Download as SVG

View on Google

Grading

<i class="material-icons">edit</i>

Download as SVG

View on Google

Leadership

<i class="material-icons">assistant</i>

Download as SVG

View on Google

Novel Pairings

<i class="material-icons">book</i>

Download as SVG

View on Google

States

<i class="material-icons">place</i>

Download as SVG

View on Google

Test Prep

<i class="material-icons">update</i>

Download as SVG

View on Google

Troubleshooting

<i class="material-icons">live_help</i>

Download as SVG

View on Google

Unit Planning

<i class="material-icons">list</i>

Download as SVG

View on Google

Scroll right

Colors

CERCA Colors

CERCA colors should rarely be used outside of denoting CERCA steps, except for the Audience Blue #307fe2.

#da291c

Claim

#ffb500

Evidence

#ff6900

Reasoning

#43b02a

Counterargument

#307fe2

Audience

Lesson Colors

Used to refer to lesson types in the product.

#da1884

Direct Instruction lesson

#97d700

Additional Reading Practice

#00b7bd

Applied Reading and Writing lesson

Full Color Palette

Care should be taken to avoid creating visual confusion or overload by using too many colors in a single communication. Tints and shades of any color from 0to255.com may be used to expand the palette and provide variety within a limited color range, but will not be added to this Style Guide without Marketing Team's approval.

Use Audience Blue #307fe2 and Base Gray #5b6770 as a starting point in any communication.

#f8d3d3
#ee918f
#de2527
#b12a31
#fce2d7
#f7b69b
#ff6900
#d96126
#ffefce
#fed986
#ffb500
#ceb427
#e9f6ce
#cae986
#97d700
#70c216
#d9eed6
#a0d597
#43b02a
#4b8b31
#cdf0f2
#83dadd
#00b7bd
#2f939c
#d5e5f8
#97bfef
#307fe2
#0f69b6
#ccdaf0
#81a4db
#0a4bb8
#06388c
#e0d8ef
#b29ed9
#663fb3
#4c1d9e
#f8d1e6
#ee8bc0
#da1884
#a90a50
#f2f4f5
#e2e5e8
#c6ccd1
#aab3ba
#8e9aa3
#72818c
#5b6770
#444d54
#2d3338
#16191c
#fce2d7
#f7b69b
#d3a584
#ba887b
#87625b
#663d3b
#3f2525

Typography

ThinkCERCA uses Roboto fonts whenever possible, in web and in print. If not available, use Helvetica.

When case permits, use Roboto Slab as the serif font. Web doesn't typically use serif.

<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:300,400,700|Roboto:400,400i,500,500i,700,700i" rel="stylesheet">

font-family: 'Roboto', 'Helvetica', Arial, sans-serif;

h1: Marketing pages

Neque porro quisquam est qui dolorem ipsum quia


We use this h1 style on ThinkCERCA info pages on our WordPress site. On dark backgrounds, use font-color: #ffffff;


color: #4a4a4a; font-size: 46px; font-weight: 700; line-height: 58px; margin-bottom: 10px;

h1: Blog titles

Neque porro quisquam est qui dolorem ipsum quia


We use this h1 style on ThinkCERCA blog posts.


color: #5b6770; font-size: 34px; font-weight: 500; line-height: 1.38;

h2

Sed id finibus ligula, a laoreet nisl


An h2 should always be used as the subhed of a blog post, as this helps for SEO.


color: #5b6770; font-size: 30px; font-weight: 500; line-height: 38px; margin: 0 0 10px 0;

h3

Quisque ut placerat nibh, id volutpat diam


font-size: 20px; line-height: 27px;

h4

Aenean faucibus sodales diam, id ullamcorper sapien rhoncus quis


font-size: 18px; line-height: 28px;

p

Vestibulum aliquet, mauris sit amet luctus scelerisque, dolor odio ullamcorper ex, id ornare dolor sapien eget urna. Ut odio dui, pharetra porta pulvinar eget, porta commodo enim. Duis ac risus odio. Curabitur id lacus felis. Nullam in consequat erat. Nulla tempor eget tortor nec aliquet.


It is also permissable to use color: #444d54; for paragraph text. This color, #444d54, is one shade darker than Base Gray #5b6770. It is used in blog posts (and this line).


color: #5b6770; font-family: 'Roboto', Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 26px; margin: 0 0 10px 0; text-align: left; text-size-adjust: 100%; word-wrap: break-word; -webkit-font-smoothing:antialiased;

Buttons

Used regularly on ThinkCERCA marketing sites.

Most buttons use this style:

background-color: #70c216;
border: none;
border-radius: 5px;
color: #ffffff;
font-size: 16px;
font-weight: 500;
padding: 13px 23px;
text-align: center;
transition: all ease-in-out .4s;

Some buttons use a heavier font-weight and uppercase text. Use with discretion.

font-weight: 600;
text-transform: uppercase;

Hover code:

background-color: #ebebeb;
color: #70c216;