🖥️ slides.garrickadenbuie.com/brand-yml-shiny

👨‍💻 gadenbuie/slides

A long, long time ago…

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

shiny

shiny + bslib

shiny + bslib + brand

aesthetic

usability effect

one day

once

for shiny

once

for quarto

once

for websites

once

for slides

once

for reports

once

posit-dev.github.io/brand-yml

T-Mobile Brand Assets

_brand.yml

meta:

_brand.yml

meta:

color:

_brand.yml

meta:

color:

typography:

_brand.yml

meta:

color:

typography:

logo:

posit-dev.github.io/brand-yml/brand/

_brand.yml

meta:
  name: AI @ T Mobile

_brand.yml

meta:
  name: AI @ T Mobile
  link: https://t-mobile.com

_brand.yml

meta:
  name:
    short: AI@TM
    full: AI @ T Mobile
  link: https://t-mobile.com

_brand.yml

meta:
  name:
    short: AI@TM
    full: AI @ T Mobile
  link:
    home: https://t-mobile.com

_brand.yml

meta:
  name:
    short: AI@TM
    full: AI @ T Mobile
  link:
    home: https://t-mobile.com
    github: https://github.com/ai-t-mobile
    bluesky: https://bsky.app/profile/t-mobile.bsky.social

_brand.yml

meta:
  name: AI @ T Mobile
  link: https://t-mobile.com

_brand.yml

meta: ...

color:

_brand.yml

meta: ...

color:
  palette:

_brand.yml

meta: ...

color:
  palette:
    magenta: "#fa9d28"

_brand.yml

meta: ...

color:
  palette:
    magenta: "#fa9d28"
    white: "#fbfbfb"
    black: "#141414"
    blue: "#4886ff"
    green: "#2dbf3b"
    yellow: "#fa9d28"
    red: "#f44125"

_brand.yml

meta: ...

color:
  palette:
    pink: "#fa9d28"
    white: "#fbfbfb"
    black: "#141414"
    blue: "#4886ff"
    green: "#2dbf3b"
    yellow: "#fa9d28"
    red: "#f44125"

_brand.yml

meta: ...

color:
  palette:
    pink: "#fa9d28"
  primary: "#E20074"

_brand.yml

meta: ...

color:
  palette:
    pink: "#fa9d28"
  primary: pink

_brand.yml

meta: ...

color:
  palette: ...
  foreground: black
  background: white
  primary: pink
  secondary: "#666666"
  tertiary: "#F8F9FA"
  success: "#28A745"
  info: "#0088CE"
  warning: "#FF6B00"
  danger: "#DC3545"
  light: "#FFFFFF"
  dark: "#343434"

app.R

library(shiny)
library(bslib)
ui <- fluid_page(
  theme = bs_theme(
  fg = "#141414"
  bg = "#fbfbfb"
  primary = "#fa9d28"
  secondary = "#666666"
  tertiary = "#F8F9FA"
  success = "#28A745"
  info = "#0088CE"
  warning = "#FF6B00"
  danger = "#DC3545"
  light = "#FFFFFF"
  dark = "#343434"
))

_brand.yml

meta: ...

color:
  palette:
    pink: "#e20074" # T-Mobile's signature magenta
    white: "#fbfbfb"
    black: "#141414"
    blue: "#4886ff"
    green: "#2dbf3b"
    yellow: "#fa9d28"
    red: "#f44125"

  primary: pink

_brand.yml

meta: ...
color: ...

typography:

_brand.yml

meta: ...
color: ...

typography:
  fonts:

_brand.yml

meta: ...
color: ...

typography:
  fonts:
    - family: Noto Sans
      source: google

_brand.yml

meta: ...
color: ...

typography:
  fonts:
    - family: Noto Sans
      source: bunny

_brand.yml

meta: ...
color: ...

typography:
  fonts:
    - family: TeleNeo # T-Mobile's custom font
      source: file
      files:
        - path: fonts/TeleNeo-Regular.woff2
          weight: 400
        - path: fonts/TeleNeo-Medium.woff2
          weight: 500

_brand.yml

meta: ...
color: ...

typography:
  fonts:
    - family: Noto Sans
      source: google

_brand.yml

meta: ...
color: ...

