> ## 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.

# Cores

> Paleta de cores do FitLocus

# Paleta de Cores

A paleta de cores do FitLocus foi cuidadosamente selecionada para transmitir uma sensação de modernidade, energia e foco, alinhada com a proposta de valor da plataforma.

## Cores Principais

As cores principais definem a identidade visual do FitLocus e são utilizadas em elementos de destaque, ações primárias e na comunicação da marca.

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

    <p><strong>HEX:</strong> #B4ED00</p>
    <p><strong>RGB:</strong> 180, 237, 0</p>
    <p><strong>HSL:</strong> 80, 100%, 46%</p>
  </Card>

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

    <p><strong>HEX:</strong> #202020</p>
    <p><strong>RGB:</strong> 32, 32, 32</p>
    <p><strong>HSL:</strong> 0, 0%, 13%</p>
  </Card>

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

    <p><strong>HEX:</strong> #F9F9F9</p>
    <p><strong>RGB:</strong> 249, 249, 249</p>
    <p><strong>HSL:</strong> 0, 0%, 98%</p>
  </Card>
</CardGroup>

## Cores Secundárias

As cores secundárias complementam as cores principais e são utilizadas para criar hierarquia visual, separar seções e adicionar nuances à interface.

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

    <p><strong>HEX:</strong> #A6A6A6</p>
    <p><strong>RGB:</strong> 166, 166, 166</p>
  </Card>

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

    <p><strong>HEX:</strong> #E5E5E5</p>
    <p><strong>RGB:</strong> 229, 229, 229</p>
  </Card>

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

    <p><strong>HEX:</strong> #8CB800</p>
    <p><strong>RGB:</strong> 140, 184, 0</p>
  </Card>

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

    <p><strong>HEX:</strong> #D6FF7E</p>
    <p><strong>RGB:</strong> 214, 255, 126</p>
  </Card>
</CardGroup>

## Cores de Estado

As cores de estado são utilizadas para comunicar feedback, status e alertas ao usuário.

<CardGroup cols={4}>
  <Card title="Sucesso" icon="palette">
    <div style={{ backgroundColor: '#34C759', width: '100%', height: '80px', borderRadius: '8px' }} />

    <p><strong>HEX:</strong> #34C759</p>
    <p><strong>RGB:</strong> 52, 199, 89</p>
  </Card>

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

    <p><strong>HEX:</strong> #FF3B30</p>
    <p><strong>RGB:</strong> 255, 59, 48</p>
  </Card>

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

    <p><strong>HEX:</strong> #FFCC00</p>
    <p><strong>RGB:</strong> 255, 204, 0</p>
  </Card>

  <Card title="Informação" icon="palette">
    <div style={{ backgroundColor: '#007AFF', width: '100%', height: '80px', borderRadius: '8px' }} />

    <p><strong>HEX:</strong> #007AFF</p>
    <p><strong>RGB:</strong> 0, 122, 255</p>
  </Card>
</CardGroup>

## Gradientes

Os gradientes são utilizados para adicionar profundidade e dinamismo a elementos específicos da interface.

<CardGroup cols={2}>
  <Card title="Gradiente Primário" icon="palette">
    <div style={{ background: 'linear-gradient(135deg, #B4ED00 0%, #8CB800 100%)', width: '100%', height: '100px', borderRadius: '8px' }} />

    <p><strong>Início:</strong> #B4ED00</p>
    <p><strong>Fim:</strong> #8CB800</p>
    <p><strong>Ângulo:</strong> 135°</p>
  </Card>

  <Card title="Gradiente Escuro" icon="palette">
    <div style={{ background: 'linear-gradient(135deg, #202020 0%, #000000 100%)', width: '100%', height: '100px', borderRadius: '8px' }} />

    <p><strong>Início:</strong> #202020</p>
    <p><strong>Fim:</strong> #000000</p>
    <p><strong>Ângulo:</strong> 135°</p>
  </Card>
</CardGroup>

## Aplicação de Cores

### Elementos de Interface

A aplicação consistente das cores nos elementos de interface é fundamental para criar uma experiência coesa e intuitiva.

