Branding

This page provides an overview of branding guidance for Omni reports, data visualizations, and web products. Omni’s visual identity—including color palettes and design standards—is outlined in detail in our branding guidance ([add link once ready T/Lauren]).

At the same time, branding should be responsive to context and audience. Projects may be adapted to align with CSI branding, or tailored to be fully client-branded or co-branded with Omni, depending on project needs and partnership agreements.

This page brings together key information and examples to support consistent, flexible application of branding across these scenarios.

Color Palette

Omni’s primary color palette consists of the following colors: black, navy, and steel-blue. Omni’s secondary color palette consists of the following colors: plum, teal, periwinkle, olive, orange-red, and golden yellow.

When to Use Each Color

All plain narrative should be written in navy font. Secondary colors should be reserved for data visualization, highlighting metrics, and drawing attention to warnings or key findings. See the examples below for guidance.

Color Swatches

Periwinkle

#5776B2

Links, interactive elements, and data viz accents.

Teal

#41816F

Data visualizations, section labels, and positive highlights.

Olive Green

#3B5530

Data visualizations and supporting color in charts.

Orange-Red

#CC4100

Warnings and alerts. Avoid for body text.

Plum

#921C4C

Warnings, alerts, and key metrics that need attention.

Golden Yellow

#F7B925

Data viz only. Avoid in text — does not meet WCAG contrast standards.

Use Case Examples

Use teal or periwinkle to draw attention to a single important number in a stat card or chart. When you want one metric to stand out in a data viz, use .steel-blue-200 or .steel-blue-400 as gray-adjacent background colors to make your highlight pop.

Key Metric

87%

Example of teal used to highlight a single important metric.

Key Metric

64%

Example of periwinkle used to highlight a single important metric.

Use the full secondary palette for charts and graphs. When highlighting a single metric, use steel-blue-200 or steel-blue-400 as muted background colors to make your highlight color pop. For all other data viz and text uses, prioritize the -600 family of colors in the Omni palette for stronger contrast and readability.

Bar chart demonstrating Omni color palette usage in data visualization

Use orange-red or plum to flag something the audience should pay attention to — like a data limitation, a risk factor, or a critical finding.

Warning

Note: This data reflects a small sample size and should be interpreted with caution.

Alert

Important: Response rates were below 50% for this subgroup. Findings may not be representative.

Never use golden yellow for body text — it fails WCAG contrast standards. Always prioritize -600 color families and bold colored text using **.

❌ Avoid

This text is hard to read — golden yellow fails WCAG contrast standards on white backgrounds.

✅ Do This Instead

Use navy or a -600 color for any colored text to ensure readability and accessibility.

Logos, Icons, and Images

Thoughtful use of logos, icons, and images helps bring reports to life while reinforcing brand identity. This section provides guidance on how to incorporate Omni, CSI, and client logos, along with icons and images that enhance clarity and engagement.

Omni Logos

The Omni and CSI logos are built into the template. The Omni logo populates in the navbar by default. See the CSI Branding section below to switch logos.

Client Logos

Save a client logo to the images folder and update the logo path in _quarto.yml. See the Client Branding section below for full instructions.

Icons

Over 2,000 free icons available through Font Awesome, already connected via styles.css. Visit the Font Awesome website to find icon names.

Images

Save images as .png or .jpg to the images folder and reference them using ![Alt text](images/your-image.png).

CSI Branding

CSI (the Center for Social Investment) is an Omni sub-brand. CSI-branded sites use Omni’s color palette and typography, so the only change from the default template is the logo. There’s no separate brand object to build.

The `use_csi_logos` Argument

The simplest way to apply CSI branding is to set use_csi_logos = TRUE when you create the site:

library(omni)
create_website("my-csi-site", use_csi_logos = TRUE)

This automatically points _quarto.yml at the CSI logos (which are bundled in the omni package): the no-text logo in the navbar and the full logo in the footer. You can combine it with a brand object if you also want custom colors or fonts:

create_website("my-csi-site", brand = brand, use_csi_logos = TRUE)

Swapping Logos on an Existing Site

use_csi_logos only takes effect when the site is first created. If you already have a site and want to switch it to CSI, edit _quarto.yml by hand. Replace the navbar logo with the no-text CSI logo:

website:
  navbar:
    logo: https://github.com/rfortherestofus/omni/blob/main/inst/assets/images/logo-no-text-csi.png?raw=true
    logo-alt: Logo of the Center for Social Investment