typography:
  fonts:
    - family: Noto Sans
      source: google
  base: Noto Sans

_brand.yml

meta: ...
color: ...

typography:
  fonts:
    - family: Noto Sans
      source: google
  base: Noto Sans
  headings: Noto Sans

_brand.yml

meta: ...
color: ...

typography:
  fonts:
    - family: Noto Sans
      source: google
    - family: Fira Code
      source: google
  base: Noto Sans
  headings: Noto Sans
  monospace: Fira Code

_brand.yml

meta: ...
color: ...

typography:
  fonts:
    - family: Noto Sans
      source: google
  base: Noto Sans

_brand.yml

meta: ...
color: ...

typography:
  fonts:
    - family: Noto Sans
      source: google
  base:
    family: Noto Sans

_brand.yml

meta: ...
color: ...

typography:
  fonts:
    - family: Noto Sans
      source: google
  base:
    family: Noto Sans
    size: 18px
    line-height: 1.2
    weight: 300

_brand.yml

meta: ...
color: ...

typography:
  fonts:
    - family: Noto Sans
      source: google
  base:
    family: Noto Sans
    weight: 300
  headings:
    family: Noto Sans
    weight: 400

_brand.yml

meta: ...
color: ...

typography:
  fonts:
    - family: Noto Sans
      source: google
  base:
    family: Noto Sans
    weight: 300
  headings:
    weight: 400

_brand.yml

meta: ...
color: ...
typography: ...

logo:

_brand.yml

meta: ...
color: ...
typography: ...

logo: t-mobile.svg

_brand.yml

meta: ...
color: ...
typography: ...

logo:
  small: t-mobile-icon.png
  medium: t-mobile.svg
  large: t-mobile-wide.svg

_brand.yml

meta: ...
color: ...
typography: ...

logo:
  images:
    logo-black: logos/T-Mobile_Logo_Ltd-Use_RGB_K_2022-03-14.png
    logo-white: logos/T-Mobile_Logo_PRI_RGB_on-M_2022-03-14.png
    logo-pink: logos/T-Mobile_Logo_PRI_RGB_on-W_2022-03-14.png
    icon-black: logos/T-Digit_Logo_Ltd-Use_RGB_K_2022-03-14.png
    icon-white: logos/T-Digit_Logo_PRI_RGB_on-M_2022-03-14.png
    icon-pink: logos/T-Digit_Logo_PRI_RGB_on-W_2022-03-14.png

_brand.yml

meta: ...
color: ...
typography: ...

logo:
  images:
    logo-black: logos/T-Mobile_Logo_Ltd-Use_RGB_K_2022-03-14.png
    logo-white: logos/T-Mobile_Logo_PRI_RGB_on-M_2022-03-14.png
    logo-pink: logos/T-Mobile_Logo_PRI_RGB_on-W_2022-03-14.png
    icon-black: logos/T-Digit_Logo_Ltd-Use_RGB_K_2022-03-14.png
    icon-white: logos/T-Digit_Logo_PRI_RGB_on-M_2022-03-14.png
    icon-pink: logos/T-Digit_Logo_PRI_RGB_on-W_2022-03-14.png

  small: icon-pink
  medium:
    light: icon-black
    dark: icon-white
  large: logo-pink

_brand.yml (copy me)

meta:
  name: AI@T-Mobile
  link: https://www.t-mobile.com

color:
  palette:
    pink: "#fa9d28"
    white: "#fbfbfb"
    black: "#141414"
    blue: "#4886ff"
    green: "#2dbf3b"
    yellow: "#fa9d28"
    red: "#f44125"

  primary: pink

typography:
  fonts:
    - family: Noto Sans
      source: google

  base:
    family: Noto Sans
    weight: 300

  headings:
    weight: 400

🧑‍💻 bslib.shinyapps.io/brand-yml

brand.yml in Shiny

Start with a Shiny app

app.R

library(shiny)
library(bslib)

ui <- page_sidebar(
  title = "Intent Model Demo",

)

…you’re using bslib, right?

Add a `_brand.yml`

app.R

library(shiny)
library(bslib)

ui <- page_sidebar(
  title = "Intent Model Demo",

)

That’s it! Good job 👏

Add a `_brand.yml`

app.R

library(shiny)
library(bslib)

