skills/nimble-databricks-data-products/references/branding.md

# Branding — "Powered by Nimble" (always on, neutral)

Branding is **always applied** (no flag). The look is **neutral light**: clean light UI, Nimble
yellow used only as an accent — never as the page background.

## Tokens
- **Nimble yellow** `#F2F23B` — accent only (links, highlights, primary chart series, the logo tile).
- **Black** `#0A0A0A` — text and the logo mark.
- **Background** white / near-white. Light theme everywhere.
- **Logo asset**: `assets/nimble-logo.png` (the black "N" mark on yellow). Bundled with this skill.

## In a Databricks App
1. Copy the logo into the app's public dir:
   `cp <skill>/assets/nimble-logo.png <app>/client/public/nimble-logo.png`
2. Force light mode: `<html lang="en" class="light">` in `client/index.html`.
3. Add a small reusable component and place it in the **header (top-right)** and the **footer**:
   ```tsx
   function PoweredByNimble({ className = '' }: { className?: string }) {
     return (
       <a href="https://www.nimbleway.com" target="_blank" rel="noopener noreferrer"
          className={`inline-flex items-center gap-2 group ${className}`} aria-label="Powered by Nimble">
         <span className="text-xs font-medium text-muted-foreground group-hover:text-foreground">Powered by</span>
         <img src="/nimble-logo.png" alt="Nimble" className="h-6 w-6 rounded-[5px] shadow-sm" />
         <span className="text-sm font-semibold text-foreground">Nimble</span>
       </a>
     );
   }
   ```
4. Optional accent: set the primary chart series / link color to `#F2F23B` where it reads well on
   light. Keep contrast legible (yellow text on white is unreadable — use black text, yellow fills).

## In an AI/BI dashboard
- Prefix the dashboard `display_name` and the top text widget with the mark + "Powered by Nimble"
  (e.g. `"🐶 Dog Products: Amazon vs Walmart  ·  Powered by Nimble"`).
- Add a markdown text widget at the top: `_Live web search · **Powered by Nimble**_`.
- To accent charts yellow, set series color 1 to `#F2F23B` (the compact spec uses the default palette;
  add colors per-chart only if asked — neutral default is fine).
- On AI/BI dashboards, render the brand as the title/text wordmark (the dependable option there);
  use the logo image in the app, where it displays from `client/public/`.

## Tone
Branding should feel like a tasteful "made with" credit, not a takeover. Neutral, professional,
yellow as a spark — not a yellow wall.