Brand skill

Use this skill when creating a new deck, rebranding an existing deck, or applying a company's visual identity. This skill tells you exactly which files to edit and what values to set.

The branding system

Every slidenerds deck has two files that control brand:

brand.config.ts at the project root. This is the single source of truth for colors, fonts, and spacing. The layout template reads this file and injects CSS custom properties on the <html> element at build time.
app/globals.css for structural CSS, font imports, and derived color tokens. Add custom @import rules for web fonts here. Do not hardcode colors in slide content. Always use var() references.

Changing brand.config.ts rebrands the entire deck. No slide files need color or font edits.

brand.config.ts structure

import type { BrandConfig } from '@slidenerds/runtime'