Theming Made Easy: Introducing brand.yml

Garrick Aden-Buie

posit:conf(2025)

A long time ago…

(in 2019)

in a galaxy far, far away…

(Austin, TX)

Push straight to prod

Jacqueline Nolis & Heather Nolis

rstudio::conf(2019)

We built this model

and we were pretty

excited about it…

But we’d go into business

meetings and be like guys,

look at these ROC curves!

And they’re like…

whatever

So 10 minutes before one meeting

we’re like, hey, let’s just

make a Shiny demo

and this changed the game

Our nice Shiny demo got us

—and I am not exaggerating—

millions of dollars of funding

& multiple new hires

We spent an extra day

making the HTML look nicer to give us that

polished, professional look

+ one day

polished

ggpomological

xaringanthemer

usf-beamer

polish matters

tinkering <<< presenting

write once, use everywhere

brand guidelines → YAML

Pulse AI Assistant

An AI-powered concierge that solves
problems before you even notice them.

How much should we charge?

Download PDF File

meta:

logo:

typography:

color:

meta:

logo:

typography:

color:

_brand.yml

meta:
  name: Pulse Mobile
  link: https://www.pulsemobile.com

_brand.yml

meta:
  name:
    short: Pulse Mobile
    full: Pulse Mobile Telecoms.
  link: https://www.pulsemobile.com

_brand.yml

meta:
  name:
    short: Pulse Mobile
    full: Pulse Mobile Telecoms.
  link:
    home: https://www.pulsemobile.com

_brand.yml

meta:
  name:
    short: Pulse Mobile
    full: Pulse Mobile Telecoms.
  link:
    home: https://www.pulsemobile.com
    bluesky: https://bsky.app/profile/pulsemobile

meta: ✅

logo:

typography:

color:

_brand.yml

color:
  palette:
    pulse-purple: "#8a2be2"
    electric-blue: "#00c2ff"
    mint-green: "#4cd964"

_brand.yml

color:
  palette:
    pulse-purple: "#8a2be2"
    purple: pulse-purple
    electric-blue: "#00c2ff"
    sunrise-yellow: "#ffd600"

_brand.yml

color:
  palette:
    purple: "#8a2be2"
    blue: "#00c2ff"
    yellow: "#ffd600"

_brand.yml

color:
  palette:
    purple: "#8a2be2"
    blue: "#00c2ff"
    yellow: "#ffd600"

  primary: purple
  secondary: blue
  warning: yellow

_brand.yml

color:
  primary: "#8a2be2"
  secondary: "#00c2ff"
  warning: "#ffd600"

meta: ✅

logo:

typography:

color: ✅

_brand.yml

typography:
  fonts:
    - family: Montserrat
    - family: Montserrat Alternates
    - family: Space Mono

_brand.yml

typography:
  fonts:
    - family: Montserrat
      source: google
    - family: Montserrat Alternates
      source: bunny
    - family: Space Mono
      source: file

_brand.yml

typography:
  fonts:
    - family: Montserrat
      source: google
    - family: Montserrat Alternates
      source: google
    - family: Space Mono
      source: google

_brand.yml

typography:
  fonts:
    - family: Montserrat
      source: google
    - family: Montserrat Alternates
      source: google
    - family: Space Mono
      source: google
  base: Montserrat
  headings: Montserrat Alternates
  monospace: Space Mono

_brand.yml

typography:
  fonts:
    - family: Montserrat
      source: google
    - family: Montserrat Alternates
      source: google
    - family: Space Mono
      source: google
  base: Montserrat
  headings:
    family: Montserrat Alternates
    color: purple
  monospace: Space Mono

_brand.yml

color:
  palette:
    purple: "#8a2be2"

typography:
  fonts: [...]
  base: Montserrat
  headings:
    family: Montserrat Alternates
    color: purple
  monospace: Space Mono

meta: ✅

logo:

typography: ✅

color: ✅

_brand.yml

logo:
  images:
    # Full logomarks
    full-color: logos/logomark-full-color.png
    full-color-svg: logos/logomark-full-color.svg
    full-black: logos/logomark-full-black.png
    full-black-svg: logos/logomark-full-black.svg
    full-white: logos/logomark-full-white.png
    full-white-svg: logos/logomark-full-white.svg

    # Medium logomarks
    med-color: logos/logomark-med-color.png
    med-color-svg: logos/logomark-med-color.svg
    med-black: logos/logomark-med-black.png
    med-black-svg: logos/logomark-med-black.svg
    med-white: logos/logomark-med-white.png
    med-white-svg: logos/logomark-med-white.svg

    # Icons
    icon-color: logos/icon-color.png
    icon-color-svg: logos/icon-color.svg
    icon-black: logos/icon-black.png
    icon-black-svg: logos/icon-black.svg
    icon-white: logos/icon-white.png
    icon-white-svg: logos/icon-white.svg