| Elemento                                  | Cor                        |
| ----------------------------------------- | -------------------------- |
| **Fundo Principal**                       | #202020 (Cinza Escuro)     |
| **Fundo Secundário**                      | #F9F9F9 (Branco Off-white) |
| **Texto Principal (sobre fundo escuro)**  | #F9F9F9 (Branco Off-white) |
| **Texto Principal (sobre fundo claro)**   | #202020 (Cinza Escuro)     |
| **Texto Secundário (sobre fundo escuro)** | #A6A6A6 (Cinza Médio)      |
| **Texto Secundário (sobre fundo claro)**  | #666666 (Cinza)            |
| **Botão Primário (fundo)**                | #B4ED00 (Verde Primário)   |
| **Botão Primário (texto)**                | #202020 (Cinza Escuro)     |
| **Botão Secundário (fundo)**              | #202020 (Cinza Escuro)     |
| **Botão Secundário (texto)**              | #F9F9F9 (Branco Off-white) |
| **Botão Outline (borda)**                 | #B4ED00 (Verde Primário)   |
| **Botão Outline (texto)**                 | #202020 (Cinza Escuro)     |
| **Links**                                 | #B4ED00 (Verde Primário)   |
| **Bordas e Separadores**                  | #E5E5E5 (Cinza Claro)      |
| **Ícones Ativos**                         | #B4ED00 (Verde Primário)   |
| **Ícones Inativos**                       | #A6A6A6 (Cinza Médio)      |

### Aplicação em Componentes

<Frame>
  <div style={{ backgroundColor: '#202020', padding: '24px', borderRadius: '16px' }}>
    <h3 style={{ color: '#F9F9F9', fontFamily: 'Hanken Grotesk, sans-serif', margin: '0 0 16px 0' }}>Aplicação em Fundo Escuro</h3>

    <p style={{ color: '#F9F9F9', fontFamily: 'Hanken Grotesk, sans-serif', margin: '0 0 16px 0' }}>
      Texto principal em branco off-white para máxima legibilidade.
    </p>

    <p style={{ color: '#A6A6A6', fontFamily: 'Hanken Grotesk, sans-serif', margin: '0 0 24px 0' }}>
      Texto secundário em cinza médio para informações complementares.
    </p>

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

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

<Frame>
  <div style={{ backgroundColor: '#F9F9F9', padding: '24px', borderRadius: '16px', marginTop: '24px' }}>
    <h3 style={{ color: '#202020', fontFamily: 'Hanken Grotesk, sans-serif', margin: '0 0 16px 0' }}>Aplicação em Fundo Claro</h3>

    <p style={{ color: '#202020', fontFamily: 'Hanken Grotesk, sans-serif', margin: '0 0 16px 0' }}>
      Texto principal em cinza escuro para máxima legibilidade.
    </p>

    <p style={{ color: '#666666', fontFamily: 'Hanken Grotesk, sans-serif', margin: '0 0 24px 0' }}>
      Texto secundário em cinza para informações complementares.
    </p>

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

## Acessibilidade

A paleta de cores do FitLocus foi projetada considerando os princípios de acessibilidade, garantindo contraste adequado para usuários com diferentes necessidades visuais.

### Contraste

