O que é Arah Arah é uma infraestrutura digital comunitária onde o território vem primeiro. Construímos tecnologia que fortalece comunidades locais, respeita autonomia e serve à continuidade da vida no lugar.

Posicionamento

• Territorial: Localização geográfica como princípio organizador primário
• Comunitário: Governança e tomada de decisão locais
• Transparente: Processos abertos, contribuições visíveis e participação pública
• Orientado ao serviço: Tecnologia serve às comunidades, não o contrário
• Valorizador de inteligência: Conhecimento reconhecido e honrado, não extraído

Diferencial competitivo Diferente de plataformas que operam a portas fechadas, todas as decisões, contribuições e processos no Arah são visíveis e participativos. Comunidades veem como a plataforma evolui, quem contribui e por que decisões são tomadas.

1. Território como Referência

   • O território existe antes do app e continua existindo sem usuários
   • Geografia como fundamento estrutural, não filtro
   • Lugar físico real com nome, localização e fronteira geográfica

2. Autonomia Local

   • Comunidades controlam sua presença digital
   • Decisões locais sobre moderação, regras e governança
   • Tecnologia serve, não controla

3. Transparência Radical

   • Processos abertos e auditáveis
   • Contribuições visíveis e reconhecidas
   • Participação pública em decisões

4. Inteligência como Valor

   • Conhecimento reconhecido e honrado
   • Não extração, mas serviço
   • Diferentes tipos de inteligência são valorizados

5. Decolonização Digital

   • Tecnologia que desvela possibilidades além de padrões coloniais
   • Valorização de saberes locais e conhecimento territorial
   • Serviço à autonomia, não ao controle

Arah opera em um nível elevado de consciência social e tecnológica:

• Consciência Territorial: Reconhecimento profundo do vínculo entre pessoas e lugar
• Consciência Comunitária: Respeito pela autonomia e governança local
• Consciência Tecnológica: Tecnologia como serviço, não como instrumento de controle
• Consciência Ética: Transparência, participação e valorização da inteligência

Tom de Consciência

• Profissional, mas não corporativo
• Elevado, mas não elitista
• Consciente, mas não moralista
• Transformador, mas não revolucionário em tom agressivo

---

Atributo	Definição	Como se Manifesta
Autônomo	Independente, respeitoso da autonomia local	Comunidades decidem sobre moderação e regras
Transparente	Aberto, visível, auditável	Processos, contribuições e decisões são públicos
Territorial	Ancorado ao lugar, respeitoso da geografia	Território organiza contexto e governança
Sóbrio	Profissional, não chamativo, elegante	Design minimalista, linguagem clara
Consciente	Atento, responsável, ético	Tecnologia serve à vida, não à extração
Acolhedor	Inclusivo, respeitoso, aberto	Diversos tipos de inteligência são valorizados

Características Principais

1. Profissional e Direto

   • Linguagem clara e objetiva
   • Evitar floreios desnecessários
   • Comunicação precisa e informativa

2. Respeitoso e Inclusivo

   • Uso de linguagem neutra quando possível
   • Respeito por diferentes perspectivas
   • Acolhimento de iniciantes e experts

3. Consciente e Transformador

   • Reconhecimento de impacto social
   • Propósito claro e explícito
   • Convite à reflexão, não imposição

4. Transparente e Honesto

   • Comunicação clara sobre processos
   • Reconhecimento de limitações
   • Transparência sobre decisões e contribuições

Diretrizes de Linguagem

• ✅ Use: Linguagem direta, profissional, inclusiva
• ❌ Evite: Jargões desnecessários, linguagem corporativa vazia, imposições morais
• ✅ Prefira: "Como podemos" sobre "Você deve", perguntas sobre afirmações absolutas
• ❌ Evite: Repetições, redundâncias, frases longas sem propósito

Exemplos de Tom

✅ Bom:

