Colors and Fonts

Our colors and themes are inspired by the delightfully awful 90’s color choices of the R Foundation, particularly its logo, and the Rust Foundation’s official brand guide.

Colors

We have defined several utility classes to make using consistent colors easier. These can be used to define background and text colors. They are also used to define semantic colors, which are applied automatically.

Background colors

.bg-dark-blue-4

.bg-dark-blue-3

.bg-dark-blue-2

.bg-dark-blue-1

.bg-orange-4

.bg-orange-3

.bg-orange-2

.bg-orange-1

.bg-blue-4

.bg-blue-3

.bg-blue-2

.bg-blue-1

.bg-silver-4

.bg-silver-3

.bg-silver-2

.bg-silver-1

.bg-teal-4

.bg-teal-3

.bg-teal-2

.bg-teal-1

.bg-r-blue-2

.bg-r-blue-1

Text colors

.text-dark-blue-4, .text-dark-blue-3, .text-dark-blue-2, .text-dark-blue-1

.text-orange-4, .text-orange-3, .text-orange-2, .text-orange-1

.text-blue-4, .text-blue-3, .text-blue-2, .text-blue-1

.text-silver-4, .text-silver-3, .text-silver-2, .text-silver-1

.text-teal-4, .text-teal-3, .text-teal-2, .text-teal-1

.text-r-blue-2, .text-r-blue-1

Semantic colors

Primary Secondary Success Danger Warning Info Light Dark

These will also apply to Quarto callouts.

Note

Note that there are five types of callouts, including: note, tip, warning, caution, and important.

Warning

Callouts provide a simple way to attract attention, for example, to this warning.

Important

The callout heading is provided by the callout type, with the expected heading (i.e., Note, Warning, Important, Tip, or Caution).

Tip With Title

This is an example of a callout with a title. Providing a callout heading is optional.

Caution: Expand To Learn About Collapse

This is an example of a ‘collapsed’ caution callout that can be expanded by the user. You can use collapse="true" to collapse it by default or collapse="false" to make a collapsible callout that is expanded by default.

And they have utility classes for text colors:

.text-primary, .text-primary-emphasis, .text-secondary, .text-secondary-emphasis, .text-success, .text-success-emphasis, .text-danger, .text-danger-emphasis, .text-warning, .text-warning-emphasis, .text-info, .text-info-emphasis, .text-light, .text-light-emphasis, .text-dark, .text-dark-emphasis, .text-body, .text-body-emphasis, .text-body-secondary, .text-body-tertiary

Fonts

Our fonts are a mix of Rust Foundation fonts (Noto Sans and Serif) and IBM’s Plex Mono. The monofont is typically used for headings and navbar, though Noto Serif may also be used. For body text, we use Noto Sans. Utility classes are provided for each, though they should rarely be needed.

IBM Plex Mono
.font-mono
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Noto Serif
.font-serif
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Noto Sans
.font-sans
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Light and Dark

The .bg-* and .text-* utility classes automatically adapt to light and dark mode by flipping the tint scale — so .text-dark-blue-4 in light mode becomes .text-dark-blue-1 in dark mode, and .text-dark-blue-1 in light mode becomes .text-dark-blue-4 in dark mode. This means you generally don’t need to think about dark mode when using these classes. If you need a color to stay fixed regardless of the theme, however, simply append -fixed to the class name: .bg-orange-4-fixed and .text-orange-4-fixed will always render the original color.

Here are some examples. To see how they work, toggle light and dark mode in the browser:

.bg-orange-4
.bg-orange-4-fixed

Notice that the font changes from black to white in each example. This is Bootstrap’s color system adapting to the page background, which is meant to ensure a certain contrast level for accessibility. Semantic colors (.text-primary, .btn-success, callouts, etc.) are also handled by Bootstrap’s color system and do not need any special treatment. However, you will notice that Bootstrap’s color system does not recognize these utilities - currently, it does not even recognize its own utilities! - so contrast can be lost when using them. To ensure that accessibility is maintained, you may want to add .text-auto-dark or .text-auto-light classes, too. These will ensure that white and black text are correctly used with our utilities.

.bg-orange-1 with .text-auto-light
.bg-orange-4 with .text-auto-dark