> ## Documentation Index
> Fetch the complete documentation index at: https://docs.fitlocus.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Diretrizes de Marca

> Guia de identidade visual do FitLocus

# Diretrizes de Marca FitLocus

A identidade visual do FitLocus foi projetada para transmitir uma sensação de modernidade, minimalismo e foco em resultados. Este guia apresenta os elementos fundamentais da marca e como utilizá-los corretamente.

## Logo

O logo do FitLocus é composto por um símbolo e um logotipo, que podem ser utilizados juntos ou separadamente, dependendo do contexto.

<Frame>
  <img src="https://mintcdn.com/fitlocus/8vqpgIEUvCBOkGCP/logo/light.svg?fit=max&auto=format&n=8vqpgIEUvCBOkGCP&q=85&s=997497394808bf8d6c3dbc419a94d6d0" alt="Logo FitLocus" width="1920" height="1080" data-path="logo/light.svg" />
</Frame>

### Variações

O logo possui diferentes variações para uso em diferentes contextos:

| Variação       | Uso                                           |
| -------------- | --------------------------------------------- |
| **Normal**     | Versão padrão para a maioria dos usos         |
| **Secundária** | Versão alternativa para contextos específicos |
| **Preto**      | Para uso em fundos claros                     |
| **Branco**     | Para uso em fundos escuros                    |
| **Verde**      | Versão monocromática na cor primária          |

### Área de Proteção

Sempre mantenha uma área de proteção ao redor do logo, equivalente à altura da letra "F" do logotipo.

### Tamanho Mínimo

Para garantir a legibilidade, o logo não deve ser utilizado em tamanhos menores que:

* 30px de altura para uso digital
* 10mm de altura para uso impresso

## Paleta de Cores

A paleta de cores do FitLocus é composta por cores principais e secundárias que transmitem energia, foco e modernidade.

### Cores Principais

<CardGroup cols={3}>
  <Card title="Verde Primário" icon="palette">
    <div style={{ backgroundColor: '#B4ED00', width: '100%', height: '100px', borderRadius: '8px' }} />

    <p>HEX: #B4ED00</p>
    <p>RGB: 180, 237, 0</p>
  </Card>

  <Card title="Cinza Escuro" icon="palette">
    <div style={{ backgroundColor: '#202020', width: '100%', height: '100px', borderRadius: '8px' }} />

    <p>HEX: #202020</p>
    <p>RGB: 32, 32, 32</p>
  </Card>

  <Card title="Branco Off-white" icon="palette">
    <div style={{ backgroundColor: '#F9F9F9', width: '100%', height: '100px', borderRadius: '8px', border: '1px solid #eee' }} />

    <p>HEX: #F9F9F9</p>
    <p>RGB: 249, 249, 249</p>
  </Card>
</CardGroup>

### Cores Secundárias

<CardGroup cols={4}>
  <Card title="Cinza Médio" icon="palette">
    <div style={{ backgroundColor: '#A6A6A6', width: '100%', height: '80px', borderRadius: '8px' }} />

    <p>HEX: #A6A6A6</p>
  </Card>

  <Card title="Cinza Claro" icon="palette">
    <div style={{ backgroundColor: '#E5E5E5', width: '100%', height: '80px', borderRadius: '8px' }} />

    <p>HEX: #E5E5E5</p>
  </Card>

  <Card title="Verde Escuro" icon="palette">
    <div style={{ backgroundColor: '#8CB800', width: '100%', height: '80px', borderRadius: '8px' }} />

    <p>HEX: #8CB800</p>
  </Card>

  <Card title="Verde Claro" icon="palette">
    <div style={{ backgroundColor: '#D6FF7E', width: '100%', height: '80px', borderRadius: '8px' }} />

    <p>HEX: #D6FF7E</p>
  </Card>
</CardGroup>

## Tipografia

A tipografia do FitLocus utiliza duas fontes principais que se complementam para criar uma identidade visual coesa e moderna.

### Fonte Principal: Hanken Grotesk

Hanken Grotesk é utilizada para a maioria dos textos, incluindo títulos, parágrafos e elementos de interface.

