brand.yml Structure

Outline

brand.yml

meta:
  name: brand.yml
  links:
    home: https://posit-dev.github.io/brand-yml
    github: https://github.com/posit-dev/brand-yml

logo:
  images:
    icon-color: logos/icon/brand-yml-icon-color.png
    wide-color: logos/wide/brand-yml-wide-color.png
    tall-color: logos/wide/brand-yml-tall-color.png
  small: icon-color
  medium: wide-color
  large: tall-color

color:
  palette:
    orange: "#FF6F20"
    pink: "#FF3D7F"
    green: "#28A745"
    yellow: "#FFC107"
  primary: orange
  success: green
  warning: yellow
  danger: pink

typography:
  fonts:
    - family: Open Sans
      source: google
    - family: IBM Plex Mono
      source: google
    - family: Rubik
      source: google
  base:
    family: Open Sans
    line-height: 1.6
  headings:
    family: Rubik
    weight: normal
  link:
    color: purple
  monospace:
    family: IBM Plex Mono
    size: 1em

defaults:
  bootstrap:
    # bootstrap variable definitions
  quarto:
    format:
      # basic format-specific settings
      html:
      revealjs:
  shiny:
    # shiny specific settings

1: meta: Key identity information, name of the company, links to brand guidelines, etc.
2: logo: Files or links to the brand’s logo at various sizes.
3: color.palette: Named colors in the brand’s color palette.
4: color: Semantic colors, e.g. primary, secondary, success, warning, etc.
5: typography.fonts: Font definitions for Google, remote or bundled fonts.
6: typography: Font family, weight, style, color, and line height for key elements, e.g. base, headings and monospace text.
7: defaults: Additional context-specific settings beyond the basic brand colors and typography. These could be options, for example, that are used by Bootstrap in Quarto or Shiny. They could also be folded into existing Quarto yaml fields like format or website, or they could be new fields for other contexts like shiny.

Description

meta: Key identity information, name of the company, links to brand guidelines, etc.
logo: Files or links to the brand’s logo at various sizes.
color: Semantic colors, e.g. primary, secondary, success, warning, etc. color.palette: Named colors in the brand’s color palette.
typography: Font family, weight, style, color, and line height for key elements, e.g. base, headings and monospace text. typography.fonts: Font definitions for Google, remote or bundled fonts.
defaults: Additional context-specific settings beyond the basic brand colors and typography. These could be options, for example, that are used by Bootstrap in Quarto or Shiny. They could also be folded into existing Quarto yaml fields like format or website, or they could be new fields for other contexts like shiny.

Specification

We’ve created a schema for the structure of the brand.yml file in two flavors:

brand.yml schema as YAML, a YAML variant of JSON Schema used by Quarto to validate the structure _brand.yml files or brand in Quarto metadata.
brand.yml schema as JSON, a JSON Schema containing the definitions used in the YAML schema.