Skip to main content Skip to docs navigation
View on CodeCommit

Measured Tableau

Measured’s styleguide while working in Tableau.

On this page

Introduction

Link to current styling for Tableau: Current Figma styling

This page makes use of Measured’s specific typography font stack for Tableau.

Typography

Measured sets basic global display, typography, and link styles.

Font

The fonts chosen for Tableau are the Tableau branded fonts that are available for Tableau online. It provides a consistent font for each OS (Windows, Mac, Linux, etc) as well as for older OS versions (Windows XP, Ubuntu 19 and prior, OS X < 13).

The fonts in use are:

  • Tableau Light
  • Tableau Book
  • Tableau Regular
  • Tableau Medium
  • Tableau Semibold

Form Fields (Filter Labels & Values)

Inputs, Selects, Combo boxes, Radio inputs all should use consistent typography in all cases.

Form Styling Example
<p class="filter-label"></p> Selected Metric
<p class="filter-value"></p> Incremental CPA
<p class="filter-radio-value"></p>

Example Usage

<label class="filter-label form-label">Selected Metric
  <select class="filter-value d-block form-select-sm">
    <option>Incremental Conversions %</option>
    <option>Incremental CPA</option>
    <option>Revenue</option>
    <option>Incremental Revenue</option>
  </select>
</label>

Example Output

Code

  .filter-label {
    font-family: "Tableau Medium", sans-serif;
    color: #31383F;
    font-size: 9px;
  }

  .filter-value {
    font-family: "Tableau Medium", sans-serif;
    color: #31383F;
    font-size: 9px;
  }

  .filter-radio-value {
    font-family: "Tableau Medium", sans-serif;
    color: #31383F;
    font-size: 9px;
  }

Section Heading

Section headings appear before a section (Hero Metrics, Charts, Tables). Section headings are Title Case, and usually have less than four words. Find the style definition below.

Section Heading Example
<p class="section-heading"></p> Section Heading
<p class="section-heading"></p> Performance by Time
<p class="section-heading"></p> Test Case

Code

  .section-heading {
    font-family: "Tableau Medium", sans-serif;
    color: #31383F;
    font-size: 12px;
  }

Hero Metrics

Hero metrics are the two sections following the top filter bar within a dashboard. The majority of hero metrics are shown using a label & value, displayed vertically. The values should be left aligned and even with each other.

Hero Metric Styles Example
<p class="metric-label"></p> Incremental CPA
<p class="metric-label-sm"></p> Incremental CPA
<p class="metric-value"></p> $1,402,382.32
<p class="metric-value-sm"></p> $1,402,382.32
<p class="metric-value-xs"></p> $1,402,382.32

Example Usage

<div class="metric-label">Incremental Conversions %</div>
<div class="metric-value">5.32%</div>

Example Output

Incremental Conversions %
5.32%
Statistical Significance
85.21%
Retargeting Spend
$6.91M
Hero Metrics Hover

While hovering over a hero metric, the hover state should have the following style:

.hover-metric-label {
  font-family: "Tableau Medium", sans-serif;
  color: #31383F;
  font-size: 10px;
}

.hover-metric-value {
  font-family: "Tableau Medium", sans-serif;
  color: #31383F;
  font-size: 14px;
}

Code

  .metric-label {
    font-family: "Tableau Medium", sans-serif;
    color: #31383F;
    font-size: 12px;
  }

  .metric-label-sm {
    font-family: "Tableau Regular", sans-serif;
    color: #31383F;
    font-size: 12px;
  }

  .metric-value {
    font-family: "Tableau Medium", sans-serif;
    color: #31383F;
    font-size: 18px;
  }

  .metric-value-sm {
    font-family: "Tableau Medium", sans-serif;
    color: #31383F;
    font-size: 18px;
  }

  .metric-value-xs {
    font-family: "Tableau Medium", sans-serif;
    color: #31383F;
    font-size: 12px;
  }

Navigation tabs are the pills that are used to navigate between views on a Tableau Dashboard

Example Output

Hover Styling

:hover {
  border-color: #676F79;
  background-color: #676F79;
  color: #ffffff;
}

Active Styling

:active {
  border-color: #31383F;
  background-color: #31383F;
  color: #ffffff;
}

Code

  .navbar-tabs {
    font-family: "Tableau Medium", sans-serif;
    color: #31383F;
    font-size: 9px;

    &.btn.btn-outline-dark {
      border-color: #31383F;

      // Hover Styling
      &:hover {
        border-color: #676F79;
        background-color: #676F79;
        color: #ffffff;
      }

      // Active Styling
      &:active,
      &:focus {
        border-color: #31383F;
        background-color: #31383F;
        color: #ffffff;
      }
    }

    // Hover Styling
    &.btn.btn-outline-dark.hover {
      border-color: #676F79;
      background-color: #676F79;
      color: #ffffff;
    }

    // Active Styling
    &.btn.btn-outline-dark.active {
      border-color: #31383F;
      background-color: #31383F;
      color: #ffffff;
    }
  }

Charts

Charts are below the Hero metrics and above the Table. The charts y-axes and x-axis should follow the following guidelines:

Chart Styling Example
<p class="chart-y-axis"></p> 100%
<p class="chart-x-axis"></p> 12/01/1986

Code

  .chart-y-axis {
    font-family: "Tableau Medium", sans-serif;
    color: #31383F;
    font-size: 9px;
  }

  .chart-x-axis {
    font-family: "Tableau Regular", sans-serif;
    color: #31383F;
    font-size: 9px;
  }

Tables

Tables are the final section in a dashboard. The first column’s cell values should follow the same styling as the column headers. Tables should follow the below guidelines:

Table Styling Example
<p class="table-header"></p> Revenue Retargeting
<p class="table-cell-value"></p> 5,233,185

Example Output

Date Revenue Conversion %
12/01/1986 $383,318 53.3%
12/02/1986 $3,318 8.1%
12/03/1986 $83,831 14.45%

Code

  .table-header {
    font-family: "Tableau Medium", sans-serif;
    color: #31383F;
    font-size: 9px;
  }

  .table-cell-value {
    font-family: "Tableau Medium", sans-serif;
    color: #31383F;
    font-size: 11px;
  }

Colors

Theme Colors

We use a subset Measured’s colors to create a smaller color palette for generating Tableau Dashboards.

Font Color
Background Gray
Accent Orange
Info

Chart Colors

Series lines, Column charts, Bar charts, etc, should make use of the following colors in the following order.

Accent Orange
Medium Gray
Lavender
Dark Gray
Primary Blue
Green
Rose
Burnt Yellow
Purple