Add HomelabDS brand identity: logo, colors, FusionPBX theme
This commit is contained in:
@@ -0,0 +1,57 @@
|
|||||||
|
# HomelabDS — Identidade Visual
|
||||||
|
|
||||||
|
_Marca criada em 2026-05-30_
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎨 Paleta de Cores
|
||||||
|
|
||||||
|
| Cor | Hex | RGB | Uso |
|
||||||
|
|-----|-----|-----|-----|
|
||||||
|
| **Primary** | `#00D4AA` | rgb(0, 212, 170) | Elementos principais, links, botões |
|
||||||
|
| **Primary Dark** | `#009B7D` | rgb(0, 155, 125) | Hover, active states |
|
||||||
|
| **Secondary** | `#1A1A2E` | rgb(26, 26, 46) | Backgrounds escuros, headers |
|
||||||
|
| **Accent** | `#FF6B6B` | rgb(255, 107, 107) | Destaques, alerts, badges |
|
||||||
|
| **Surface** | `#F8F9FA` | rgb(248, 249, 250) | Fundos de cards, seções |
|
||||||
|
| **Text** | `#2D3436` | rgb(45, 52, 54) | Texto principal |
|
||||||
|
| **Text Light** | `#636E72` | rgb(99, 110, 114) | Texto secundário |
|
||||||
|
| **White** | `#FFFFFF` | rgb(255, 255, 255) | Fundo puro |
|
||||||
|
|
||||||
|
## 🆎 Tipografia
|
||||||
|
|
||||||
|
- **Títulos:** Inter (Google Fonts) — SemiBold 600
|
||||||
|
- **Corpo:** Inter — Regular 400
|
||||||
|
- **Monospace:** JetBrains Mono — código, logs
|
||||||
|
- **Tamanhos:** 14px (corpo), 16px (lead), 20-32px (títulos)
|
||||||
|
|
||||||
|
## 📐 Logo
|
||||||
|
|
||||||
|
O logotipo do HomelabDS segue o conceito de:
|
||||||
|
- Escudo/escudo tecnológico (proteção + infraestrutura)
|
||||||
|
- Gradiente verde (#00D4AA → #009B7D)
|
||||||
|
- Forma limpa, moderna
|
||||||
|
- Versão completa e versão simplificada (ícone apenas)
|
||||||
|
|
||||||
|
## 🖼️ Aplicações
|
||||||
|
|
||||||
|
### Login / Painel
|
||||||
|
- Background: gradiente escuro (#1A1A2E → #16213E)
|
||||||
|
- Logo centralizado no topo
|
||||||
|
- Cards com sombra suave (box-shadow)
|
||||||
|
- Inputs com borda primary no focus
|
||||||
|
|
||||||
|
### Botões
|
||||||
|
- Primary: bg #00D4AA, text white
|
||||||
|
- Secondary: bg transparent, border #00D4AA
|
||||||
|
- Danger: bg #FF6B6B
|
||||||
|
- Hover: escurecer 10%
|
||||||
|
|
||||||
|
## 📁 Arquivos
|
||||||
|
|
||||||
|
```
|
||||||
|
homelabds-brand/
|
||||||
|
├── README.md ← este arquivo (manual)
|
||||||
|
├── colors.md ← paleta detalhada
|
||||||
|
├── logo/ ← versões do logo
|
||||||
|
└── theme-fusionpbx/ ← tema para FusionPBX
|
||||||
|
```
|
||||||
@@ -0,0 +1,11 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" style="stop-color:#00D4AA;stop-color:1" />
|
||||||
|
<stop offset="100%" style="stop-color:#009B7D;stop-color:1" />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<polygon points="32,4 58,20 58,44 32,60 6,44 6,20" fill="url(#grad)" opacity="0.95"/>
|
||||||
|
<polygon points="32,12 50,24 50,40 32,52 14,40 14,24" fill="none" stroke="#fff" stroke-width="2.5" opacity="0.9"/>
|
||||||
|
<text x="32" y="42" font-family="Arial, sans-serif" font-size="26" font-weight="700" fill="#fff" text-anchor="middle">H</text>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 669 B |
@@ -0,0 +1,23 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 120" width="400" height="120">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" style="stop-color:#00D4AA;stop-opacity:1" />
|
||||||
|
<stop offset="100%" style="stop-color:#009B7D;stop-opacity:1" />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<!-- Shield/Hexagon icon -->
|
||||||
|
<g transform="translate(20, 10)">
|
||||||
|
<polygon points="40,0 80,23 80,69 40,92 0,69 0,23" fill="url(#grad)" opacity="0.9"/>
|
||||||
|
<polygon points="40,12 68,28 68,60 40,76 12,60 12,28" fill="none" stroke="#fff" stroke-width="2.5" opacity="0.9"/>
|
||||||
|
<text x="40" y="52" font-family="Inter, Arial, sans-serif" font-size="22" font-weight="700" fill="#fff" text-anchor="middle">H</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- Text -->
|
||||||
|
<text x="120" y="52" font-family="Inter, Arial, sans-serif" font-size="36" font-weight="700" fill="#1A1A2E" letter-spacing="1">
|
||||||
|
Homelab<tspan fill="#00D4AA">DS</tspan>
|
||||||
|
</text>
|
||||||
|
<text x="122" y="78" font-family="Inter, Arial, sans-serif" font-size="14" font-weight="400" fill="#636E72" letter-spacing="3">
|
||||||
|
INFRAESTRUTURA & TECNOLOGIA
|
||||||
|
</text>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.1 KiB |
@@ -0,0 +1,175 @@
|
|||||||
|
/* ============================================
|
||||||
|
HomelabDS Theme — para FusionPBX
|
||||||
|
Substitui a identidade visual do FusionPBX
|
||||||
|
============================================ */
|
||||||
|
|
||||||
|
/* Paleta HomelabDS */
|
||||||
|
:root {
|
||||||
|
--hl-primary: #00D4AA;
|
||||||
|
--hl-primary-dark: #009B7D;
|
||||||
|
--hl-secondary: #1A1A2E;
|
||||||
|
--hl-accent: #FF6B6B;
|
||||||
|
--hl-surface: #F8F9FA;
|
||||||
|
--hl-text: #2D3436;
|
||||||
|
--hl-text-light: #636E72;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== TOP BAR / HEADER ========== */
|
||||||
|
.navbar, .navbar-inverse {
|
||||||
|
background: var(--hl-secondary) !important;
|
||||||
|
border: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-inverse .navbar-brand {
|
||||||
|
color: #fff !important;
|
||||||
|
font-weight: 700 !important;
|
||||||
|
font-size: 18px !important;
|
||||||
|
letter-spacing: 1px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-inverse .navbar-nav > li > a {
|
||||||
|
color: rgba(255,255,255,0.8) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-inverse .navbar-nav > li > a:hover,
|
||||||
|
.navbar-inverse .navbar-nav > .active > a {
|
||||||
|
color: var(--hl-primary) !important;
|
||||||
|
background: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-brand:before {
|
||||||
|
content: "◆ " !important;
|
||||||
|
color: var(--hl-primary) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== BUTTONS ========== */
|
||||||
|
.btn-primary {
|
||||||
|
background: var(--hl-primary) !important;
|
||||||
|
border-color: var(--hl-primary) !important;
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover {
|
||||||
|
background: var(--hl-primary-dark) !important;
|
||||||
|
border-color: var(--hl-primary-dark) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-danger {
|
||||||
|
background: var(--hl-accent) !important;
|
||||||
|
border-color: var(--hl-accent) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== LINKS ========== */
|
||||||
|
a {
|
||||||
|
color: var(--hl-primary-dark) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: var(--hl-primary) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== PANELS / CARDS ========== */
|
||||||
|
.panel {
|
||||||
|
border-color: #e8e8e8 !important;
|
||||||
|
box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-heading {
|
||||||
|
background: var(--hl-surface) !important;
|
||||||
|
border-bottom: 2px solid var(--hl-primary) !important;
|
||||||
|
font-weight: 600 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-primary > .panel-heading {
|
||||||
|
background: var(--hl-secondary) !important;
|
||||||
|
color: #fff !important;
|
||||||
|
border-bottom: 3px solid var(--hl-primary) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== TABLES ========== */
|
||||||
|
.table > thead > tr > th {
|
||||||
|
border-bottom: 2px solid var(--hl-primary) !important;
|
||||||
|
color: var(--hl-secondary) !important;
|
||||||
|
font-weight: 600 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-striped > tbody > tr:nth-of-type(odd) {
|
||||||
|
background: var(--hl-surface) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== FORMS ========== */
|
||||||
|
.form-control:focus {
|
||||||
|
border-color: var(--hl-primary) !important;
|
||||||
|
box-shadow: 0 0 0 2px rgba(0, 212, 170, 0.15) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== LABELS / BADGES ========== */
|
||||||
|
.label-primary {
|
||||||
|
background: var(--hl-primary) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label-success {
|
||||||
|
background: var(--hl-primary-dark) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label-danger {
|
||||||
|
background: var(--hl-accent) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== SIDEBAR / MENU ========== */
|
||||||
|
.sidebar-menu > li > a {
|
||||||
|
color: var(--hl-text) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-menu > li.active > a {
|
||||||
|
border-left: 3px solid var(--hl-primary) !important;
|
||||||
|
color: var(--hl-primary-dark) !important;
|
||||||
|
font-weight: 600 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== LOGIN PAGE ========== */
|
||||||
|
body.login-page {
|
||||||
|
background: linear-gradient(135deg, #1A1A2E 0%, #16213E 100%) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-page .login-box-body {
|
||||||
|
background: #fff !important;
|
||||||
|
border-radius: 8px !important;
|
||||||
|
box-shadow: 0 10px 40px rgba(0,0,0,0.2) !important;
|
||||||
|
border-top: 4px solid var(--hl-primary) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-page .login-logo h1 {
|
||||||
|
font-size: 28px !important;
|
||||||
|
font-weight: 700 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-page .login-logo h1:before {
|
||||||
|
content: "◆ " !important;
|
||||||
|
color: var(--hl-primary) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== FOOTER ========== */
|
||||||
|
.main-footer {
|
||||||
|
border-top: 2px solid var(--hl-primary) !important;
|
||||||
|
color: var(--hl-text-light) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== PAGINATION ========== */
|
||||||
|
.pagination > .active > a {
|
||||||
|
background: var(--hl-primary) !important;
|
||||||
|
border-color: var(--hl-primary) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination > li > a:hover {
|
||||||
|
color: var(--hl-primary-dark) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== ALERTS ========== */
|
||||||
|
.alert-success {
|
||||||
|
border-left: 4px solid var(--hl-primary-dark) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-danger {
|
||||||
|
border-left: 4px solid var(--hl-accent) !important;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user