"Arah é uma infraestrutura digital onde o território vem primeiro. Construímos tecnologia que fortalece comunidades locais, respeita autonomia e serve à continuidade da vida no lugar."

❌ Evite:

"Bem-vindo ao Arah! Somos a melhor plataforma comunitária do mundo que vai transformar sua vida e sua comunidade de forma revolucionária!"

---

Princípios Fundamentais

1. Sobriedade Elevada

   • Design minimalista e profissional
   • Sem elementos desnecessários ou decorativos
   • Foco na clareza e legibilidade

2. Hierarquia Clara

   • Informação organizada por importância
   • Espaçamento generoso e ritmo visual consistente
   • Tipografia que guia o olhar

3. Silêncio Funcional

   • Elementos visuais que servem à função
   • Sem distrações ou ruído visual
   • Foco no conteúdo e na experiência

4. Autonomia Visual

   • Interfaces que respeitam a autonomia do usuário
   • Controles claros e previsíveis
   • Sem manipulação de atenção

Forest (Verde Floresta)

• Base da identidade visual
• Representa território, natureza, vida, continuidade

Cores Light Mode

--forest-50: #f1f8f4;   /* Background principal */
--forest-100: #d9ede3;  /* Background cards leves */
--forest-200: #c6e3d2;  /* Bordas sutis */
--forest-300: #a8d4b8;  /* Elementos secundários */
--forest-400: #7fb89c;  /* Links hover */
--forest-500: #5a9c7a;  /* Links */
--forest-600: #4a8266;  /* Texto secundário */
--forest-700: #3d6b55;  /* Texto principal */
--forest-800: #2d5243;  /* Texto forte */
--forest-900: #1a3529;  /* Títulos */
--forest-950: #0f2019;  /* Background escuro opcional */

Cores Dark Mode

--bg: #0a0e12;           /* Background principal */
--bg-elevated: #0f1419;  /* Cards elevados */
--bg-card: #141a21;      /* Background cards */
--bg-muted: #1a2129;     /* Elementos muted */
--border: #25303a;       /* Bordas */
--text: #e8edf2;         /* Texto principal */
--text-muted: #b8c5d2;   /* Texto secundário */
--text-subtle: #8a97a4;  /* Texto sutil */

Cores de Acento (Revisadas - Alinhadas com Valores da Arah)

/* Primary - Verde (Natureza, Território, Crescimento) */
--color-primary-400: #4dd4a8;        /* Verde accent principal */
--color-primary-500: #3bc495;        /* Hover e estados ativos */
--accent-subtle: rgba(77, 212, 168, 0.15); /* Backgrounds sutis */

/* Secondary - Azul (Transparência, Clareza, Confiança) */
--color-secondary-300: #7dd3ff;      /* Azul para links */
--color-secondary-400: #9de3ff;      /* Links hover */

/* Semânticas */
--color-warning: #f5c842;            /* Avisos */
--color-error: #f26d6d;              /* Erros */
--color-success: var(--color-primary-400); /* Sucesso (usa primary) */

/* Compatibilidade (aliases) */
--accent: var(--color-primary-400);
--accent-hover: var(--color-primary-500);
--accent-strong: var(--color-primary-500);
--link: var(--color-secondary-300);
--link-hover: var(--color-secondary-400);
--warning: var(--color-warning);
--danger: var(--color-error);
--success: var(--color-success);

Nota: A paleta foi revisada para refletir melhor os valores da Arah: verde representa natureza/território, azul representa transparência/clareza. Cores são suaves e não saturadas demais, mantendo sobriedade elevada.

Uso de Cores

• Forest: Cor primária, usada em backgrounds, textos e elementos principais
• Accent: Destaques, CTAs, estados interativos
• Link: Links externos e navegação secundária
• Warning/Danger: Feedback e estados de atenção
• Evitar: Cores saturadas demais, múltiplas cores de destaque, contrastes insuficientes

