everhere · Brand Guidelines v1 · Junho 2026
Marca
everhere
Paleta, tipografia, logomarca, componentes UI e tom de voz. O documento que alimenta todos os outros — da Biblioteca aos tokens React Native.
01
Identidade Visual
Logomarca
Wordmark tipográfico com isotipo. Sempre lowercase. Sempre Nunito Bold 700.
Wordmark
Nunito Bold 700, sempre em lowercase, letter-spacing 0.4px. Cor padrão do wordmark: Moss #6B8E7E. O isotipo sempre aparece à esquerda do nome.
everhere
everhere
everhere
| Tamanho | Uso |
|---|---|
| 36px | Destaque, hero |
| 26px | Header, navegação |
| 20px | Sidebar, cards |
| 14px | Rodapé, metadados |
Isotipo
S-curve orgânica com ponto circular. Representa jornada, movimento e presença. Independente do wordmark — pode ser usado sozinho como ícone do app.
Sobre o isotipo
Areia
#F6F2EB com isotipo gradiente — padrão. Gradiente #FF9A4D → #3FA956 com isotipo branco — splash/PWA. Forest #3F4A31 com isotipo gradiente — dark mode.Variações de Fundo
| Variação | Fundo | Uso |
|---|---|---|
| Areia (padrão) | #F6F2EB | App, landing page, documentos, cards |
| Forest (dark) | #3F4A31 | Footer, CTA sections, modo noturno |
| Gradiente (hero) | #FF9A4D → #3FA956 | Splash screen, app icon, hero visual |
| Monocromático | #FFFFFF | Impressão, PDFs, carimbo |
02
Identidade Visual
Paleta de Cores
Seis cores de identidade + gradiente do isotipo + semânticas.
Identidade Visual Principal
Sand
#F6F2EB
Background principal
Ink
#2F2F2F
Texto principal
Moss ★
#6B8E7E
Cor primária de ação
Forest
#3F4A31
Headings, dark variant
Terracota
#E07A5F
Accent quente secundário
Neutral
#A6A6A6
Placeholders, bordas
Gradiente do Isotipo
Orange
#FF9A4D
0% — energia
Gradiente
#FF9A4D → #3FA956
135deg
Green
#3FA956
100% — equilíbrio
linear-gradient(135deg, #FF9A4D, #3FA956)Semânticas
Red
#F25C54
Erro, destrutivo
Green
#3FA956
Sucesso, confirmação
Surface
#FFFFFF
Cards, modais, forms
03
Identidade Visual
Tipografia
Fonte única em toda a UI — Nunito, pesos 400 a 800.
Fonte única
A everhere usa Nunito em toda a UI. Pesos utilizados: Regular 400, Medium 500, SemiBold 600, Bold 700, ExtraBold 800. Uma fonte única aplicada com rigor cria mais coerência do que múltiplas famílias.
Escala Tipográfica
| Role | Especificação | Exemplo |
|---|---|---|
| Display / Tagline | 800 · 48px · italic · Forest | Life, felt. |
| H1 Hero | 800 · 36px · Forest | Never do it alone again. |
| H2 / Seção | 700 · 24px · Forest | Find people to live it with. |
| H3 / Card title | 700 · 18px · Moss | Corrida ao nascer do sol |
| Body | 400 · 16px · Ink · lh 1.7 | Texto corrido de conteúdo |
| UI Label | 700 · 12px · Moss · uppercase | ATIVIDADES PRÓXIMAS |
| Caption | 500 · 12px · Neutral | Disponível gratuitamente |
| Wordmark | 700 · 26px · Moss · ls 0.4px | everhere |
04
UI
Componentes
Botões, chips e badges — os blocos de interação da UI everhere.
Botões
| Variante | Estilo | Uso |
|---|---|---|
| Primary | background Moss, texto branco, br 999px, padding 12px 28px | Ação principal |
| Outline | border 1.5px Moss, texto Moss, br 999px | Ação secundária |
| Text | sem fundo, sem borda, texto Forest | Ação terciária / skip |
Chips — FilterChip
Regra
Ativo: background Moss
#6B8E7E, texto branco, br 999px. Inativo: border 1.5px #D8D8D8, texto Ink, fundo transparente.Badges
✓ Verificado
🌿 Outdoor
✦ Novo
3 vagas
Grátis
| Tipo | Background | Texto |
|---|---|---|
| Verificado | rgba(107,142,126,0.12) | Forest |
| Categoria | rgba(63,74,49,0.1) | Forest |
| Novo | rgba(255,154,77,0.15) | #8C4400 |
| Alerta | rgba(242,92,84,0.1) | #b52020 |
| Grátis | rgba(63,74,49,0.08) | Forest |
05
UI
Design Tokens
A fonte de verdade — React Native / TypeScript e CSS.
TypeScript — packages/ui/src/tokens.ts
export const colors = {
sand: '#F6F2EB', // background principal
ink: '#2F2F2F', // texto principal
moss: '#6B8E7E', // ★ cor primária de ação
forest: '#3F4A31', // headings, dark variant
terracota: '#E07A5F', // accent quente secundário
neutral: '#A6A6A6', // placeholders, bordas sutis
surface: '#FFFFFF', // cards, modais
gradA: '#FF9A4D', // gradiente isotipo — start
gradB: '#3FA956', // gradiente isotipo — end
red: '#F25C54', // erro
green: '#3FA956', // sucesso
};
export const spacing = {
1: 4, 2: 8, 3: 12, 4: 16, 6: 24, 8: 32, 12: 48, 16: 64,
};
export const radius = {
sm: 12, md: 16, lg: 20, xl: 28, pill: 999,
};
export const shadow = {
sm: { shadowColor: '#000', shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.06, shadowRadius: 4, elevation: 2 },
md: { shadowColor: '#000', shadowOffset: { width: 0, height: 4 },
shadowOpacity: 0.12, shadowRadius: 12, elevation: 6 },
nav: { shadowColor: '#000', shadowOffset: { width: 0, height: 4 },
shadowOpacity: 0.22, shadowRadius: 14, elevation: 10 },
};CSS — Biblioteca everhere
:root {
--sand: #F6F2EB;
--sand-deep: #EDE8DE;
--ink: #2F2F2F;
--ink-soft: #4A4A4A;
--moss: #6B8E7E;
--forest: #3F4A31;
--neutral: #A6A6A6;
--grad-a: #FF9A4D;
--grad-b: #3FA956;
--icon: #6B8E7E;
--icon-dark: #4A6D5E;
--icon-deep: #395650;
--sidebar-w: 270px;
}Espaçamento — Base 4px
| Token | px | Uso típico |
|---|---|---|
1 | 4px | Gap mínimo, separadores |
2 | 8px | Gap entre ícone e label |
3 | 12px | Padding interno de badge/chip |
4 | 16px | Padding de card |
6 | 24px | Separação entre seções |
8 | 32px | Padding de modal/sheet |
12 | 48px | Padding de seção de tela |
16 | 64px | Espaçamento entre blocos grandes |
06
Marca
Tom de Voz
A everhere não ordena — convida. Linguagem humana, presente, sem jargão técnico.
Princípio
Curto, direto, no lado do usuário. A everhere fala com quem vai viver, não com quem gerencia. A tagline "Life, felt." define o tom: presente, sensorial, sem explicação.
Evitar × Usar
| ❌ Evitar | ✅ Usar |
|---|---|
| "Participe de atividades esportivas e de bem-estar na sua cidade" | "Nunca mais faça nada sozinho." |
| "Compartilhe sua experiência pós-atividade" | "Share this Memory." |
| "Funcionalidade de geolocalização disponível" | "Encontre o que acontece perto de você." |
| "Maximize seu bem-estar com nossas atividades" | "Just show up." |