Manual
Visual Oficial

A Premiare é transformação

A Premiare Center não vende treinos — entrega transformação real, de corpo, mente e identidade. A identidade visual é dark, energética e direta: reflete confiança, disciplina e a força de quem encara o desafio de mudar.

A marca da Premiare é composta pela palavra PREMIARE em fonte Barlow Black, com duas asas geométricas douradas abrindo a tipografia e o lettering CENTER sublinhado por uma linha dourada delicada. A versão oficial é a aplicada sobre fundo escuro; a versão sobre fundo claro é uma adaptação técnica para materiais impressos.

Oficial · uso principal sobre dark

Adaptação · materiais impressos / fundo claro

Dark profundo + acento dourado

A paleta Premiare é minimalista e poderosa: preto absoluto como base e amarelo dourado vibrante como acento de alta energia. Cores secundárias (vermelho/cinza) e cores semânticas para feedback. Cada modalidade tem seu tom reservado.

Cada categoria de modalidade tem uma cor reservada para identificação visual rápida em grades de horário, badges e cards. Use apenas no contexto da respectiva modalidade.

Barlow — a fonte do movimento

A Barlow é uma fonte sans-serif geométrica com personalidade esportiva. Inspirada em sinalização de transporte público e pista de corrida, transmite movimento, energia e profissionalismo. Para dados técnicos (códigos, IDs, valores) usamos JetBrains Mono.

• Títulos display e H1 sempre em UPPERCASE com letter-spacing negativo (-1.2px a -2.5px).
• Body line-height sempre 1.55 a 1.65 para leitura confortável sobre fundo escuro.
• JetBrains Mono apenas para dados técnicos: IDs de aluno, timestamps, códigos de plano, valores em listas.
• Em hero e títulos principais, usar o gradient gold sobre porções da palavra para criar destaque.
• Nunca: Comic Sans, Times, Arial decorativo, fontes script. Sempre Barlow + JetBrains Mono.

Sistema fluido mobile-first

Layout flexível com container central, grid responsivo de 12 colunas e gap consistente. Desenhamos sempre mobile primeiro e expandimos para desktop.

Escala baseada em múltiplos de 4px

Sistema de espaçamento coerente em paddings, margins e gaps. Sempre múltiplos de 4 para alinhamento perfeito ao baseline grid.

Sistema completo de CTAs

Todas as variantes de ação, estados e tamanhos. Sempre uppercase, font-weight 700 e letter-spacing sutil para reforçar a personalidade direta da marca.

• Primary: gradient gold (135°), texto preto, shadow hover, translateY(-2px).
• Secondary: borda gold, fundo transparente, hover fill gold-soft.
• Ghost: bg3, borda sutil, para ações secundárias e cancelamentos suaves.
• Padding padrão: 12px 22px · radius 8px · font 14px / 700 / uppercase / letter-spacing 0.6px.
• Transição: 0.25s cubic-bezier em todos os estados (transform + box-shadow).

Inputs claros, foco dourado

Inputs com fundo bg base, borda sutil e focus glow gold. Labels uppercase em gold para hierarquia visual.

Containers com presença

Cards são a unidade base de agrupamento. Fundo bg2, borda sutil, radius 14px e hover com elevação.

Pílulas semânticas

Identificadores compactos para modalidades, status de plano e metadados. Sempre com ícone + texto.

Feedback direto e claro

Avisos persistentes (alerts) e mensagens efêmeras (toasts). Sempre com ícone Font Awesome + título + descrição curta.

Font Awesome 6 · sem emojis

Biblioteca oficial: Font Awesome 6.5.1 nos estilos fas e fab. Para transmitir energia e profissionalismo, a Premiare nunca usa emojis em interfaces. Sempre ícones FA nas cores da marca.

Copiar<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

Listagens de alunos e treinos

Padrão para listagens no painel: matrículas, treinos, pagamentos. Hover sutil em gold e cabeçalho destacado.

Métricas da operação

