Branding
Offizielle TeamPanel-Markenassets – Logos, Farbcodes, Typografie und Design-Tokens zum Weitergeben an Designer und KI.
Offizielle Markenrichtlinien für TeamPanel. Diese Seite enthält Logos, Farbcodes, Typografie und UI-Tokens – geeignet zum Weitergeben an Designer, Partner oder KI-Tools.
Logos
Wordmark-Logos (SVG) und Favicon. Auf dunklem Hintergrund die helle Variante nutzen, auf hellem Hintergrund die dunkle.
Wordmark – dunkel (für helle Hintergründe)
| Asset | Pfad | Verwendung |
|---|---|---|
| Logo (dunkel) | /logo-dark.svg | Helle Hintergründe, Light Mode |
| Direktlink | logo-dark.svg | Download / Einbindung |
Wordmark – hell (für dunkle Hintergründe)
| Asset | Pfad | Verwendung |
|---|---|---|
| Logo (hell) | /logo-white.svg | Dunkle Hintergründe, Dark Mode |
| Direktlink | logo-white.svg | Download / Einbindung |
Favicon & App-Icon
| Asset | Pfad | Verwendung |
|---|---|---|
| Favicon | /favicon.png | Browser-Tab, Bookmarks |
| App-Icon | /icon.png | Next.js App Icon |
Markenfarben
Primärfarbe ist ein klares Brand-Blau. Varianten für Hover, Soft-Akzente und dunkle Oberflächen.
| Name | Hex | CSS-Variable | Verwendung |
|---|---|---|---|
| Brand Blue | #335cff | --tp-blue | Primäraktionen, Links, Akzente |
| Brand Blue Dark | #2547d0 | --tp-blue-dark | Hover / Dark-Mode-Buttons |
| Brand Blue Soft | #476cff | --tp-blue-soft | Soft-Shadows, Fokus-Ringe |
| Primary (HSL) | ≈ #335cff | --color-fd-primary | hsl(228 100% 60%) Light Mode |
Farbflächen
Brand Blue
#335cff
Blue Dark
#2547d0
Blue Soft
#476cff
Light-Mode Surfaces
| Token | HSL | Rolle |
|---|---|---|
--color-fd-background | hsl(228 32% 97.5%) | Seitenhintergrund |
--color-fd-foreground | hsl(228 25% 12%) | Fließtext |
--color-fd-muted | hsl(228 28% 94.5%) | Gedämpfte Flächen |
--color-fd-muted-foreground | hsl(228 12% 42%) | Sekundärtext |
--color-fd-card | hsl(0 0% 100%) | Karten / Popovers |
--color-fd-border | hsl(228 18% 88%) | Rahmen |
--color-fd-secondary | hsl(228 30% 95%) | Sekundärflächen |
--color-fd-accent | hsl(228 55% 94%) | Hover / Soft-Highlight |
Dark-Mode Surfaces
| Token | HSL | Rolle |
|---|---|---|
--color-fd-background | hsl(228 22% 7%) | Seitenhintergrund |
--color-fd-foreground | hsl(228 20% 94%) | Fließtext |
--color-fd-muted | hsl(228 16% 12%) | Gedämpfte Flächen |
--color-fd-muted-foreground | hsl(228 12% 68%) | Sekundärtext |
--color-fd-card | hsl(228 18% 9%) | Karten |
--color-fd-border | hsl(228 14% 18%) | Rahmen |
--color-fd-primary | hsl(228 100% 68%) | Primärakzent Dark Mode |
Typografie
| Rolle | Font | Hinweise |
|---|---|---|
| Body | Inter | UI-Sans, System-Fallback |
| Überschriften | Inter Tight | Letter-spacing: -0.025em |
Quellen: Google Fonts – Inter, Inter Tight
Stil-Prinzipien
- Kühl-blau getönte Neutrals statt flachem Grau (
hue ≈ 228) - Ein klarer Primärakzent (
#335cff) – keine zusätzlichen Markenfarben - Subtile Radial-Gradients im Seitenhintergrund (Brand-Blau mit niedriger Opacity)
- Kein Purple-Glow, keine überladenen Schatten-Stacks
- Buttons: Brand Blue, Hover → Blue Dark, Soft-Fokusring mit Blue Soft
Prompt für KI (Copy & Paste)
Diesen Block kannst du 1:1 an eine KI weitergeben:
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 accentsAsset-URLs (Produktion)
| Asset | URL |
|---|---|
| Logo dunkel | https://docs.team-panel.com/logo-dark.svg |
| Logo hell | https://docs.team-panel.com/logo-white.svg |
| Favicon | https://docs.team-panel.com/favicon.png |
| Branding-Seite | https://docs.team-panel.com/branding |