Design Token vs Brand.yml

Design Token

By JR Brugger (Design Workflow)

Build a consistent design system with organized colors, spacing, fonts, and themes.

Brand.yml

By Posit

Define your brand colors, fonts, and logos once, use them everywhere in Shiny and Quarto.

Design Token

• Creates organized color palettes with global, semantic, and component-level tokens
• Defines spacing scales, typography hierarchies, and shadow systems
• Establishes naming conventions for design elements across your product
• Generates documentation for how and when to use each design token
• Supports theming and multi-brand design systems

Brand.yml

• Creates a single YAML file that stores your brand colors, fonts, and logo files
• Automatically applies your branding to Shiny web apps and Quarto documents
• Supports light and dark mode variants for colors and logos
• Integrates with Google Fonts and custom typography
• Works across HTML reports, dashboards, slides, and PDFs

Reach for Design Token when…

• You're building a new brand or design system from scratch
• You need consistent spacing, colors, and fonts across your product
• You're handing designs off to developers and want clear specs
• You're managing multiple themes or white-label products

Reach for Brand.yml when…

• You're setting up brand guidelines for a team's reports and dashboards
• You need consistent colors and fonts across multiple documents without manual styling
• You're creating Shiny apps or Quarto reports and want them to match your brand
• You want to update your brand palette once and have it apply everywhere