Inter (Corpo de Texto e UI)

• Uso: Textos, interfaces, navegação, cards
• Pesos: 400 (Regular), 500 (Medium), 600 (Semibold), 700 (Bold)
• Características: Moderna, legível, profissional, usada por Vercel, Stripe, Linear

JetBrains Mono (Código e Técnico)

• Uso: Blocos de código, exemplos técnicos, configurações
• Pesos: 400 (Regular), 500 (Medium), 600 (Semibold)
• Características: Excelente legibilidade, usada em documentação técnica enterprise

--font-size-xs: 0.75rem;    /* 12px - Labels pequenos */
--font-size-sm: 0.875rem;   /* 14px - Texto secundário */
--font-size-base: 1rem;     /* 16px - Corpo de texto */
--font-size-lg: 1.125rem;   /* 18px - Texto destacado */
--font-size-xl: 1.25rem;    /* 20px - Subtítulos */
--font-size-2xl: 1.5rem;    /* 24px - Seções */
--font-size-3xl: 1.875rem;  /* 30px - Títulos seções */
--font-size-4xl: 2.25rem;   /* 36px - Hero subtítulo */
--font-size-5xl: 3rem;      /* 48px - Hero título */
--font-size-6xl: 3.75rem;   /* 60px - Display */

--letter-spacing-tighter: -0.05em;  /* Display/títulos grandes */
--letter-spacing-tight: -0.025em;   /* Títulos */
--letter-spacing-normal: 0;         /* Corpo de texto */
--letter-spacing-wide: 0.025em;     /* Labels uppercase */
--letter-spacing-wider: 0.05em;     /* Uppercase destacado */

Títulos Principais (H1)

• Fonte: Inter, Bold (700)
• Tamanho: 3rem - 3.75rem (48px - 60px)
• Line-height: 1.25
• Letter-spacing: -0.025em
• Cor: forest-900 (light) / text (dark)

Subtítulos (H2)

• Fonte: Inter, Semibold (600)
• Tamanho: 1.875rem - 2.25rem (30px - 36px)
• Line-height: 1.375
• Cor: forest-800 (light) / text (dark)

Seções (H3)

• Fonte: Inter, Semibold (600)
• Tamanho: 1.5rem (24px)
• Line-height: 1.5
• Cor: forest-700 (light) / text-muted (dark)

Corpo de Texto

• Fonte: Inter, Regular (400)
• Tamanho: 1rem - 1.125rem (16px - 18px)
• Line-height: 1.75
• Cor: forest-700 (light) / text (dark)

--space-1: 0.25rem;  /* 4px */
--space-2: 0.5rem;   /* 8px */
--space-3: 0.75rem;  /* 12px */
--space-4: 1rem;     /* 16px */
--space-6: 1.5rem;   /* 24px */
--space-8: 2rem;     /* 32px */
--space-12: 3rem;    /* 48px */
--space-16: 4rem;    /* 64px */
--space-20: 5rem;    /* 80px */
--space-24: 6rem;    /* 96px */

Aplicação

• Padding interno de cards: 1.5rem - 2rem (24px - 32px)
• Margem entre seções: 4rem - 6rem (64px - 96px)
• Espaçamento entre elementos relacionados: 1rem - 1.5rem (16px - 24px)
• Espaçamento entre elementos não relacionados: 2rem - 3rem (32px - 48px)

Características

• Background: rgba com transparência (0.95 - 0.98)
• Backdrop-filter: blur(24px)
• Border: 1px solid com opacidade (0.4 - 0.6)
• Shadow: Múltiplas camadas sutis

Light Mode

--glass-bg: rgba(255, 255, 255, 0.98);
--glass-border: rgba(198, 227, 210, 0.4);
--glass-shadow: 0 4px 24px rgba(23, 53, 37, 0.08);

Dark Mode

