Branding

Official TeamPanel brand assets – logos, color codes, typography, and design tokens for designers and AI tools.

Official brand guidelines for TeamPanel. This page includes logos, color codes, typography, and UI tokens – ready to share with designers, partners, or AI tools.

Logos

Wordmark logos (SVG) and favicon. Use the light variant on dark backgrounds and the dark variant on light backgrounds.

Wordmark – dark (for light backgrounds)

Asset	Path	Usage
Logo (dark)	`/logo-dark.svg`	Light backgrounds, light mode
Direct link	logo-dark.svg	Download / embed

Wordmark – light (for dark backgrounds)

Asset	Path	Usage
Logo (light)	`/logo-white.svg`	Dark backgrounds, dark mode
Direct link	logo-white.svg	Download / embed

Favicon & app icon

Asset	Path	Usage
Favicon	`/favicon.png`	Browser tab, bookmarks
App icon	`/icon.png`	Next.js app icon

Brand colors

The primary color is a clear brand blue. Variants cover hover states, soft accents, and dark surfaces.

Name	Hex	CSS variable	Usage
Brand Blue	`#335cff`	`--tp-blue`	Primary actions, links, accents
Brand Blue Dark	`#2547d0`	`--tp-blue-dark`	Hover / dark-mode buttons
Brand Blue Soft	`#476cff`	`--tp-blue-soft`	Soft shadows, focus rings
Primary (HSL)	≈ `#335cff`	`--color-fd-primary`	`hsl(228 100% 60%)` light mode

Color swatches

Brand Blue

#335cff

Blue Dark

#2547d0

Blue Soft

#476cff

Light-mode surfaces

Token	HSL	Role
`--color-fd-background`	`hsl(228 32% 97.5%)`	Page background
`--color-fd-foreground`	`hsl(228 25% 12%)`	Body text
`--color-fd-muted`	`hsl(228 28% 94.5%)`	Muted surfaces
`--color-fd-muted-foreground`	`hsl(228 12% 42%)`	Secondary text
`--color-fd-card`	`hsl(0 0% 100%)`	Cards / popovers
`--color-fd-border`	`hsl(228 18% 88%)`	Borders
`--color-fd-secondary`	`hsl(228 30% 95%)`	Secondary surfaces
`--color-fd-accent`	`hsl(228 55% 94%)`	Hover / soft tint

Dark-mode surfaces

Token	HSL	Role
`--color-fd-background`	`hsl(228 22% 7%)`	Page background
`--color-fd-foreground`	`hsl(228 20% 94%)`	Body text
`--color-fd-muted`	`hsl(228 16% 12%)`	Muted surfaces
`--color-fd-muted-foreground`	`hsl(228 12% 68%)`	Secondary text
`--color-fd-card`	`hsl(228 18% 9%)`	Cards
`--color-fd-border`	`hsl(228 14% 18%)`	Borders
`--color-fd-primary`	`hsl(228 100% 68%)`	Primary accent (dark)

Typography

Role	Font	Notes
Body	Inter	UI sans, system fallback
Headings	Inter Tight	Letter-spacing: `-0.025em`

Sources: Google Fonts – Inter, Inter Tight

Style principles

Cool blue-tinted neutrals instead of flat gray (hue ≈ 228)
One clear primary accent (#335cff) – no extra brand colors
Subtle radial gradients in the page background (brand blue at low opacity)
No purple glow, no heavy multi-layer shadow stacks
Buttons: Brand Blue, hover → Blue Dark, soft focus ring with Blue Soft

AI prompt (copy & paste)

Paste this block into an AI tool as-is:

TeamPanel Brand Guidelines

Product: TeamPanel (team-panel.com) – platform for game-server & community team organization.

Logos:
- Dark wordmark (light backgrounds): https://docs.team-panel.com/logo-dark.svg
- Light wordmark (dark backgrounds): https://docs.team-panel.com/logo-white.svg
- Favicon: https://docs.team-panel.com/favicon.png

Brand colors:
- Primary / Brand Blue: #335cff (CSS --tp-blue)
- Brand Blue Dark (hover): #2547d0 (--tp-blue-dark)
- Brand Blue Soft: #476cff (--tp-blue-soft)
- Primary HSL light: hsl(228 100% 60%)
- Primary HSL dark: hsl(228 100% 68%)

Surfaces (light):
- Background: hsl(228 32% 97.5%)
- Foreground: hsl(228 25% 12%)
- Muted: hsl(228 28% 94.5%)
- Muted foreground: hsl(228 12% 42%)
- Card: #ffffff
- Border: hsl(228 18% 88%)
- Accent soft: hsl(228 55% 94%)

Surfaces (dark):
- Background: hsl(228 22% 7%)
- Foreground: hsl(228 20% 94%)
- Muted: hsl(228 16% 12%)
- Card: hsl(228 18% 9%)
- Border: hsl(228 14% 18%)

Typography:
- Body: Inter
- Headings: Inter Tight, letter-spacing -0.025em

Style direction:
- Cool blue-tinted neutrals (hue ~228), not flat gray
- One primary accent (#335cff) only
- Subtle radial brand-blue background glow, low opacity
- Avoid purple gradients, heavy glow, cream/serif newspaper looks
- Clean, product-first UI; brand blue for CTAs and interactive accents

Asset URLs (production)

Asset	URL
Dark logo	https://docs.team-panel.com/logo-dark.svg
Light logo	https://docs.team-panel.com/logo-white.svg
Favicon	https://docs.team-panel.com/favicon.png
Branding page	https://docs.team-panel.com/en/branding

On this page