Skip to contents

How to follow Insper's design guide

Source: vignettes/brand-kit.Rmd
brand-kit.Rmd

Introduction

Insper’s brand guide covers print, not charts. It specifies Pantone references, tints and shades per hue family, and rules for text on colored backgrounds, but no categorical sequence and no guidance on which palette suits which kind of data. This vignette records how insperplot fills those gaps, which of its palettes are brand tokens verbatim, and which are derived.

Accessibility

The main palette is the brand’s own hue set, and it puts red, green, orange and yellow next to one another. That is a difficult combination under the common forms of color vision deficiency: deuteranopia and protanopia both compress the red-green axis, so categories that look obviously distinct to you may collapse into one another for roughly 1 in 12 male readers.

When distinguishability matters more than brand fidelity — a chart with many categories, a slide seen from the back of a room, a document you cannot control the rendering of — use the colorblind palette instead. It is the Okabe-Ito set, chosen precisely so that its colors stay separable across the usual color vision deficiencies.

insper_palette("colorblind")

This is the one palette in insperplot that contains no Insper colors, and that is deliberate. Treat it as an escape hatch rather than a default: reach for main for on-brand work, and switch when you have a reason to.

A second, separate question is what color text should sit on top of a brand color. The brand guide rules on this directly for the family base colors and neutrals, and those rules are shipped in the acessibilidade column of the insper_color_reference dataset.

subset(
  insper_color_reference,
  !is.na(acessibilidade),
  select = c(nome, hex, acessibilidade)
)
#> # A tibble: 15 × 3
#>    nome        hex     acessibilidade
#>    <chr>       <chr>   <chr>         
#>  1 vermelho    #E50505 branco        
#>  2 branco      #FFFFFF preto         
#>  3 preto       #000000 branco        
#>  4 verde 0     #92D053 preto         
#>  5 amarelo 0   #FFCC00 preto         
#>  6 laranja 0   #F89D49 preto         
#>  7 rosa 0      #F47DCD ambos         
#>  8 roxo 0      #730D9F branco        
#>  9 turquesa 0  #3ACC9F ambos         
#> 10 cinza 0     #DCDCDC preto         
#> 11 cinza 1     #ABABAB preto         
#> 12 cinza 2     #808080 branco        
#> 13 cinza 3     #5B5B5B branco        
#> 14 cinza 4     #3F3F3F branco        
#> 15 azul escuro #0E171D branco

The guide does not rule on the tints and shades, so those rows are NA. For those, insperplot falls back to computing WCAG relative luminance at draw time — this is what picks the per-bar label color in insper_barplot() when you use the stacked or filled variants, so labels stay readable without you specifying anything.

Typography

Brand guidelines

Insper’s brand guidelines assign three fonts.

  • GT Ultra Fine Bold carries titles, subtitles and most highlights.
  • Acumin Pro ExtraCondensed Bold carries other highlights, always in uppercase.
  • Inter carries body text, with Verdana as a fallback.

Following them literally gives the code below.

theme_minimal(base_family = "Inter 18pt") +
  theme_sub_plot(
    title = element_text(family = "GT Ultra Fine Bold", size = 22),
    subtitle = element_text(family = "GT Ultra Fine Bold", size = 10),
    caption = element_text(family = "Inter 18pt")
  )

some_plot +
  annotate(
    "text",
    label = "SOME HIGHLIGHT ALWAYS IN CAPS",
    family = "Acumin Pro ExtraCondensed",
  )

There are several problems with this typography scheme. GT Ultra is a proprietary (and expensive) font, Acumin Pro and Verdana are available on some operating systems but not on others. Inter is not available on most operating systems, but is freely available for download from Google Fonts.

insperplot implementation

insperplot bundles Inter, so the font installs with the package, and falls back to a system serif for titles. The package uses Inter for everything except the title, which uses Georgia.

tinsper <- theme_insper()

tinsper$plot.title@family
#> "Georgia"

tinsper$plot.subtitle@family
#> "Inter"

tinsper$text@family
#> "Inter"

The default theme_insper() will produce a plot like the one below.

base_plot <- ggplot(mtcars, aes(mpg, wt)) +
  geom_point() +
  labs(
    title = "Basic Theme",
    subtitle = "USING THE PACKAGE TO MAKE PLOTS",
    x = "Miles per Gallon",
    y = "Weight (lbs)",
    caption = "Source: mtcars | Insper"
  )

