Skill-Details

brand

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

ÜbereinstimmungMöglichGeprüft für branding

Quellecoolasspuppy/slide-nerdsExterne Quelle

Gemeldete Installationen1Nur Popularitätssignal

Vor Nutzung prüfen

Die automatische Prüfung bewertet Relevanz, nicht Sicherheit oder Empfehlung. Lies vor der Nutzung die Quellanweisungen.

Auf skills.sh ansehen (öffnet externe Seite)SKILL.md auf GitHub lesen (öffnet externe Seite)

Gespeicherte Quellvorschau

SKILL.md

Dieser Auszug wurde bei der Prüfung gespeichert. Die externe Quelle enthält die vollständige und aktuelle 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

Vollständige Quelle auf GitHub lesen

Kontext