Extract Design vs Brand.yml

Extract Design

By Manav Arya

Pull the colors, fonts, and full design style from any website in one go.

Brand.yml

By Posit

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

Extract Design

• Extracts the color palette with exact color codes and the font families a site uses
• Captures spacing, shadows, rounded corners, layouts, and common components
• Scores the site's color contrast against accessibility guidelines
• Creates a visual preview page plus Figma variables and theme files for developers
• Compares the design of two websites side by side

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 Extract Design when…

• You want to know exactly which colors and fonts a website uses
• You're studying a competitor's or inspiration site's visual style
• You need to hand a site's design system to a designer in Figma or to a developer

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