# TOI Shortcut — Direcao Visual Completa
> **Projeto:** TOI Shortcut
> **Dominio:** `https://toi.shinp.ai`
> **Diretora Visual:** Albiere
> **Data:** 2026-04-03
> **Versao:** 1.0
---
## 1. Analise do Site de Referencia (trendsoninfluence.com)
### Essencia Visual Extraida
O site da Trends on Influence apresenta uma linguagem visual **dark-first premium** com forte personalidade. Os pontos centrais identificados:
- **Paleta:** Fundo escuro dominante (#1a1a1a / #242426) com acentos vibrantes em coral (#e76066) e toques de amarelo (#f1bf19) e rosa (#f936ae)
- **Tipografia:** Sans-serif proprietaria (Canva Sans), pesos bold e light, tamanhos generosos para headlines, hierarquia clara
- **Atmosfera:** Tecnologica, confiante, sofisticada. Minimalismo com respiro. Premium sem ser fria
- **Linguagem de interface:** Componentes com bordas suaves (8-16px radius), sombras sutis com camadas de elevacao, espaamento generoso (base 8px)
- **Sofisticacao:** Alta. Nenhum elemento generico, cada componente parece intencional
- **Dark mode:** Camadas de cinza escuro (nao preto puro), texto off-white para reduzir contraste agressivo
- **Acentos:** Coral/salmon como cor de acao primaria, usado com moderacao cirurgica
- **Espacamento:** Generoso, arejado, macro-espacamento entre secoes (80-120px), micro-espacamento consistente em multiplos de 8
---
## 2. Conceito Visual — TOI Shortcut
### 2.1 Conceito
**"Precision Interface"** — Uma interface que transmite velocidade, controle e sofisticacao tecnica. Cada pixel e intencional. O sistema visual comunica que este nao e mais um encurtador generico, mas uma ferramenta proprietaria de alta performance.
### 2.2 Por que funciona para um encurtador de URLs
- **Velocidade visual:** Linhas limpas, espacos generosos e tipografia monospacada para slugs transmitem a ideia de performance sub-milissegundo do Redis
- **Controle:** A paleta escura com acentos controlados reflete o dominio total sobre dados e branding
- **Confianca:** O acabamento premium justifica o uso de um dominio proprietario (`toi.shinp.ai`) ao inves de servicos genericos
- **Foco:** Interface dark-first reduz distracao e coloca o conteudo (links, analytics) como protagonista
### 2.3 Mood
Imagine um painel de controle de missao espacial redesenhado por uma agencia de design suica. Tudo esta no lugar certo, tudo respira, e cada interacao e precisa e satisfatoria.
---
## 3. Paleta de Cores
### 3.1 Cores Primarias
| Funcao | Cor | HEX | Uso |
|---|---|---|---|
| Primary | Coral TOI | `#E4502A` | CTAs primarios, links ativos, acoes principais |
| Primary Hover | Coral Intenso | `#CC3F1F` | Hover de botoes primarios |
| Primary Subtle | Coral Suave | `#E4502A1A` | Backgrounds sutis, badges, highlights (10% opacity) |
### 3.2 Cores Secundarias
| Funcao | Cor | HEX | Uso |
|---|---|---|---|
| Secondary | Azul Neutro | `#6E7B8B` | Texto secundario, icones inativos |
| Secondary Light | Azul Claro | `#8A9BB0` | Placeholders, texto auxiliar |
| Tertiary | Branco Quente | `#FBF7F2` | Texto principal (off-white, nao branco puro) |
### 3.3 Backgrounds (Dark Mode First)
| Funcao | HEX | Uso |
|---|---|---|
| Background Base | `#0F1114` | Fundo principal da aplicacao |
| Background Card | `#161920` | Cards, paineis, containers |
| Background Elevated | `#1C2028` | Modais, dropdowns, tooltips, sidebar |
| Background Hover | `#232830` | Hover em rows de tabela, itens de lista |
| Background Input | `#12151B` | Inputs, textareas, selects |
### 3.4 Cores de Texto
| Funcao | HEX | Uso |
|---|---|---|
| Text Primary | `#F0EDE8` | Titulos, texto principal |
| Text Secondary | `#8A9BB0` | Subtitulos, descricoes, labels |
| Text Muted | `#515B6A` | Timestamps, metadata, hints |
| Text Inverse | `#0F1114` | Texto sobre botao primario |
| Text Link | `#E4502A` | Links inline |
### 3.5 Cores Semanticas
| Funcao | HEX | Background (10%) | Uso |
|---|---|---|---|
| Success | `#2ECC71` | `#2ECC711A` | Link ativo, operacao concluida |
| Warning | `#F39C12` | `#F39C121A` | Atencao, validacao |
| Error | `#E74C3C` | `#E74C3C1A` | Erro, link inativo, exclusao |
| Info | `#3498DB` | `#3498DB1A` | Informacao, dicas |
### 3.6 Accent/Highlight
| Funcao | HEX | Uso |
|---|---|---|
| Accent | `#E4502A` | Mesmo que primary — cor de marca |
| Accent Glow | `#E4502A33` | Box-shadow glow em focus states (20% opacity) |
### 3.7 Bordas e Divisores
| Funcao | HEX | Uso |
|---|---|---|
| Border Default | `#1E2330` | Bordas de cards, inputs em repouso |
| Border Subtle | `#171B24` | Divisores de tabela, separadores |
| Border Focus | `#E4502A` | Input em foco, card selecionado |
| Border Hover | `#2A3040` | Borda em hover |
---
## 4. Tipografia
### 4.1 Fontes
| Funcao | Fonte | Google Fonts | Fallback |
|---|---|---|---|
| Headings | **Inter** | `Inter:wght@500;600;700` | -apple-system, BlinkMacSystemFont, sans-serif |
| Body/UI | **Inter** | `Inter:wght@400;500;600` | -apple-system, BlinkMacSystemFont, sans-serif |
| Monospace (slugs/URLs) | **JetBrains Mono** | `JetBrains+Mono:wght@400;500` | 'SF Mono', 'Fira Code', monospace |
> **Justificativa:** Inter e a fonte sans-serif mais refinada e otimizada para interfaces digitais. Sua versao variavel oferece controle preciso de peso. JetBrains Mono traz personalidade tecnica para URLs e slugs sem parecer generico como Courier.
### 4.2 Escala Tipografica
| Elemento | Tamanho | Peso | Line-Height | Letter-Spacing |
|---|---|---|---|---|
| H1 (titulo de pagina) | `32px` | 700 | 1.2 | `-0.02em` |
| H2 (titulo de secao) | `24px` | 600 | 1.3 | `-0.01em` |
| H3 (titulo de card) | `20px` | 600 | 1.3 | `-0.01em` |
| H4 (subtitulo) | `16px` | 600 | 1.4 | `0` |
| Body | `14px` | 400 | 1.6 | `0` |
| Body Medium | `14px` | 500 | 1.6 | `0` |
| Small | `12px` | 400 | 1.5 | `0.01em` |
| Caption | `11px` | 500 | 1.4 | `0.03em` |
| Mono (slugs) | `13px` | 400 | 1.5 | `0.02em` |
| Mono Large (URL display) | `15px` | 500 | 1.4 | `0.01em` |
### 4.3 Importacao Google Fonts
```html
```
---
## 5. Estilo de Componentes
### 5.1 Botoes
#### Primary Button
```
Background: #E4502A
Color: #FFFFFF
Font: Inter 14px / weight 600
Padding: 10px 20px
Border-radius: 8px
Border: none
Transition: all 0.2s ease
Hover: background #CC3F1F, transform translateY(-1px), box-shadow 0 4px 12px #E4502A40
Active: transform translateY(0), background #B8361A
Disabled: opacity 0.4, cursor not-allowed
```
#### Secondary Button
```
Background: transparent
Color: #F0EDE8
Font: Inter 14px / weight 500
Padding: 10px 20px
Border-radius: 8px
Border: 1px solid #1E2330
Transition: all 0.2s ease
Hover: background #1C2028, border-color #2A3040
Active: background #232830
```
#### Ghost Button
```
Background: transparent
Color: #8A9BB0
Font: Inter 14px / weight 500
Padding: 10px 20px
Border-radius: 8px
Border: none
Transition: all 0.15s ease
Hover: background #161920, color #F0EDE8
Active: background #1C2028
```
#### Danger Button
```
Background: #E74C3C1A
Color: #E74C3C
Font: Inter 14px / weight 600
Padding: 10px 20px
Border-radius: 8px
Border: 1px solid #E74C3C33
Transition: all 0.2s ease
Hover: background #E74C3C, color #FFFFFF
Active: background #C0392B
```
### 5.2 Cards
```
Background: #161920
Border: 1px solid #1E2330
Border-radius: 12px
Padding: 24px
Box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04)
Transition: border-color 0.2s ease, box-shadow 0.2s ease
Hover (quando interativo): border-color #2A3040, box-shadow 0 4px 16px rgba(0, 0, 0, 0.2)
```
#### Stats Card (variante)
```
Mesmo que card base, mas com:
Padding: 20px 24px
Borda superior de 2px com cor semantica (ex: 2px solid #E4502A para metrica principal)
```
### 5.3 Inputs
```
Background: #12151B
Color: #F0EDE8
Font: Inter 14px / weight 400
Padding: 10px 14px
Border-radius: 8px
Border: 1px solid #1E2330
Transition: all 0.2s ease
Placeholder-color: #515B6A
Focus:
Border-color: #E4502A
Box-shadow: 0 0 0 3px #E4502A1A
Outline: none
Error:
Border-color: #E74C3C
Box-shadow: 0 0 0 3px #E74C3C1A
Disabled:
Opacity: 0.5
Cursor: not-allowed
Background: #0F1114
```
### 5.4 Tabelas (Lista de Links)
```
Background: transparent
Border-collapse: separate
Border-spacing: 0
Header (th):
Color: #515B6A
Font: Inter 11px / weight 600 / uppercase
Letter-spacing: 0.06em
Padding: 12px 16px
Border-bottom: 1px solid #1E2330
Text-align: left
Row (tr):
Transition: background 0.15s ease
Row Hover:
Background: #161920
Cell (td):
Color: #F0EDE8
Font: Inter 14px / weight 400
Padding: 14px 16px
Border-bottom: 1px solid #171B24
Vertical-align: middle
Slug Cell:
Font: JetBrains Mono 13px / weight 500
Color: #E4502A
URL Cell:
Font: Inter 13px / weight 400
Color: #8A9BB0
Max-width: 300px
Text-overflow: ellipsis
Overflow: hidden
White-space: nowrap
```
### 5.5 Badges / Tags
#### Status Ativo
```
Background: #2ECC711A
Color: #2ECC71
Font: Inter 11px / weight 600 / uppercase
Letter-spacing: 0.04em
Padding: 4px 10px
Border-radius: 9999px
Display: inline-flex
Align-items: center
Gap: 6px
(Ponto verde 6x6px border-radius 50% antes do texto)
```
#### Status Inativo
```
Background: #E74C3C1A
Color: #E74C3C
(Mesma estrutura, ponto vermelho)
```
### 5.6 Sidebar / Navegacao
```
Width: 240px
Background: #0F1114
Border-right: 1px solid #1E2330
Padding: 24px 0
Position: fixed
Height: 100vh
Logo area:
Padding: 0 20px 24px 20px
Border-bottom: 1px solid #1E2330
Margin-bottom: 8px
Nav Item:
Padding: 10px 20px
Font: Inter 14px / weight 500
Color: #8A9BB0
Transition: all 0.15s ease
Border-left: 3px solid transparent
Cursor: pointer
Nav Item Hover:
Color: #F0EDE8
Background: #161920
Nav Item Active:
Color: #E4502A
Background: #E4502A0A
Border-left-color: #E4502A
Font-weight: 600
Nav Section Label:
Font: Inter 11px / weight 600 / uppercase
Color: #515B6A
Letter-spacing: 0.06em
Padding: 20px 20px 8px 20px
```
### 5.7 Modais
```
Overlay: background rgba(0, 0, 0, 0.6), backdrop-filter blur(4px)
Container:
Background: #161920
Border: 1px solid #1E2330
Border-radius: 16px
Padding: 32px
Max-width: 520px
Width: 90vw
Box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4)
Animation: fadeIn 0.2s ease, slideUp 0.25s ease
Header:
Font: Inter 20px / weight 600
Color: #F0EDE8
Margin-bottom: 8px
Description:
Font: Inter 14px / weight 400
Color: #8A9BB0
Margin-bottom: 24px
Footer:
Display: flex
Justify-content: flex-end
Gap: 12px
Margin-top: 24px
Padding-top: 24px
Border-top: 1px solid #1E2330
```
---
## 6. Tela de Login
### 6.1 Layout
**Split screen** — Lado esquerdo (55%) com visual de marca, lado direito (45%) com formulario.
#### Lado Esquerdo
```
Background: #0F1114
Display: flex
Flex-direction: column
Justify-content: center
Align-items: center
Padding: 60px
Elementos:
- Logo TOI grande (logotipo ou wordmark) centralizado
- Abaixo: frase "Links curtos. Controle total." em Inter 20px / weight 400 / color #515B6A
- Background decorativo: gradiente sutil radial de #E4502A08 no centro, criando um "glow" quase imperceptivel
- Pattern de grid pontilhado sutil (dots de 1px #1E2330 em grid de 32px) como textura de fundo
"Powered by TOI" no canto inferior esquerdo:
Font: Inter 11px / weight 500
Color: #515B6A
Letter-spacing: 0.04em
```
#### Lado Direito
```
Background: #161920
Display: flex
Flex-direction: column
Justify-content: center
Padding: 60px 48px
Titulo: "Entrar" — Inter 28px / weight 700 / color #F0EDE8
Subtitulo: "Acesse o painel de gerenciamento" — Inter 14px / weight 400 / color #8A9BB0 / margin-top 8px
Formulario (margin-top 40px):
Label: Inter 12px / weight 600 / color #8A9BB0 / uppercase / letter-spacing 0.04em / margin-bottom 8px
Input Email: conforme spec de inputs acima
Input Senha: conforme spec de inputs acima, com toggle de visibilidade
Gap entre campos: 20px
Botao "Entrar": Primary button, width 100%, padding 12px 20px, margin-top 32px
```
#### Responsivo (mobile)
```
Em telas < 768px:
Layout empilhado — lado esquerdo some ou vira header compacto (80px) com logo
Formulario ocupa 100% com padding 24px
```
### 6.2 Mood
Sombrio e acolhedor. O glow sutil do coral no lado esquerdo sugere atividade e energia sem ser agressivo. O formulario e limpo e direto — sem distracao, sem ilustracao cartunesca. Premium e confiante.
---
## 7. Dashboard
### 7.1 Layout
```
Sidebar fixa (240px) a esquerda + Area de conteudo scrollavel a direita
Content area: padding 32px 40px
Max-width do conteudo: 1200px
```
### 7.2 Header da Pagina
```
Display: flex
Justify-content: space-between
Align-items: center
Margin-bottom: 32px
Titulo: "Dashboard" — H1 (32px / 700)
Botao: "Novo Link" — Primary Button com icone "+" a esquerda
```
### 7.3 Stats Cards
Grid de 4 cards em linha:
```
Display: grid
Grid-template-columns: repeat(4, 1fr)
Gap: 16px
Margin-bottom: 32px
```
Cada card:
```
Background: #161920
Border: 1px solid #1E2330
Border-radius: 12px
Padding: 20px 24px
Border-top: 2px solid [cor semantica]
Label: Inter 12px / weight 500 / color #515B6A / uppercase / letter-spacing 0.04em
Valor: Inter 28px / weight 700 / color #F0EDE8 / margin-top 8px
Variacao: Inter 12px / weight 500 / color #2ECC71 (positivo) ou #E74C3C (negativo) / margin-top 4px
```
Cards sugeridos:
1. **Total de Links** — border-top #E4502A
2. **Cliques Hoje** — border-top #3498DB
3. **Links Ativos** — border-top #2ECC71
4. **Cliques (7 dias)** — border-top #F39C12
### 7.4 Graficos
```
Container: Card padrao (background #161920, border, radius 12px)
Padding: 24px
Margin-bottom: 32px
Titulo do grafico: Inter 16px / weight 600 / color #F0EDE8
Subtitulo: Inter 13px / weight 400 / color #515B6A
Grafico de linha (cliques por dia):
Line color: #E4502A
Line width: 2px
Fill abaixo: gradiente vertical de #E4502A20 para transparent
Grid lines: #1E2330
Axis labels: Inter 11px / weight 400 / color #515B6A
Tooltip: background #232830, border 1px solid #2A3040, border-radius 8px, padding 8px 12px
Tooltip text: Inter 12px / weight 500 / color #F0EDE8
Seletor de periodo (7d / 30d / 90d):
Display: inline-flex
Background: #12151B
Border-radius: 8px
Padding: 2px
Cada opcao:
Padding: 6px 14px
Font: Inter 12px / weight 500
Color: #515B6A
Border-radius: 6px
Cursor: pointer
Opcao ativa:
Background: #1C2028
Color: #F0EDE8
```
### 7.5 Hierarquia Visual
```
1. Stats cards — primeira coisa que o olho captura (numeros grandes, cores nas bordas)
2. Grafico de cliques — area visual dominante
3. Links recentes — tabela compacta abaixo
4. Sidebar — sempre presente mas nao compete pela atencao
```
---
## 8. Pagina de Lista de Links
### 8.1 Layout
Tabela dentro de card container.
### 8.2 Header
```
Display: flex
Justify-content: space-between
Align-items: center
Margin-bottom: 24px
Titulo: "Links" — H1
Botao: "Novo Link" — Primary Button
```
### 8.3 Barra de Filtros / Busca
```
Display: flex
Gap: 12px
Margin-bottom: 20px
Input de busca:
Flex: 1
Max-width: 400px
Placeholder: "Buscar por slug ou titulo..."
Icone de lupa (16px, #515B6A) dentro do input a esquerda
Padding-left: 40px (para acomodar icone)
Filtro de status:
Select/Dropdown com opcoes: Todos / Ativos / Inativos
Estilo: mesmo que input, com seta customizada
Width: 160px
Ordenacao:
Select com opcoes: Mais recentes / Mais cliques / Alfabetico
Width: 180px
```
### 8.4 Tabela de Links
Colunas:
```
| Slug | Titulo | Destino | Cliques | Status | Criado em | Acoes |
| mono, coral | body, primary | body, truncated | body | badge | small,muted| botoes |
```
```
Slug:
Font: JetBrains Mono 13px / weight 500
Color: #E4502A
Cursor: pointer (link para detalhe)
Prefixo "toi.shinp.ai/" em #515B6A antes do slug
Titulo:
Font: Inter 14px / weight 500
Color: #F0EDE8
Destino:
Font: Inter 13px / weight 400
Color: #8A9BB0
Max-width: 250px
Truncado com ellipsis
Title attribute com URL completa
Cliques:
Font: Inter 14px / weight 600
Color: #F0EDE8
Font-variant-numeric: tabular-nums (alinhamento vertical)
Status:
Badge conforme spec (ativo verde / inativo vermelho)
Criado em:
Font: Inter 12px / weight 400
Color: #515B6A
Formato: "03 abr 2026"
Acoes:
Display: flex
Gap: 4px
Botoes icon-only (ghost style):
- Copiar link (icone clipboard)
- Editar (icone pencil)
- Toggle ativo/inativo (icone toggle)
- Deletar (icone trash, cor danger)
Tamanho: 32x32px
Border-radius: 6px
Hover: background #232830
```
### 8.5 Paginacao
```
Display: flex
Justify-content: space-between
Align-items: center
Margin-top: 20px
Padding-top: 20px
Border-top: 1px solid #1E2330
Info: "Mostrando 1-20 de 156 links" — Inter 13px / weight 400 / color #515B6A
Botoes de pagina:
Display: flex
Gap: 4px
Cada botao:
Min-width: 36px
Height: 36px
Border-radius: 8px
Font: Inter 13px / weight 500
Color: #8A9BB0
Background: transparent
Border: 1px solid #1E2330
Cursor: pointer
Pagina ativa:
Background: #E4502A
Color: #FFFFFF
Border-color: #E4502A
Hover:
Background: #1C2028
Border-color: #2A3040
Anterior/Proximo:
Icones de chevron (< >)
Disabled: opacity 0.3
```
---
## 9. Detalhe do Link / Analytics
### 9.1 Header
```
Breadcrumb: "Links / detalhe-do-link" — Inter 13px / weight 400 / color #515B6A
Link "Links" em #E4502A
Titulo: slug do link em JetBrains Mono 24px / weight 600 / color #E4502A
Subtitulo: URL de destino em Inter 14px / weight 400 / color #8A9BB0
Acoes: flex row de botoes (Copiar Link, Editar, Toggle, Deletar)
```
### 9.2 Stats de Cliques
Grid de 3 cards:
```
1. Total de Cliques — numero grande, border-top #E4502A
2. Cliques Hoje — border-top #3498DB
3. Cliques esta Semana — border-top #2ECC71
```
### 9.3 Grafico Principal
```
Card container com grafico de area/linha
Cliques ao longo do tempo
Seletor de periodo: 7d / 30d / 90d / Todos
Estilo do grafico:
Tipo: Area chart com linha
Linha: #E4502A, 2px
Area fill: gradiente #E4502A15 -> transparent
Pontos: circulo 4px #E4502A, borda 2px #161920 (visivel em hover)
Grid: linhas horizontais #1E2330
Labels eixo X: datas — Inter 11px / #515B6A
Labels eixo Y: numeros — Inter 11px / #515B6A
```
### 9.4 Dados Complementares
```
Grid de 2 colunas abaixo do grafico:
Card "Top Referers":
Lista simples:
Referer (Inter 13px / #F0EDE8) + contagem (Inter 13px / weight 600 / #8A9BB0)
Barra de progresso horizontal: height 4px, background #1E2330, fill #E4502A, border-radius 2px
Gap entre itens: 16px
Card "Top Paises":
Mesma estrutura
Emoji de bandeira (flag) antes do nome do pais
Barra de progresso com cor #3498DB
```
### 9.5 Tabela de Eventos Recentes
```
Colunas: Data/Hora | Referer | Pais | User-Agent (resumo)
Font: Inter 12px
Estilo: tabela compacta com padding 10px 16px
Max 50 registros com paginacao
```
### 9.6 Visualizacao de Dados
- Graficos implementados com **Chart.js** ou canvas puro (compativel com stack vanilla JS)
- Sem bibliotecas pesadas — performance e prioridade
- Paleta dos graficos: coral primario (#E4502A), azul (#3498DB), verde (#2ECC71), amarelo (#F39C12) — nessa ordem de prioridade
- Tooltips seguem o padrao visual do sistema (dark, arredondados, compactos)
---
## 10. Micro-interacoes
### 10.1 Hover Effects
```
Botoes: translateY(-1px) + box-shadow suave (0.2s ease)
Rows de tabela: background-color transition (0.15s ease)
Cards interativos: border-color transition + box-shadow (0.2s ease)
Links: color transition (0.15s ease), underline-offset animado
Icones de acao: background-color + color transition (0.15s ease)
```
### 10.2 Loading States
```
Skeleton loader:
Background: #161920
Pseudo-element com gradiente animado:
background: linear-gradient(90deg, transparent, #1E233080, transparent)
animation: shimmer 1.5s infinite
@keyframes shimmer { 0% { transform: translateX(-100%) } 100% { transform: translateX(100%) } }
Border-radius: mesmo do componente que substitui
Spinner (para acoes):
Border: 2px solid #1E2330
Border-top-color: #E4502A
Width/height: 16px
Border-radius: 50%
Animation: spin 0.6s linear infinite
Botao em loading:
Opacity: 0.8
Cursor: wait
Texto substituido por spinner centralizado
```
### 10.3 Copy-to-clipboard Feedback
```
Estado normal: icone clipboard (#8A9BB0)
Ao clicar:
1. Icone troca para checkmark (#2ECC71) instantaneamente
2. Tooltip aparece: "Copiado!" — background #2ECC71, color #0F1114, border-radius 6px, padding 4px 10px
3. Tooltip anima com fadeIn + translateY(-4px) (0.15s ease)
4. Apos 2s: tooltip faz fadeOut, icone volta ao clipboard
```
### 10.4 Toggle de Status (Ativo/Inativo)
```
Container: 40px x 22px, border-radius 11px
Background inativo: #1E2330
Background ativo: #2ECC71
Circulo: 18px, background #F0EDE8, border-radius 50%
Transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1)
Posicao inativo: left 2px
Posicao ativo: left 20px
```
### 10.5 Page Transitions
```
Conteudo principal:
Ao entrar: fadeIn (opacity 0->1) + translateY(8px -> 0)
Duration: 0.3s ease-out
Delay escalonado: cards e elementos entram em sequencia com 50ms de delay entre si
Modais:
Overlay: fadeIn 0.2s
Container: fadeIn 0.2s + translateY(16px -> 0) 0.25s ease-out
Sidebar nav:
Indicador ativo (border-left): transition 0.2s ease
```
### 10.6 Toast / Notificacoes
```
Posicao: bottom-right, 24px do canto
Background: #232830
Border: 1px solid #2A3040
Border-radius: 10px
Padding: 14px 20px
Box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3)
Font: Inter 13px / weight 500 / color #F0EDE8
Barra lateral de cor:
Width: 3px
Border-radius: 3px 0 0 3px
Cor conforme tipo: success #2ECC71, error #E74C3C, warning #F39C12, info #3498DB
Animacao entrada: translateX(120%) -> translateX(0), 0.3s cubic-bezier(0.4, 0, 0.2, 1)
Animacao saida: translateX(0) -> translateX(120%), 0.25s ease-in
Auto-dismiss: 4s
```
---
## 11. CSS Custom Properties (Design Tokens)
```css
:root {
/* ============================================
TOI Shortcut — Design Tokens
Dark-first Premium Visual System
============================================ */
/* --- Cores Primarias --- */
--color-primary: #E4502A;
--color-primary-hover: #CC3F1F;
--color-primary-active: #B8361A;
--color-primary-subtle: rgba(228, 80, 42, 0.10);
--color-primary-glow: rgba(228, 80, 42, 0.20);
/* --- Cores Secundarias --- */
--color-secondary: #6E7B8B;
--color-secondary-light: #8A9BB0;
/* --- Backgrounds --- */
--bg-base: #0F1114;
--bg-card: #161920;
--bg-elevated: #1C2028;
--bg-hover: #232830;
--bg-input: #12151B;
/* --- Texto --- */
--text-primary: #F0EDE8;
--text-secondary: #8A9BB0;
--text-muted: #515B6A;
--text-inverse: #0F1114;
--text-link: #E4502A;
/* --- Semanticas --- */
--color-success: #2ECC71;
--color-success-subtle: rgba(46, 204, 113, 0.10);
--color-warning: #F39C12;
--color-warning-subtle: rgba(243, 156, 18, 0.10);
--color-error: #E74C3C;
--color-error-subtle: rgba(231, 76, 60, 0.10);
--color-info: #3498DB;
--color-info-subtle: rgba(52, 152, 219, 0.10);
/* --- Bordas --- */
--border-default: #1E2330;
--border-subtle: #171B24;
--border-focus: #E4502A;
--border-hover: #2A3040;
/* --- Tipografia --- */
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
--font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
/* --- Tamanhos de Fonte --- */
--text-h1: 32px;
--text-h2: 24px;
--text-h3: 20px;
--text-h4: 16px;
--text-body: 14px;
--text-small: 12px;
--text-caption: 11px;
--text-mono: 13px;
--text-mono-lg: 15px;
/* --- Pesos --- */
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
/* --- Line Heights --- */
--leading-tight: 1.2;
--leading-snug: 1.3;
--leading-normal: 1.4;
--leading-relaxed: 1.6;
/* --- Letter Spacing --- */
--tracking-tight: -0.02em;
--tracking-snug: -0.01em;
--tracking-normal: 0;
--tracking-wide: 0.01em;
--tracking-wider: 0.03em;
--tracking-widest: 0.06em;
/* --- Espacamento --- */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
/* --- Border Radius --- */
--radius-sm: 6px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-full: 9999px;
/* --- Sombras --- */
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.2);
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3);
--shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.4);
--shadow-glow: 0 0 0 3px var(--color-primary-subtle);
--shadow-glow-error: 0 0 0 3px var(--color-error-subtle);
--shadow-button-hover: 0 4px 12px rgba(228, 80, 42, 0.25);
/* --- Transicoes --- */
--transition-fast: 0.15s ease;
--transition-base: 0.2s ease;
--transition-slow: 0.3s ease-out;
--transition-spring: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
/* --- Z-Index --- */
--z-sidebar: 100;
--z-header: 200;
--z-dropdown: 300;
--z-modal-overlay: 400;
--z-modal: 500;
--z-toast: 600;
--z-tooltip: 700;
/* --- Layout --- */
--sidebar-width: 240px;
--content-max-width: 1200px;
--content-padding: 32px 40px;
--header-height: 0px; /* sem header fixo, sidebar-only layout */
/* --- Input --- */
--input-height: 40px;
--input-padding: 10px 14px;
/* --- Botoes --- */
--button-height: 40px;
--button-padding: 10px 20px;
--button-padding-sm: 6px 14px;
--button-padding-lg: 12px 28px;
}
/* ============================================
Animacoes Globais
============================================ */
@keyframes shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideUp {
from { transform: translateY(8px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
@keyframes slideInRight {
from { transform: translateX(120%); }
to { transform: translateX(0); }
}
@keyframes slideOutRight {
from { transform: translateX(0); }
to { transform: translateX(120%); }
}
```
---
## 12. Resumo Executivo do Sistema Visual
| Aspecto | Decisao |
|---|---|
| Modo | Dark-first (sem light mode na v1) |
| Background base | Azul-escuro quase preto (#0F1114), nao preto puro |
| Cor de marca | Coral TOI (#E4502A), extraido da referencia |
| Tipografia UI | Inter (Google Fonts) |
| Tipografia tecnica | JetBrains Mono (Google Fonts) |
| Grid base | 8px |
| Radius padrao | 8px (inputs/botoes), 12px (cards), 16px (modais) |
| Sombras | Minimas, focadas em elevacao estrutural |
| Espacamento | Generoso, arejado, macro-gaps de 32px entre secoes |
| Interacoes | Suaves (0.15-0.3s), com cubic-bezier para toggles |
| Layout | Sidebar fixa 240px + conteudo scrollavel |
| Login | Split screen (marca + formulario) |
| Tabelas | Clean, sem zebra-stripe, hover sutil |
| Graficos | Area chart minimal, paleta controlada |
| Feedback | Toasts bottom-right, copy com checkmark animado |
---
*Este documento e a fonte unica de verdade visual para o TOI Shortcut. Qualquer desvio deve ser discutido com a direcao visual antes da implementacao.*