<Frame>
  <div style={{ fontFamily: 'Hanken Grotesk, sans-serif' }}>
    <h1 style={{ fontSize: '36px', margin: '0 0 8px 0' }}>Hanken Grotesk Bold</h1>
    <h2 style={{ fontSize: '24px', margin: '0 0 8px 0', fontWeight: '500' }}>Hanken Grotesk Medium</h2>
    <p style={{ fontSize: '16px', margin: '0 0 8px 0', fontWeight: '400' }}>Hanken Grotesk Regular para textos e parágrafos.</p>
    <p style={{ fontSize: '14px', margin: '0', fontWeight: '300' }}>Hanken Grotesk Light para textos secundários.</p>
  </div>
</Frame>

### Fonte Secundária: SUPERINE

SUPERINE é utilizada para títulos de destaque e elementos especiais que precisam de maior impacto visual.

<Frame>
  <div style={{ fontFamily: 'SUPERINE, sans-serif' }}>
    <h1 style={{ fontSize: '36px', margin: '0 0 8px 0' }}>SUPERINE BOLD</h1>
    <h2 style={{ fontSize: '24px', margin: '0 0 8px 0' }}>SUPERINE REGULAR</h2>
  </div>
</Frame>

### Hierarquia Tipográfica

| Elemento      | Fonte          | Peso    | Tamanho       |
| ------------- | -------------- | ------- | ------------- |
| H1            | SUPERINE       | Bold    | 36px/2.25rem  |
| H2            | Hanken Grotesk | Bold    | 30px/1.875rem |
| H3            | Hanken Grotesk | Bold    | 24px/1.5rem   |
| H4            | Hanken Grotesk | Medium  | 20px/1.25rem  |
| H5            | Hanken Grotesk | Medium  | 18px/1.125rem |
| H6            | Hanken Grotesk | Medium  | 16px/1rem     |
| Parágrafo     | Hanken Grotesk | Regular | 16px/1rem     |
| Texto pequeno | Hanken Grotesk | Regular | 14px/0.875rem |
| Botões        | Hanken Grotesk | Medium  | 16px/1rem     |

## Elementos Visuais

### Ícones

Os ícones do FitLocus seguem um estilo minimalista e consistente, com linhas finas e cantos arredondados.