ui <- page_sidebar(
  title = "Intent Model Demo",
  theme = bs_theme()
)

Require a `_brand.yml`

app.R

library(shiny)
library(bslib)

ui <- page_sidebar(
  title = "Intent Model Demo",
  theme = bs_theme(brand = TRUE)
)

Choose a `_brand.yml`

app.R

library(shiny)
library(bslib)

ui <- page_sidebar(
  title = "Intent Model Demo",
  theme = bs_theme(
    brand = "brand-tmobile.yml"
  )
)

Re-use data from a `_brand.yml`

app.R

library(shiny)
library(bslib)

theme <- bs_theme()
brand <- attr(theme, "brand")

ui <- page_sidebar(
  title = "Intent Model Demo",
  theme = theme
)

Re-use data from a `_brand.yml`

app.R

library(shiny)
library(bslib)

theme <- bs_theme()
brand <- attr(theme, "brand")

ui <- page_sidebar(
  title = "Intent Model Demo",
  theme = theme,
  sidebar = sidebar(
    bg = brand$color$primary, ...
  )
)

Re-use data from a `_brand.yml`

app.R

library(shiny)
library(bslib)
library(thematic)

theme <- bs_theme()
brand <- attr(theme, "brand")

theme_set(theme_minimal(base_size = 20))
thematic_shiny(
  font = font_spec(brand$typography$base$family),
  accent = brand$color$primary,
)
update_geom_defaults("bar", list(fill = brand$color$primary))

ui <- page_sidebar(
  title = "Intent Model Demo",
  theme = theme,
  sidebar = sidebar(
    bg = brand$color$primary, ...
  )
)

Shiny extras with `_brand.yml`

app.R

theme = bs_theme(
  primary = "#E20074",
  navbar_bg = "#E20074"
)

Shiny extras with `_brand.yml`

_brand.yml

color:
  palette:
    pink: "#E20074"
  primary: pink

color.palette → $brand-{color}
- Sass: $brand-pink and $brand-primary
color.palette → --brand-{color}
- CSS: --brand-pink and --brand-primary

Shiny extras with `_brand.yml`

_brand.yml

color:
  palette:
    pink: "#E20074"
  primary: pink

defaults:
  bootstrap:

Shiny extras with `_brand.yml`

_brand.yml

color:
  palette:
    pink: "#E20074"
  primary: pink

defaults:
  bootstrap:
    defaults:
      navbar-bg: $brand-pink

bootstrap.scss

/*-- scss:defaults --*/
$navbar-bg: $brand-pink !default;

Next steps

brand.yml beyond Shiny

Use the same _brand.yml file with…

Shiny for R
Shiny for Python
Quarto documents, websites, slides
R Markdown reports
pkgdown sites

brand.yml beyond Shiny

Use the same _brand.yml file with…

👩‍💻 Positron, VS Code, RStudio
🐍 brand_yml Python package
🔜 brand.yml R package

Learn more about brand.yml

📘 📖 posit-dev.github.io/brand-yml

🙋 💁‍♀️ posit-dev/brand-yml

📱 🛋️ posit.co/blog/unified-branding…

A long, long time ago…

shiny

shiny + bslib

shiny + bslib + brand

posit-dev.github.io/brand-yml

T-Mobile Brand Assets

🧑‍💻 bslib.shinyapps.io/brand-yml

brand.yml in Shiny

Start with a Shiny app

Add a _brand.yml

Add a _brand.yml

Require a _brand.yml

Choose a _brand.yml

Re-use data from a _brand.yml

Re-use data from a _brand.yml

Re-use data from a _brand.yml

Shiny extras with _brand.yml

Shiny extras with _brand.yml

Shiny extras with _brand.yml

Shiny extras with _brand.yml

Next steps

brand.yml beyond Shiny

brand.yml beyond Shiny

Learn more about brand.yml

Add a `_brand.yml`

Add a `_brand.yml`

Require a `_brand.yml`

Choose a `_brand.yml`

Re-use data from a `_brand.yml`

Re-use data from a `_brand.yml`

Re-use data from a `_brand.yml`

Shiny extras with `_brand.yml`

Shiny extras with `_brand.yml`

Shiny extras with `_brand.yml`

Shiny extras with `_brand.yml`