--glass-bg: rgba(20, 26, 33, 0.98);
--glass-border: rgba(37, 48, 58, 0.6);
--glass-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);

Estilos

• Primary: Background accent, texto branco, bold
• Secondary: Border accent, texto accent, transparent
• Tertiary: Apenas texto, hover com background sutil

Estados

• Default: Cor base, shadow sutil
• Hover: Cor mais clara/escura, shadow aumentada
• Active: Pressed state, shadow reduzida
• Disabled: Opacidade 0.5, cursor not-allowed

Tamanhos

• Small: padding 0.5rem 1rem, font-size 0.875rem
• Medium: padding 0.75rem 1.5rem, font-size 1rem (padrão)
• Large: padding 1rem 2rem, font-size 1.125rem

Estrutura

• Background: Glass morphism
• Padding: 1.5rem - 2rem
• Border-radius: 16px - 24px
• Shadow: sm (default), md (hover)

Tipos

• Content Card: Conteúdo principal, glass effect completo
• Feature Card: Destaque de funcionalidade, hover elevado
• Info Card: Informação secundária, estilo mais sutil

Header

• Background: Glass morphism
• Height: 80px - 100px
• Sticky: top 0
• Border-bottom: 1px subtle

Sidebar

• Background: Transparent ou glass sutil
• Width: 280px (desktop)
• Links: Estados hover/focus claros
• Collapsible: Em mobile

Breadcrumbs

• Font-size: 0.875rem
• Separator: "›" ou "/"
• Color: muted
• Active: Color base, bold

---

Sobriedade

• Menos é mais
• Elementos que servem à função
• Sem decorações desnecessárias

Hierarquia

• Informação mais importante = mais destaque
• Espaçamento cria respiração
• Tipografia guia o olhar

Consistência

• Mesmas cores, fontes, espaçamentos
• Padrões de componentes reutilizáveis
• Comportamentos previsíveis

Acessibilidade

• Contraste suficiente (WCAG AA)
• Navegação por teclado funcional
• Screen readers compatíveis

Visual

• ❌ Cores saturadas demais
• ❌ Animações chamativas ou distraentes
• ❌ Emojis em elementos interativos
• ❌ Decorações sem função
• ❌ Contrastes insuficientes

Linguagem

• ❌ Jargões corporativos vazios
• ❌ Imposições morais ou agressivas
• ❌ Repetições desnecessárias
• ❌ Linguagem paternalista

Interação

• ❌ Manipulação de atenção
• ❌ Interações não intuitivas
• ❌ Feedback insuficiente
• ❌ Estados confusos

Breakpoints

• Mobile: < 768px
• Tablet: 768px - 1024px
• Desktop: > 1024px
• Large: > 1440px

Ajustes por Tela

• Tipografia: Escala down em mobile (0.875rem base)
• Espaçamento: Reduzido em mobile (2rem seções → 1.5rem)
• Navegação: Sidebar → Mobile menu em mobile
• Cards: Stack vertical em mobile

---

Características

• Foco em legibilidade e clareza
• Hierarquia clara de informação
• Navegação fácil entre documentos
• Progressive disclosure para conteúdo longo

Elementos Especiais

• Table of Contents (TOC) dinâmico
• Breadcrumbs para contexto
• Code blocks com syntax highlighting
• Links internos/externos claramente diferenciados

Características

• Profissional mas acolhedor
• Transparente sobre processos
• Convidativo sem ser invasivo
• Clareza sobre propósito e valores

Elementos Especiais

• CTAs claros mas não agressivos
• Testimonials/referências quando apropriado
• Roadmap e status público
• Links para comunidade (Discord, GitHub)

---

Identidade Visual

• Cores seguem a paleta definida
• Tipografia usa Inter/JetBrains Mono
• Espaçamentos seguem escala 8px
• Contraste WCAG AA verificado

Linguagem e Tom

