Skill detail

brand

Applies a visual identity to SlideNerds decks, not general brand creation.

MatchPossibleReviewed for branding

Sourcecoolasspuppy/slide-nerdsExternal source

Reported installs1Popularity signal only

Inspect before use

Automated review checks relevance, not safety or endorsement. Read the source instructions before using this skill.

View on skills.sh (opens external page)Read SKILL.md on GitHub (opens external page)

Saved source preview

SKILL.md

The saved excerpt is a snapshot from review. The external source remains the complete and most current version.

---
name: brand
description: How to apply brand identity to a slidenerds deck by editing brand.config.ts and globals.css
---

# 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:

1. **`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.
2. **`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

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

export default {
  colors: {
    primary: '#0d0d0f',
    accent: '#f59e0b',
    background: '#111114',
    surface: '#1a1a1f',
    text: '#e8e6e3',
  },
  fonts: {
    heading: 'Sora, system-ui, sans-serif',
    body: 'DM Sans, system-ui, sans-serif',
    mono: 'JetBrains Mono, ui-monospace, monospace',
  },
  spacing: {
    slide: '5rem',
    section: '2rem',
    element: '1rem',
  },
} satisfies BrandConfig
```

## How layout.tsx wires brand to CSS

The generated `app/layout.tsx` imports `brand.config.ts` and injects CSS custom properties:

```tsx
import brandConfig from '../brand.config'

const brandVars = {
  '--color-primary': brandConfig.colors.primary,
  '--color-accent': brandConfig.colors.accent,
  '--color-background': brandConfig.colors.background,
  '--color-surface': brandConfig.colors.surface,
  '--color-text': brandConfig.colors.text,
  '--slide-padding': brandConfig.spacing.slide,
  '--font-heading': brandConfig.fonts.heading,
  '--font-body': brandConfig.fonts.body,
  '--font-mono': brandConfig.fonts.mono,
} as React.CSSProperties

export default function RootLayout({ children }) {
  return (
    <html lang="en" style={brandVars}>
      <body>
        <SlideRuntime>{children}</SlideRuntime>
      </body>
    </html>
  )
}
```

This means every CSS `var()` reference resolves to the brand.config.ts values. No manual wiring needed.

## What each color controls

| Token | CSS variable | Used by |
|---|---|---|
| `primary` | `--color-primary` | Section divider backgrounds, darkest surfaces |
| `accent` | `--color-accent` | Section labels, stat numbers, shape strokes, active indicators, chart fills, timeline dots, table highlights |
| `background` | `--color-background` | Slide canvas, body background |
| `surface` | `--color-surface` | Card backgrounds for charts, tables, code blocks |
| `text` | `--color-text` | Primary body text, headings |

## Derived colors

Some slides need colors derived from the base palette. Define these in `globals.css`:

```css
:root {
  --color-accent-dim: rgba(245, 158, 11, 0.12);
  --color-text-secondary: rgba(232, 230, 227, 0.6);
  --color-text-tertiary: rgba(232, 230, 227, 0.4);
  --color-border: rgba(255, 255, 255, 0.06);
  --color-surface-elevated: #222228;
}
```

When rebranding, extract the RGB values from the new accent and text colors and recompute these at the correct opacities.

## How to rebrand step by step

### Given a brand kit (colors + fonts)

1. **Edit `brand.config.ts`**: Set the five core colors and three font stacks.
2. **Update derived colors in `globals.css`**: Recompute accent-dim, text-secondary, text-tertiary, border, and surface-elevated using the new base values.
3. **Add font imports in `globals.css`**: Add Google Fonts `@import` rules before the Tailwind import.
4. **Done.** No slide files need editing.

### Given only a logo or single brand color

Derive the full palette from one color:

- **accent**: The brand color itself.
- **background**: Near

Read the full source on GitHub

Context