Quarto Brand Renderings

This website showcases how Quarto’s brand feature can style documents with different colour palettes and typography. Each page uses an inline brand configuration in its YAML front matter to define colours, fonts, and light/dark mode settings. The accompanying R and Python code then applies these brand settings to plots and tables.

Browse the examples to see how different combinations of colours and fonts affect the overall look and feel of a rendered Quarto document.

Brand	Palette	Base font	Heading font	Monospace font
Brand 1 (R, Python)	Nautical blues and teals	Chakra Petch	Great Vibes	JetBrains Mono
Brand 2 (R, Python)	Warm earth tones	Lora	Playfair Display	Fira Code
Brand 3 (R, Python)	Forest greens	Source Sans 3	Merriweather	Source Code Pro
Brand 4 (R, Python)	Sunset corals and roses	Open Sans	Bebas Neue	IBM Plex Mono
Brand 5 (R, Python)	Cool greys and slate	Inter	Montserrat	Space Mono
Brand 6 (R, Python)	Amber and bronze (local)	Crimson Text	Abril Fatface	Courier Prime

R

::: {layout="[[1], [1, 1]]"}

::: {}

## A plot using brand colours and fonts

```{r}
#| label: setup
#| include: false
library(ggplot2)
source("../../brand.R", local = knitr::knit_global())
configure_brand_fonts("light")
penguins <- read.csv("../../penguins.csv")
```

```{r}
#| renderings: [light, dark]
base_plot <- ggplot(penguins) +
  aes(
    x = bill_length_mm,
    y = bill_depth_mm,
    colour = species,
    shape = species
  ) +
  geom_point(na.rm = TRUE)

for (mode in c("light", "dark")) {
  plot <- base_plot +
    theme_brand(brand_mode = mode) +
    labs(
      title = tools::toTitleCase(paste(mode, "mode")),
      subtitle = "Using brand colours and fonts"
    )
  print(plot)
}
```

:::

::: {}
## Some text

Aenean placerat luctus tortor vitae molestie. Nulla at aliquet nulla. Sed efficitur tellus orci, sed fringilla lectus laoreet eget. Vivamus maximus quam sit amet arcu dignissim, sed accumsan massa ullamcorper. Sed iaculis tincidunt feugiat. Nulla in est at nunc ultricies dictum ut vitae nunc. Aenean convallis vel diam at malesuada. Suspendisse arcu libero, vehicula tempus ultrices a, placerat sit amet tortor. Sed dictum id nulla commodo mattis. Aliquam mollis, nunc eu tristique faucibus, purus lacus tincidunt nulla, ac pretium lorem nunc ut enim. Curabitur eget mattis nisl, vitae sodales augue. Nam felis massa, bibendum sit amet nulla vel, vulputate rutrum lacus. Aenean convallis odio pharetra nulla mattis consequat.
:::

::: {}

## A table using brand colours and fonts

```{r}
#| include: false
penguins_summary <- aggregate(
  cbind(bill_length_mm, bill_depth_mm, body_mass_g) ~ species,
  data = penguins,
  FUN = function(x) round(mean(x, na.rm = TRUE), 1)
)
```

::: {.light-content}

```{r}
gt_brand(penguins_summary, brand_mode = "light")
```

:::

::: {.dark-content}

```{r}
gt_brand(penguins_summary, brand_mode = "dark")
```

:::

:::

:::

Python

::: {layout="[[1], [1, 1]]"}

::: {}

## A plot using brand colours and fonts

```{python}
#| label: setup
#| include: false
import sys
sys.path.insert(0, "../..")
from brand import configure_brand_fonts, get_brand_palette, gt_brand, theme_brand
configure_brand_fonts()
```

```{python}
#| renderings: [light, dark]
import polars as pl
from plotnine import aes, geom_point, ggplot, labs, scale_color_manual

penguins = pl.read_csv("../../penguins.csv", null_values="NA").drop_nulls(
    ["bill_length_mm", "bill_depth_mm"]
)

base_plot = (
    ggplot(penguins.to_pandas())
    + aes(x="bill_length_mm", y="bill_depth_mm", color="species", shape="species")
    + geom_point()
)

for mode in ["light", "dark"]:
    palette = get_brand_palette(mode)
    plot = (
        base_plot
        + theme_brand(brand_mode=mode)
        + scale_color_manual(values=palette)
        + labs(
            title=f"{mode.title()} Mode",
            subtitle="Using brand colours and fonts",
        )
    )
    plot.show()
```

:::

::: {}
## Some text

Aenean placerat luctus tortor vitae molestie. Nulla at aliquet nulla. Sed efficitur tellus orci, sed fringilla lectus laoreet eget. Vivamus maximus quam sit amet arcu dignissim, sed accumsan massa ullamcorper. Sed iaculis tincidunt feugiat. Nulla in est at nunc ultricies dictum ut vitae nunc. Aenean convallis vel diam at malesuada. Suspendisse arcu libero, vehicula tempus ultrices a, placerat sit amet tortor. Sed dictum id nulla commodo mattis. Aliquam mollis, nunc eu tristique faucibus, purus lacus tincidunt nulla, ac pretium lorem nunc ut enim. Curabitur eget mattis nisl, vitae sodales augue. Nam felis massa, bibendum sit amet nulla vel, vulputate rutrum lacus. Aenean convallis odio pharetra nulla mattis consequat.
:::

::: {}

## A table using brand colours and fonts

```{python}
#| include: false
summary = (
    penguins.drop_nulls(["body_mass_g"])
    .group_by("species")
    .agg(
        pl.len().alias("count"),
        pl.col("bill_length_mm").mean().round(1),
        pl.col("bill_depth_mm").mean().round(1),
        pl.col("body_mass_g").mean().round(0),
    )
    .sort("species")
)
```

::: {.light-content}

```{python}
gt_brand(summary, brand_mode="light")
```

:::

::: {.dark-content}

```{python}
gt_brand(summary, brand_mode="dark")
```

:::

:::

:::