_brand.yml

logo:
  images:
    full-color: logos/logomark-full-color.png
    full-white: logos/logomark-full-white.png
    med-color: logos/logomark-med-color.png
    med-white: logos/logomark-med-white.png
    icon-color: logos/icon-color.png

_brand.yml

logo:
  images:
    full-color: logos/logomark-full-color.png
    full-white: logos/logomark-full-white.png
    med-color: logos/logomark-med-color.png
    med-white: logos/logomark-med-white.png
    icon-color: logos/icon-color.png
  small:
  medium:
  large:

_brand.yml

logo:
  images:
    full-color: logos/logomark-full-color.png
    full-white: logos/logomark-full-white.png
    med-color: logos/logomark-med-color.png
    med-white: logos/logomark-med-white.png
    icon-color: logos/icon-color.png
  small: icon-color
  medium:
  large:

_brand.yml

logo:
  images:
    full-color: logos/logomark-full-color.png
    full-white: logos/logomark-full-white.png
    med-color: logos/logomark-med-color.png
    med-white: logos/logomark-med-white.png
    icon-color: logos/icon-color.png
  small: icon-color
  medium:
    light: med-color
    dark: med-white
  large:

_brand.yml

logo:
  images:
    full-color: logos/logomark-full-color.png
    full-white: logos/logomark-full-white.png
    med-color: logos/logomark-med-color.png
    med-white: logos/logomark-med-white.png
    icon-color: logos/icon-color.png
  small: icon-color
  medium:
    light: med-color
    dark: med-white
  large:
    light: full-color
    dark: full-white

bslib.shinyapps.io/brand-yml

Quarto: HTML

report.qmd

---
title: "Pulse AI Assistant Performance Analysis"
subtitle: "Cost Savings, Revenue Impact & Customer Adoption"
author: "Data Science Team"
date: 2025-09-18

format: html
---

## Introduction and Business Context

_brand.yml

meta:
  name: Pulse Mobile

Download PDF File

Quarto

report.qmd

---
title: "Pulse AI Assistant Performance Analysis"
subtitle: "Cost Savings, Revenue Impact & Customer Adoption"
author: "Data Science Team"
date: 2025-09-18

format: html
---

_brand.yml

meta:
  name: Pulse Mobile

Quarto

report.qmd

---
title: "Pulse AI Assistant Performance Analysis"
subtitle: "Cost Savings, Revenue Impact & Customer Adoption"
author: "Data Science Team"
date: 2025-09-18

format: html

brand: _brand.yml
---

_brand.yml

meta:
  name: Pulse Mobile

Quarto

report.qmd

---
title: "Pulse AI Assistant Performance Analysis"
subtitle: "Cost Savings, Revenue Impact & Customer Adoption"
author: "Data Science Team"
date: 2025-09-18

format: html

brand:
  meta:
    name: Pulse Mobile
---

Quarto

report.qmd

---
title: "Pulse AI Assistant Performance Analysis"
subtitle: "Cost Savings, Revenue Impact & Customer Adoption"
author: "Data Science Team"
date: 2025-09-18

format: html

brand:
  color:
    primary: "#8a2be2"
    secondary: "#00c2ff"
    warning: "#ffd600"
---

Shiny

report.qmd

library(shiny)
library(bslib)

ui <- page_sidebar(
  theme = bs_theme()
)

Shiny

report.qmd

library(shiny)
library(bslib)

ui <- page_sidebar(
  theme = bs_theme(
    brand = "_brand.yml"
  )
)

Shiny

report.qmd

library(shiny)
library(bslib)

ui <- page_sidebar(
  theme = bs_theme(
    brand = list(
      color = list(
        primary = "#8a2be2",
        secondary = "#00c2ff",
        warning = "#ffd600"
      )
    )
  )
)

🤖 Write brand.yml with AI

Learn more

posit-dev.github.io/brand-yml

gadenbuie/brand-yml-posit-conf-2025