skills.rest
aramark-destinations
aramark-destinationsOFFICIAL
Explore all skills by this author →
GitHub

create-brand-tokens

Create or update a tokens.css file with only brand tokens differing from root defaults.

Updated Aug 27, 2026
Search Tags:#design-tokens#design-systems#brand-identity#tokens.css#brand-tokens#brand-spinup
One-click install
npx skills add https://github.com/aramark-destinations/aramark-mb --skill create-brand-tokens
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: create-brand-tokens
Source: https://github.com/aramark-destinations/aramark-mb/tree/main/.agents/skills/eds/create-brand-tokens
Command: npx skills add https://github.com/aramark-destinations/aramark-mb --skill create-brand-tokens

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Create or update a brand token CSS file for a property site. Only override what differs from root. Use when creating tokens for a new brand or updating an existing brand's visual identity without full site spinup.

Core Features & Use Cases

  • Only include tokens that DIFFER from root. An empty tokens.css is valid (see brands/unbranded/tokens.css).
  • Brand tokens are loaded at runtime via tokens.css to override root defaults for the current brand.
  • Use during brand spinups or updates to differentiate identity across sites and environments.

Quick Start

Create brands/{{brand}}/tokens.css with only overridden tokens and validate runtime cascade.

Frequently Asked Questions about create-brand-tokens

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I override only specific brand design tokens without rewriting the entire root tokens.css file?▼

To override specific brand design tokens, create a brand-specific tokens.css file containing only the values that differ from the root defaults. This ensures derived tokens recalculate automatically while minimizing committed overrides.

What is the best way to create CSS design tokens for a new brand spinup across multiple environments?▼

Creating CSS design tokens for a new brand spinup involves generating a tokens.css file loaded at runtime to override root defaults. The process enforces cascade rules and validates colors and typography for the specific brand.

Why does my brand tokens.css file need to exclude values that match the root design system defaults?▼

Your brand tokens.css file should exclude matching root defaults to ensure only necessary tokens are committed. This allows derived tokens to recalculate automatically and prevents redundant style declarations across multiple sites and environments.

Can I use an empty tokens.css file for a brand that shares the exact visual identity of the root design system?▼

Yes, an empty tokens.css file is perfectly valid for a brand matching the root design system. If no values differ from the root defaults, no overrides are needed, and the root tokens apply directly at runtime.

Does the brand token generation process validate colors and typography before committing overrides?▼

Yes, the brand token generation process validates colors and typography before committing overrides. It enforces cascade rules to ensure only necessary token values are written to the tokens.css file during brand spinups or visual identity updates.

Related Skills

Explore More Design & Creative Skills→
SalesforceCommerceCloudSalesforceCommerceCloud
51

b2c-metadata

Create and validate B2C Commerce site metadata XML for system-object extensions, custom objects, and site preferences.

Official
Basic
RSHVRRSHVR
1

elite-brand-design

Convert brand identity inputs into structured design tokens and style guidelines.

Community
Advanced
mkatoguimkatogui
3

brand-identity-generator

Generate brand identity systems with CSS-ready tokens and brand guidelines.

Community
Advanced
xobotyixobotyi
19

css

Enforce modern CSS conventions with low specificity and explicit cascade control.

Community
Intermediate