<Frame>
  <div style={{ display: 'flex', gap: '24px', justifyContent: 'center' }}>
    <div style={{ textAlign: 'center' }}>
      <div style={{ width: '48px', height: '48px', backgroundColor: '#B4ED00', borderRadius: '12px', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 8px' }}>
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M20.25 6.75H3.75C3.33579 6.75 3 7.08579 3 7.5V16.5C3 16.9142 3.33579 17.25 3.75 17.25H20.25C20.6642 17.25 21 16.9142 21 16.5V7.5C21 7.08579 20.6642 6.75 20.25 6.75Z" stroke="#202020" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />

          <path d="M15.75 12C15.75 12.5967 15.5129 13.169 15.091 13.591C14.669 14.0129 14.0967 14.25 13.5 14.25C12.9033 14.25 12.331 14.0129 11.909 13.591C11.4871 13.169 11.25 12.5967 11.25 12C11.25 11.4033 11.4871 10.831 11.909 10.409C12.331 9.98705 12.9033 9.75 13.5 9.75C14.0967 9.75 14.669 9.98705 15.091 10.409C15.5129 10.831 15.75 11.4033 15.75 12Z" stroke="#202020" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />

          <path d="M7.5 9.75H7.51" stroke="#202020" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />

          <path d="M7.5 14.25H7.51" stroke="#202020" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </div>

      <p style={{ margin: '0', fontSize: '14px' }}>Pagamento</p>
    </div>

    <div style={{ textAlign: 'center' }}>
      <div style={{ width: '48px', height: '48px', backgroundColor: '#B4ED00', borderRadius: '12px', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 8px' }}>
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M7.5 12L10.5 15L16.5 9" stroke="#202020" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />

          <path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="#202020" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </div>

      <p style={{ margin: '0', fontSize: '14px' }}>Concluído</p>
    </div>

    <div style={{ textAlign: 'center' }}>
      <div style={{ width: '48px', height: '48px', backgroundColor: '#B4ED00', borderRadius: '12px', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 8px' }}>
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M3.75 5.25H20.25" stroke="#202020" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />

          <path d="M3.75 9.75H20.25" stroke="#202020" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />

          <path d="M3.75 14.25H20.25" stroke="#202020" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />

          <path d="M3.75 18.75H20.25" stroke="#202020" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </div>

      <p style={{ margin: '0', fontSize: '14px' }}>Lista</p>
    </div>
  </div>
</Frame>

### Botões

Os botões do FitLocus seguem um estilo consistente com cantos arredondados e cores da paleta principal.

<Frame>
  <div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap' }}>
    <button style={{ backgroundColor: '#B4ED00', color: '#202020', border: 'none', padding: '12px 24px', borderRadius: '8px', fontFamily: 'Hanken Grotesk, sans-serif', fontWeight: '500', fontSize: '16px' }}>
      Botão Primário
    </button>

    <button style={{ backgroundColor: '#202020', color: '#F9F9F9', border: 'none', padding: '12px 24px', borderRadius: '8px', fontFamily: 'Hanken Grotesk, sans-serif', fontWeight: '500', fontSize: '16px' }}>
      Botão Secundário
    </button>

    <button style={{ backgroundColor: 'transparent', color: '#202020', border: '2px solid #B4ED00', padding: '12px 24px', borderRadius: '8px', fontFamily: 'Hanken Grotesk, sans-serif', fontWeight: '500', fontSize: '16px' }}>
      Botão Outline
    </button>
  </div>
</Frame>

### Cards

Os cards do FitLocus utilizam cantos arredondados, sombras sutis e espaçamento generoso.

<Frame>
  <div style={{ backgroundColor: '#FFFFFF', borderRadius: '16px', padding: '24px', boxShadow: '0 4px 12px rgba(0, 0, 0, 0.05)', maxWidth: '320px' }}>
    <h3 style={{ fontFamily: 'Hanken Grotesk, sans-serif', fontWeight: 'bold', fontSize: '20px', margin: '0 0 16px 0' }}>Título do Card</h3>

    <p style={{ fontFamily: 'Hanken Grotesk, sans-serif', fontSize: '16px', margin: '0 0 24px 0', color: '#666' }}>
      Conteúdo do card com informações relevantes para o usuário.
    </p>

    <button style={{ backgroundColor: '#B4ED00', color: '#202020', border: 'none', padding: '12px 24px', borderRadius: '8px', fontFamily: 'Hanken Grotesk, sans-serif', fontWeight: '500', fontSize: '16px', width: '100%' }}>
      Ação Principal
    </button>
  </div>
</Frame>

## Fotografia

As fotografias utilizadas no FitLocus devem seguir estas diretrizes:

* Foco em pessoas reais praticando exercícios
* Iluminação natural e clara
* Cores vibrantes mas não saturadas
* Composição limpa e minimalista
* Expressões faciais positivas e motivadoras

## Voz e Tom

A comunicação do FitLocus deve seguir estas diretrizes:

* **Direta e clara**: Comunicação objetiva e fácil de entender
* **Motivadora**: Incentiva a ação e o progresso
* **Profissional mas acessível**: Conhecimento técnico apresentado de forma compreensível
* **Inclusiva**: Linguagem que abraça todos os níveis de condicionamento físico
* **Positiva**: Foco em conquistas e possibilidades, não em limitações

## Aplicações Incorretas

Evite estas aplicações incorretas da marca:

* Distorcer ou alterar as proporções do logo
* Usar cores fora da paleta oficial
* Aplicar efeitos como sombras ou gradientes no logo
* Usar a fonte SUPERINE para textos longos
* Utilizar emojis na comunicação oficial
* Aplicar o logo sobre fundos com padrões complexos
* Usar linguagem técnica excessiva ou gírias