| Combinação                                                | Contraste | WCAG 2.1 AA | WCAG 2.1 AAA |
| --------------------------------------------------------- | --------- | ----------- | ------------ |
| Verde Primário (#B4ED00) sobre Cinza Escuro (#202020)     | 8.59:1    | ✅ Passa     | ✅ Passa      |
| Branco Off-white (#F9F9F9) sobre Cinza Escuro (#202020)   | 16.01:1   | ✅ Passa     | ✅ Passa      |
| Cinza Médio (#A6A6A6) sobre Cinza Escuro (#202020)        | 4.84:1    | ✅ Passa     | ❌ Falha      |
| Cinza Escuro (#202020) sobre Branco Off-white (#F9F9F9)   | 16.01:1   | ✅ Passa     | ✅ Passa      |
| Verde Primário (#B4ED00) sobre Branco Off-white (#F9F9F9) | 1.86:1    | ❌ Falha     | ❌ Falha      |

### Recomendações para Acessibilidade

* Evite usar Verde Primário (#B4ED00) como cor de texto sobre fundos claros
* Use sempre o Cinza Escuro (#202020) para texto sobre o Verde Primário (#B4ED00)
* Para textos pequenos, prefira o Branco Off-white (#F9F9F9) sobre o Cinza Escuro (#202020)
* Considere o modo de alto contraste para usuários com deficiência visual

## Implementação

### Web (CSS)

```css theme={null}
/* Variáveis CSS */
:root {
  /* Cores Principais */
  --color-primary: #B4ED00;
  --color-dark: #202020;
  --color-light: #F9F9F9;
  
  /* Cores Secundárias */
  --color-gray-medium: #A6A6A6;
  --color-gray-light: #E5E5E5;
  --color-primary-dark: #8CB800;
  --color-primary-light: #D6FF7E;
  
  /* Cores de Estado */
  --color-success: #34C759;
  --color-error: #FF3B30;
  --color-warning: #FFCC00;
  --color-info: #007AFF;
  
  /* Gradientes */
  --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  --gradient-dark: linear-gradient(135deg, var(--color-dark) 0%, #000000 100%);
}

/* Exemplos de uso */
.bg-primary { background-color: var(--color-primary); }
.bg-dark { background-color: var(--color-dark); }
.bg-light { background-color: var(--color-light); }

.text-primary { color: var(--color-primary); }
.text-dark { color: var(--color-dark); }
.text-light { color: var(--color-light); }

.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-dark);
}

.btn-secondary {
  background-color: var(--color-dark);
  color: var(--color-light);
}

.btn-outline {
  background-color: transparent;
  border: 2px solid var(--color-primary);
  color: var(--color-dark);
}
```

### Mobile (React Native)

```tsx theme={null}
// colors.ts
export const colors = {
  // Cores Principais
  primary: '#B4ED00',
  dark: '#202020',
  light: '#F9F9F9',
  
  // Cores Secundárias
  grayMedium: '#A6A6A6',
  grayLight: '#E5E5E5',
  primaryDark: '#8CB800',
  primaryLight: '#D6FF7E',
  
  // Cores de Estado
  success: '#34C759',
  error: '#FF3B30',
  warning: '#FFCC00',
  info: '#007AFF',
  
  // Gradientes
  gradients: {
    primary: ['#B4ED00', '#8CB800'],
    dark: ['#202020', '#000000'],
  },
  
  // Texto
  textDark: '#202020',
  textLight: '#F9F9F9',
  textSecondaryDark: '#666666',
  textSecondaryLight: '#A6A6A6',
};

// Exemplo de uso com styled-components
import styled from 'styled-components/native';
import { colors } from './colors';

export const PrimaryButton = styled.TouchableOpacity`
  background-color: ${colors.primary};
  padding: 12px 24px;
  border-radius: 8px;
`;

export const PrimaryButtonText = styled.Text`
  color: ${colors.dark};
  font-weight: 500;
  font-size: 16px;
`;
```

## Boas Práticas

### Uso Correto

* Use o Verde Primário (#B4ED00) para elementos de destaque e ações principais
* Use o Cinza Escuro (#202020) como fundo principal para interfaces escuras
* Use o Branco Off-white (#F9F9F9) como fundo principal para interfaces claras
* Mantenha consistência no uso das cores em toda a plataforma
* Considere o contraste adequado para garantir acessibilidade

### Uso Incorreto

* Evite usar cores fora da paleta oficial
* Não use o Verde Primário (#B4ED00) como cor de texto sobre fundos claros
* Evite combinações de cores com baixo contraste
* Não use gradientes em elementos pequenos ou textos
* Evite usar muitas cores diferentes em uma mesma tela

## Evolução da Paleta

A paleta de cores do FitLocus foi projetada para ser flexível e adaptável, permitindo evoluções futuras sem perder a identidade visual da marca. Quaisquer adições ou modificações na paleta devem ser cuidadosamente consideradas e documentadas nesta seção.