/* ========================================================================== FourDesk Help — Identidade visual -------------------------------------------------------------------------- Fonte: "Manual de Identidade - FourTec" (Miguel Munis & 2Maker), pág. 4-5. Paleta oficial, com Pantone e CMYK para quem for produzir material impresso: 01 #FFFAFA rgb 255,250,250 Pantone 649 up cmyk 8, 1, 0, 0 02 #25B085 rgb 36,175,137 Pantone 6153 c cmyk 79, 0, 60, 0 03 #031B20 rgb 3, 27, 32 Pantone 296 c cmyk 100, 61, 32, 96 04 #00D391 rgb 0,211,145 Pantone 3395 c cmyk 86, 0, 55, 0 05 #FF6720 rgb 255,103, 32 Pantone 165 c cmyk 0, 64, 80, 0 06 #418FDE rgb 54,143,231 Pantone 279 c cmyk 75, 18, 0, 0 07 #010B0D rgb 1, 11, 13 Pantone black 6 c cmyk 100, 61, 32, 96 HIERARQUIA — o manual é explícito (pág. 4): O verde vibrante é a cor PRIMÁRIA da Fourtec. O vínculo é com a Senior Sistemas: transmite parceria e credibilidade. O verde escuro dá profundidade; o off-white dá fundos limpos. "As cores adicionais, laranja, azul e outros tons não compõem a identidade principal da marca, mas têm papel estratégico: serão usadas em detalhes funcionais como CTAs, categorização de subprodutos e nichos." Por isso o laranja continua sendo o acento desta interface: ele é a cor de CATEGORIZAÇÃO do FourDesk como subproduto — é o que o próprio logotipo usa no ícone. O verde permanece como a cor institucional da marca-mãe e como semântica de sucesso. Trocar um pelo outro quebraria as duas leituras. REGRA DE LOGOTIPO (pág. 19 — usos incorretos): - Não aplicar a versão branca do logo sobre verde, laranja ou azul. - A tipografia do logotipo é sempre preta ou branca, nunca colorida. - Não alterar a ordem do símbolo em relação ao logotipo. Isso vale para o LOGOTIPO. Texto de interface colorido por semântica (verde = aprovado, vermelho = erro) não é alcançado por essa regra. ========================================================================== */ :root { /* ================= PALETA OFICIAL ================= */ --marca-off-white: #FFFAFA; /* 01 */ --marca-verde: #25B085; /* 02 — PRIMÁRIA */ --marca-verde-escuro: #031B20; /* 03 */ --marca-verde-vivo: #00D391; /* 04 */ --marca-laranja: #FF6720; /* 05 — subproduto FourDesk */ --marca-azul: #418FDE; /* 06 */ --marca-preto: #010B0D; /* 07 */ /* ================= RAMPAS DERIVADAS ================= Tons intermediários não existem no manual: foram calculados a partir das cores oficiais para dar conta de estados de interface (hover, fundo de alerta, borda). O degrau 500 é sempre a cor oficial. */ /* Verde — institucional e semântica de sucesso */ --verde-50: #F4FBF9; --verde-100: #E9F7F3; --verde-200: #C8EBE0; --verde-300: #92D7C2; --verde-400: #4EC29F; --verde-500: #25B085; /* oficial */ --verde-600: #1E8E6B; --verde-700: #176B51; --verde-800: #0F4837; /* Laranja — acento do FourDesk, CTAs */ --laranja-50: #FFF3ED; --laranja-100: #FFE4D6; --laranja-200: #FFC9AD; --laranja-300: #FFA478; --laranja-400: #FF8547; --laranja-500: #FF6720; /* oficial */ --laranja-600: #E04F0C; --laranja-700: #B03C08; /* Azul — informação, categorização */ --azul-50: #EFF6FD; --azul-100: #D9EAFA; --azul-200: #B4D5F4; --azul-500: #418FDE; /* oficial */ --azul-600: #2B72BB; --azul-700: #1F568E; /* Neutros — derivados do verde escuro #031B20, não do cinza puro. É o que mantém a interface na mesma família da marca: os cinzas carregam a mesma leve inclinação para o azul-esverdeado. */ --neutro-0: #FFFAFA; /* = off-white oficial */ --neutro-50: #F5F8F8; --neutro-100: #E9EFF0; --neutro-200: #D6E1E3; --neutro-300: #B4C7CB; --neutro-400: #8AA6AC; --neutro-500: #5D868E; --neutro-600: #3A6B75; --neutro-700: #1B505B; --neutro-800: #0E3D47; --neutro-900: #072B33; --neutro-950: #031B20; /* = verde escuro oficial */ /* ================= SEMÂNTICA ================= Use SEMPRE estes nomes nos componentes. Trocar a cor de um estado passa a ser uma linha aqui, não uma caçada pelos templates. */ /* Superfícies */ --surface-app: var(--marca-off-white); /* fundo da aplicação */ --surface-card: #FFFFFF; /* cartões, modais */ --surface-subtle: var(--neutro-50); /* zebra, cabeçalhos */ --surface-inverse: var(--marca-verde-escuro); /* menu lateral */ /* Texto */ --text-strong: var(--marca-preto); --text-default: var(--neutro-900); --text-muted: var(--neutro-500); --text-subtle: var(--neutro-400); --text-inverse: var(--marca-off-white); /* Traços */ --border-default: var(--neutro-200); --border-strong: var(--neutro-300); --border-subtle: var(--neutro-100); /* Ação — laranja, por ser a cor do subproduto */ --action: var(--marca-laranja); --action-hover: var(--laranja-600); --action-soft: var(--laranja-50); /* Marca — verde, presença institucional */ --brand: var(--marca-verde); --brand-soft: var(--verde-50); /* Estados */ --success: var(--marca-verde); --success-soft: var(--verde-50); --info: var(--marca-azul); --info-soft: var(--azul-50); --warning: #F59E0B; /* fora do manual: alerta precisa de âmbar */ --warning-soft: #FFFBEB; --danger: #E5484D; /* mesmo vermelho de erro do site fourtec */ --danger-soft: #FEF2F2; } /* ========================================================================== Bootstrap — realinhamento de cor O Bootstrap traz verde/laranja próprios. Aqui eles passam a apontar para a paleta oficial, senão a tela mistura duas identidades. ========================================================================== */ .btn-primary { --bs-btn-bg: var(--action); --bs-btn-border-color: var(--action); --bs-btn-hover-bg: var(--action-hover); --bs-btn-hover-border-color: var(--action-hover); --bs-btn-active-bg: var(--action-hover); --bs-btn-active-border-color: var(--action-hover); --bs-btn-disabled-bg: var(--laranja-200); --bs-btn-disabled-border-color: var(--laranja-200); } .btn-success { --bs-btn-bg: var(--success); --bs-btn-border-color: var(--success); --bs-btn-hover-bg: var(--verde-600); --bs-btn-hover-border-color: var(--verde-600); --bs-btn-active-bg: var(--verde-600); } .btn-outline-primary { --bs-btn-color: var(--action); --bs-btn-border-color: var(--action); --bs-btn-hover-bg: var(--action); --bs-btn-hover-border-color: var(--action); } .text-success { color: var(--success) !important; } .text-primary { color: var(--action) !important; } .text-info { color: var(--info) !important; } .bg-success { background-color: var(--success) !important; } .bg-primary { background-color: var(--action) !important; } .badge.bg-success { background-color: var(--success) !important; } .badge.bg-primary { background-color: var(--action) !important; } /* Foco visível na cor de ação — acessibilidade e coerência de marca */ .form-control:focus, .form-select:focus, .btn:focus-visible { border-color: var(--laranja-300); box-shadow: 0 0 0 0.2rem rgba(255, 103, 32, 0.18); } a { color: var(--action); } a:hover { color: var(--action-hover); }