base_plot +
  theme_insper()

Users that have GT Ultra, Acumin, or Verdana installed can use them by setting font_title and font_text in theme_insper().

base_plot +
  theme_insper(font_title = "GT Ultra", font_text = "Verdana")

Where Acumin is installed, it can carry subtitles and highlights. Neither of the two chunks below is evaluated when this vignette is built, because the fonts they name are not bundled and element_text() falls back silently when a family is missing, which would show you a rendered figure in the wrong font.

base_plot +
  theme_insper(
    font_title = "Georgia",
    font_text = "Inter"
  ) +
  theme_sub_plot(
    subtitle = element_text(family = "Acumin Pro ExtraCondensed", size = 14)
  )

Verdana ships with most operating systems, but it buys little here, since Inter is bundled with the package.

base_plot +
  theme_insper(
    font_title = "Georgia",
    font_text = "Verdana"
  )

Colors

Insper’s brand guidelines are written for printed materials, with little emphasis on data visualization. The kit specifies Pantone references and a handful of tints and shades per hue family; it does not specify a categorical sequence. As a result, the bundled palettes will not always work out of the box, and it helps to know how each one was built.

Where each palette comes from

Some palettes are the brand kit verbatim.

  • main is the six secondary hue bases plus vermelho, interleaved so that adjacent categories contrast.
  • The six hue sequentials — turquesa, verde, amarelo, laranja, rosa, roxo — are the kit’s own five tokens per family, sorted light to dark by perceptual lightness. No color was invented.
  • cinza is the five neutral grays.

Others are derived, because the kit does not ship what a chart needs.

  • muted is main desaturated by 25%. None of its seven hexes appear in the guide. It exists because full-chroma brand hues are overwhelming across large filled areas.
  • vermelho and azul are interpolated ramps. The kit ships no tints or shades for either, only the single base token, so the intermediate steps were generated perceptually and only the endpoints are official.
  • The four diverging palettes have brand colors at both arms but share a neutral midpoint, #F4F4F2, which is not a brand token.

And colorblind is derived from the Okabe-Ito palette, which is not an Insper palette.

Building a categorical set by hand

When main is too loud and muted is not distinct enough, you can pull mid-range steps out of the sequential ramps. Those steps are still brand colors, and getting them to work is mostly a trial and error process.

paleta <- c(
  insper_palette("turquesa")[4],
  insper_palette("amarelo")[3],
  insper_palette("roxo")[2],
  insper_palette("muted")[1],
  insper_palette("cinza")[3],
  insper_palette("verde")[3],
  insper_palette("laranja")[3]
)

The indices are chosen by eye rather than by rule: darker steps for the light families (turquesa, amarelo, verde, laranja) and a lighter step for roxo, which is very dark at its base. The result is shown below on a stacked bar chart and a stacked area chart.

Insper Cidades

The Centro de Estudos das Cidades — Laboratório Arq.Futuro publishes its own application manual, with four colors of its own alongside the shared institutional vermelho, branco and preto.

insper_palette("cidades")

These are folhagem, solar, asfalto and tijolo. Everything prefixed cidades in insperplot comes from that manual rather than the institutional brand kit, and nothing in the package defaults to them — they are opt-in.

The sequential ramps are derived

Unlike the six institutional hue families, the Cidades manual ships no tints or shades — just the four standalone colors. The ramps are therefore built here, not transcribed: seven steps interpolated in CIELAB from a lightened anchor through the official color to a darkened one, with the official color pinned at position 4.

insper_palette("cidades_folhagem")

The pin matters more than it sounds. Lab interpolation rounds endpoints by a bit, so without it folhagem would come back from its own ramp as #009880 rather than the official #019881.

Text contrast

The Cidades manual has no accessibility page, so unlike the institutional colors there is no official ruling on what text color to put on these backgrounds. The values below are computed from WCAG relative luminance rather than taken from a guide.

Color Contrast vs white Contrast vs black Use
folhagem 3.61 5.81 black text
solar 1.95 10.78 black text
asfalto 9.01 2.33 white text
tijolo 3.36 6.26 black text

Asfalto is the only one of the four that takes white text.

Diverging data

There are two Cidades diverging palettes.

insper_palette("cidades_folhagem_asfalto")

insper_palette("cidades_folhagem_tijolo")

Both share the same neutral midpoint (#F4F4F2) as the institutional diverging palettes, so they drop into scale_fill_insper_c() the same way.