• Linguagem profissional e direta
• Sem jargões desnecessários
• Sem repetições ou redundâncias
• Tom alinhado com personalidade da marca

Design

• Hierarquia visual clara
• Espaçamento generoso e consistente
• Elementos servem à função
• Sem decorações desnecessárias

Acessibilidade

• Contraste suficiente (ferramenta WCAG)
• Navegação por teclado funcional
• Estados de foco visíveis
• Alt texts em imagens

Consistência

• Alinhado com outros materiais
• Componentes reutilizáveis quando possível
• Padrões de interação consistentes

---

Use	Evite	Por quê
Territory / Território	Place, Location, Area	Território é geográfico e neutro, representa lugar físico real
Presença no Território	Check-in, Foursquare	Enfatiza vínculo físico e continuidade, não gamificação
GeoAnchor	Pin, Marker	Técnico e preciso, representa ancoragem geográfica

Use	Evite	Por quê
Visitor / Visitante	User, Member, Guest	Papel territorial específico, não genérico
Resident / Morador	Local, Inhabitant	Enfatiza vínculo territorial aprovado
Membership / Vínculo	Affiliation, Connection	Termo técnico preciso, representa relação User ↔ Territory

Use	Evite	Por quê
Curator / Curador	Validator, Approver	Valoriza inteligência e conhecimento, não apenas função técnica
Moderator / Moderador	Admin, Supervisor	Termo específico, respeita autonomia territorial
Report	Complaint, Flag	Termo neutro, focado em transparência
Sanction / Sanção	Ban, Penalty	Termo técnico preciso, respeita processo documentado

• Transparente — processos abertos e auditáveis
• Territorial — ancorado ao lugar, respeitoso da geografia
• Comunitário — governança local, participação coletiva
• Autônomo — independente, respeitoso da autonomia local
• Sóbrio — profissional, não chamativo, elegante
• Consciente — atento, responsável, ético

✅ Preferir:

• "Arah é uma infraestrutura digital onde o território vem primeiro."
• "Construímos tecnologia que fortalece comunidades locais."
• "Território como referência, autonomia como valor."

❌ Evitar:

• "Somos a melhor plataforma comunitária do mundo!"
• "Revolucione sua comunidade conosco!"
• "Transforme seu bairro hoje!"

✅ Preferir:

• "Território organiza contexto e governança."
• "Transparência em processos e decisões."
• "Autonomia territorial em moderação e regras."

❌ Evitar:

• "Nossa plataforma única oferece..." (possessivo corporativo)
• "Você vai adorar..." (promessa vazia)
• "Descubra como..." (imperativo passivo)

1. Sentenças Diretas: Sujeito + verbo + complemento

   • ✅ "Território organiza contexto."
   • ❌ "É através do território que organizamos contexto."

2. Voz Ativa: Sujeito como agente da ação

   • ✅ "Comunidades decidem sobre moderação."
   • ❌ "A moderação é decidida pelas comunidades."

3. Linguagem Neutra: Preferir termos técnicos precisos

   • ✅ "Membership representa vínculo User ↔ Territory."
   • ❌ "O membro está vinculado ao território."

Antes de publicar qualquer texto:

• Usei "Territory" (não "place" ou "location")?
• Usei "Items" (não "listings")?
• Evitei superlativos vazios ("melhor", "único", "revolucionário")?
• Preferi voz ativa e sentenças diretas?
• Usei verbos de ação consciente ("participar", "contribuir")?
• Evitei jargões corporativos ("disruptivo", "inovador")?
• Mantive consistência com glossário e modelo de domínio?

---

Design Systems

• Vercel Design: Minimalismo e tipografia
• Stripe Design: Clareza e hierarquia
• Linear Design: Sofisticação e interações
• Tailwind CSS: Sistema de design utilitário

Identidade de Marca

• closer.earth: Transparência e profissionalismo
• Basecamp: Comunicação clara e direta
• GitHub: Técnico mas acessível