Cards de métricas-chave para painel administrativo. Delta em verde/vermelho com seta.

Estados de processamento

Identidade do aluno

Iniciais sobre gradient gold. Quando o aluno fizer upload, a foto sobrescreve as iniciais.

13 modalidades, 1 transformação

Cada modalidade Premiare tem sua identidade visual reservada (cor + ícone). Use no contexto correto em grids de horário, badges e cards de aula.

A voz que desenterra a melhor versão

O manifesto é a alma da marca. Use-o em materiais institucionais, abertura de campanhas e onboarding de novos colaboradores.

Eventos em tempo real

Padrão visual do feed de check-ins, conversões e ações em tempo real exibido em telões da unidade e no painel admin.

Variáveis CSS oficiais

Copie e cole em qualquer novo projeto Premiare. Single source of truth.

Copiar tokens/* Premiare Center — Design Tokens v1.0 */
:root {
  /* Backgrounds */
  --bg:   #0a0a0a;
  --bg2:  #111111;
  --bg3:  #181818;
  --bg4:  #1f1f1f;

  /* Bordas */
  --border:   rgba(255, 204, 0, 0.10);
  --border2:  rgba(255, 255, 255, 0.10);
  --border3:  rgba(255, 255, 255, 0.20);

  /* Brand */
  --gold:         #FFCC00;  /* primária */
  --gold-bright:  #FFD700;  /* hover */
  --gold-soft:    rgba(255, 204, 0, 0.12);
  --gradient-gold: linear-gradient(135deg, #FFCC00 0%, #FFD700 50%, #FFB800 100%);

  /* Modalidades */
  --cardio:        #ff5252;
  --forca:         #ffcc00;
  --danca:         #ec407a;
  --luta:          #ff9800;
  --relaxamento:   #4fc3f7;
  --kids:          #66bb6a;

  /* Status */
  --green:   #2ecc71;
  --yellow:  #f5a623;
  --red-2:   #ef4444;

  /* Texto */
  --text:  #ffffff;
  --text2: #cccccc;
  --text3: #888888;
  --text4: #555555;

  /* Tipografia */
  --font: 'Barlow', system-ui, sans-serif;
  --mono: 'JetBrains Mono', monospace;

  /* Raios */
  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 22px;

  /* Motion */
  --transition: 0.25s cubic-bezier(0.2, 0, 0, 1);
}

Energia em cada transição

Easing padrão: cubic-bezier(0.2, 0, 0, 1)

Mobile-first sempre

Sistema responsivo baseado em min-width. Desenhe primeiro mobile, expanda depois.

Para todo mundo

Atendemos sem julgamento. Isso vale também para acessibilidade digital. Padrões mínimos que toda interface Premiare deve seguir.

• Foco visível: outline 4px gold-soft em todo elemento interativo.
• Tamanho de toque: mínimo 44×44px em mobile.
• Movimento: respeita prefers-reduced-motion. Máximo 600ms.
• Cor não é o único indicador: badges sempre acompanham ícone + texto.
• Alt em imagens: sempre descrever fotos de aluno, modalidade, equipamento.

Direta, energética, sem rodeios

A comunicação da Premiare é motivacional sem ser piegas, intensa sem ser arrogante. Falamos com quem está pronto pra mudar — e com quem ainda precisa de um empurrão.

• Direto: frases curtas, verbos no presente, voz ativa.
• Intenso: evoca movimento, força, conquista. Sem suavidades vazias.
• Confiante: "vai funcionar" no lugar de "pode tentar".
• Acolhedor: nunca julgar quem está começando ou recomeçando.
• Honesto: mostramos resultados reais, não promessas mágicas.
• Português PT-BR sempre. Termos técnicos em inglês mantidos (HIIT, cross, drop-set).

Como usar — e como não usar

Mantenha sempre um espaço mínimo equivalente à altura do lettering CENTER ao redor de todo o logo — incluindo as asas laterais. Não cole texto, ícones ou imagens próximos da marca, nem invada o espaço das asas.