And the footer logo (the full version, with text) in the page-footer block:

  page-footer:
    right: |
      [![](https://github.com/rfortherestofus/omni/blob/main/inst/assets/images/logo-csi.png?raw=true){fig-alt="Center for Social Investment" width=100px}](https://www.omni.org/)

The use_csi_logos argument only swaps the logos. If you want the footer attribution to match, change the center copyright line from “Omni Institute” to “Center for Social Investment” yourself. Because CSI shares Omni’s palette and fonts, the color guidance and components elsewhere in this template apply unchanged.

Client Branded or Co-Branded Websites

Client branding is controlled by the brand argument of create_website(). If you leave it unfilled, create_website() behaves just like the default template, so running create_website("unbranded") creates a new directory called “unbranded” containing the standard Omni template. (The function also takes a use_csi_logos argument, covered in the CSI Branding section above.)

With the brand argument, you can modify the branding (colors, fonts, and logo). There are a few helper functions to generate the brand options. Because there are many options, let’s walk through an example that partly implements branding for DBHDS:

A Brand Template

The easiest way to start creating a brand is to run the print_brand_template() function. This prints an example brand specification to the console. It is the main code that governs the color and typography settings of the brand.

# Output of omni::print_brand_template()
Brand(
  meta = BrandMeta(name = "brand.yml"),
  color = BrandColor(
    foreground = "#081c39",
    background = "#ffffff",
    primary = "#081c39",
    secondary = "#677384",
    my_custom_col1 = '#ff5e34',
    my_custom_col2 = '#f7b925'
  ),
  typography = BrandTypography(
    fonts = list(
      Font(family = 'Open Sans', source = 'google'),
      Font(family = 'Inter Tight', source = 'google'),
      Font(
        family = 'Helvetica Neue',
        source = 'system',
        dir_source = 'inst/fonts/helvetica_neue'
      )
    ),
    base = FontSpec(
      family = 'Helvetica Neue',
      'line-height' = 1.6
    ),
    headings = FontSpec(
      family = "Inter Tight",
      weight = "bold"
    ),
    link = FontSpec(color = "#5776b2")
  )
)

Setting Colors

Let’s start with the easiest changes, the color settings. The colors foreground, background, primary, and secondary are mandatory. After that, you can add more colors under names you choose. For DBHDS this could look like:

BrandColor(
  foreground = "#00689A",
  background = "#ffffff",
  primary = "#00689A",
  secondary = "#75A142",
  grey = '#53575A',
  light_blue = '#48AEE1',
  yellow = '#E8B900',
  dark_blue = '#074369',
  light_green = '#97D162'
)

All of the additional colors (grey, light_blue, etc.) are also available in your Quarto document for inline text. Just as you can write [plum-colored text]{.plum-600}, you can do the same with the brand colors you specified. The naming is always .brand_<your_color_name>, so for example you could write [dark blue text]{.brand_dark_blue}.

Setting Fonts

With the BrandTypography() and Font() functions you register fonts for your document and decide where to use them. In the simplest case, you register only Google fonts:

BrandTypography(
  fonts = list(
    Font(family = 'Open Sans', source = 'google'),
    Font(family = 'Inter Tight', source = 'google'),
  ),
  # ... rest omitted
)

You can then use these font family names as the base, headings, link, or monospace font (none of which are mandatory). The FontSpec() function helps with that and lets you optionally specify the weight, size, color, and line height:

BrandTypography(
  fonts = list(
    Font(family = 'Open Sans', source = 'google'),
    Font(family = 'Inter Tight', source = 'google'),
  ),
  base = FontSpec(
    family = 'Open Sans',
    'line-height' = 1.6
  ),
  headings = FontSpec(
    family = "Inter Tight",
    weight = "bold"
  ),
  link = FontSpec(color = "#5776b2")
)

Things become slightly more complicated when you want to use a font that is not available on Google. In that case, use source = "system" and specify the directory where the font files are stored. In this example, the “Helvetica Neue” font is stored in a subdirectory font_files/helvetica_neue of the working directory:

BrandTypography(
  fonts = list(
    Font(family = 'Open Sans', source = 'google'),
    Font(family = 'Inter Tight', source = 'google'),
    ## Import new font
    Font(
      family = 'Helvetica Neue',
      source = 'system',
      dir_source = 'font_files/helvetica_neue'
    )
  ),
  base = FontSpec(
    family = 'Helvetica Neue', ## <--- Use newly imported font
    'line-height' = 1.6
  ),
  headings = FontSpec(
    family = "Inter Tight",
    weight = "bold"
  ),
  link = FontSpec(color = "#5776b2")
)

Putting It Together

All in all, a script to create a branded website looks like this:

library(omni)
brand <- Brand(
  meta = BrandMeta(name = "brand.yml"),
  color = BrandColor(
    foreground = "#00689A",
    background = "#ffffff",
    primary = "#00689A",
    secondary = "#75A142",
    grey = '#53575A',
    light_blue = '#48AEE1',
    yellow = '#E8B900',
    dark_blue = '#074369',
    light_green = '#97D162'
  ),
  typography = BrandTypography(
    fonts = list(
      Font(family = 'Open Sans', source = 'google'),
      Font(family = 'Inter Tight', source = 'google'),
      Font(
        family = 'Helvetica Neue',
        source = 'system',
        dir_source = 'font_files/helvetica_neue'
      )
    ),
    base = FontSpec(
      family = 'Helvetica Neue',
      'line-height' = 1.6
    ),
    headings = FontSpec(
      family = "Inter Tight",
      weight = "bold"
    ),
    link = FontSpec(color = "#5776b2")
  )
)
create_website('branded', brand)

Swapping the Logo

This creates a website that still contains the Omni logo by default. To use a different logo, change the content of the _quarto.yml file. Replace the URLs that point to the Omni logo with the new logo:

Header Labels

Below are the appropriate headers and labels to use to organize reports. The first level uses “##”, second “###”, third “####”, and section labels use <div class="section-label">Section Label</div>.

First level headers (##) are used for major sections of the report — such as “Background,” “Findings,” or “Recommendations.” These are the top-level organizational anchors and will appear in the “On this page” table of contents on the right side of the report.
Second level headers (###) are used to break a major section into subsections. For example, under a “Findings” section you might have “### Youth Outcomes” and “### Family Engagement.”
Third level headers (####) are used sparingly for sub-subsections when content requires further breakdown. For example, under “### Youth Outcomes” you might have “#### Academic Performance” and “#### Social-Emotional Well-Being.”
Section labels are used as a short visual tag to introduce a block of content — typically above a stat card grid or a chart. They are styled in small uppercase teal text and are not included in the table of contents.

First Level Header

Second Level Header

Third Level Header

Section Label