# ÁTRIA TECH · Identidade Visual v1.0

> Precisão · Inteligência · Luz  
> Junho de 2026

## Conceito

Átria é a estrela mais brilhante do Triângulo Austral, usada por séculos na navegação do hemisfério sul. A marca herda essa promessa: **tecnologia que orienta**.

Duas frases governam o sistema visual:

- **A escuridão é disciplina.** O fundo profundo organiza a hierarquia.
- **A luz é informação.** O brilho marca o que importa, e somente o que importa.

## Paleta

Proporção recomendada: **80% Abissal · 15% Gelo · 5% acentos de luz**.

### Abissal

| Token | Hex | Uso |
|---|---|---|
| `--atria-abissal-950` | `#02050B` | Céu absoluto, vinhetas |
| `--atria-abissal-900` | `#050A13` | Fundo principal |
| `--atria-abissal-800` | `#0A1322` | Superfícies e cartões |
| `--atria-abissal-700` | `#101C30` | Elevação e hover |
| `--atria-abissal-600` | `#16263F` | Divisores visíveis |

### Gelo

| Token | Hex | Uso |
|---|---|---|
| `--atria-gelo-50` | `#F5FAFF` | Picos de luz |
| `--atria-gelo-100` | `#EAF3FF` | Texto e botão primário |
| `--atria-gelo-200` | `#D8E9FF` | Ícones ativos |
| `--atria-gelo-300` | `#C2DCFF` | Links e foco |
| `--atria-gelo-400` | `#A6CCFB` | Brilhos |
| `--atria-gelo-500` | `#8FBCF5` | Halos |

### Névoa

`#8FA3BF` texto secundário · `#6B7E9C` apoio · `#4C5D7A` ícones inativos · `#33415C` hairlines fortes.

### Regras de cor

- Não usar branco puro `#FFFFFF`; o branco da Átria é `#EAF3FF`.
- Não usar preto puro `#000000`; o preto principal é `#050A13`.
- Bordas padrão: `1px rgba(234, 243, 255, .08)`.
- Sombras devem se comportar como brilhos frios.

## Tipografia

| Papel | Família | Pesos |
|---|---|---|
| Display e marca | Space Grotesk | 300–600 |
| Texto e interface | Inter | 400–600 |
| Dados e código | JetBrains Mono | 400–500 |

Tracking da marca: `0.42em`. Overlines: `0.30em`. Texto corrido nunca recebe tracking adicional.

## Logo

Use somente os arquivos oficiais:

- [`logo/atria-logo.png`](logo/atria-logo.png): composição vertical 9:16.
- [`logo/atria-lockup.png`](logo/atria-lockup.png): estrela e assinatura.
- [`logo/atria-simbolo.png`](logo/atria-simbolo.png): avatar, favicon e ícone.
- [`logo/atria-referencia-original.png`](logo/atria-referencia-original.png): arte original com tagline.

Regras:

- Símbolo com no mínimo 24 px.
- Lockup com no mínimo 140 px de largura.
- Área de proteção de aproximadamente 3× o diâmetro do núcleo.
- Não recolorir, rotacionar, esticar, contornar ou redesenhar.
- Sobre fotos, aplicar o véu escuro antes da marca.

## Grafismos

1. **Céu estelar:** baixa densidade, opacidade entre 0.15 e 0.6.
2. **Órbitas:** círculos concêntricos de 1 px e baixa opacidade.
3. **Fio de luz:** hairline com um ponto luminoso indicando foco.
4. **Véu:** gradiente escuro sobre imagens fotográficas.

Movimentos devem ser lentos e deliberados, respeitando `prefers-reduced-motion`.

## Acessibilidade

| Par | Razão | WCAG |
|---|---:|---|
| Gelo 100 sobre Abissal 900 | 17,7:1 | AAA |
| Abissal 900 sobre Gelo 100 | 17,7:1 | AAA |
| Gelo 300 sobre Abissal 800 | 13,3:1 | AAA |
| Névoa 400 sobre Abissal 900 | 7,7:1 | AAA |

Todo elemento interativo deve ter foco visível com `outline: 2px solid #C2DCFF` e `outline-offset: 3px`.

## Voz

**Preciso · Calmo · Confiante · Claro.**

Use frases curtas, voz ativa, números verificáveis e benefícios concretos. Evite superlativos, exclamações e jargão vazio.

## Arquivos web

| Arquivo | Função |
|---|---|
| [`index.html`](index.html) | Página principal pronta para publicação |
| [`site.css`](site.css) | Layout e componentes |
| [`site.js`](site.js) | Navegação, animações e cópia de cores |
| [`tokens.css`](tokens.css) | Tokens oficiais reutilizáveis |
| [`README-PUBLICACAO.md`](README-PUBLICACAO.md) | Instruções de publicação |