# LANSING — Brand Guidelines > Conversão é ciência. A LANSING é especialista em conversão de e-commerce — > e entrega isso com tecnologia que 99% das lojas no Brasil não têm. > Arquitetura LANSING · +60 funcionalidades nativas · 16 Agentes Autônomos de IA · Sem temas ou plugins pagos. > **Chapéu e mecanismo.** A promessa que se vende é **conversão** — a dor do cliente, > a linguagem que ressoa. A tecnologia (Arquitetura LANSING, agentes, funcionalidades) é o > **mecanismo**: a prova de _como_ a LANSING entrega conversão, não a manchete. > Em copy de topo, lidere por conversão; use a arquitetura como diferencial defensável, > não como abertura. --- ## Nota Este documento descreve a identidade visual e verbal da **Agência LANSING**. O design system técnico (tokens, componentes, tipografia) se aplica a todos os produtos, à comunicação e aos materiais da LANSING. **Números canônicos:** a LANSING entrega **16 Agentes Autônomos de IA** e **+60 funcionalidades nativas**. Esses números são definidos na Esteira de Produtos (PRD); este guideline os referencia. --- ## 1. Essência da marca ### Visão Ser referência em conversão de e-commerce no Brasil — provar que conversão é ciência, e que a tecnologia de ponta que sustenta isso não precisa ser inacessível a pequenos negócios. ### Propósito Fazer e-commerces pequenos venderem mais pelo tráfego que já recebem — destravando conversão com a Arquitetura LANSING: +60 funcionalidades nativas e 16 Agentes Autônomos de IA. ### Valores - Performance acima de aparência - Transparência total - Sem amarras contratuais - Tecnologia proprietária - Resultados mensuráveis ### Diferencial Consultoria e tecnologia integradas. O que agências de desenvolvimento e de marketing não entregam juntas, a LANSING resolve com a Arquitetura LANSING: +60 funcionalidades nativas (que substituem dezenas de apps pagos) e 16 Agentes Autônomos de IA. --- ## 2. Marca pessoal e marca de serviço A LANSING opera com dois níveis de identidade complementares. **Klarck Lansing** é o especialista. A marca pessoal — o rosto, a voz, a autoridade técnica. É quem aparece no conteúdo, nas calls, nas análises públicas. A tagline de apresentação é: > **Klarck Lansing — Especialista em Conversão de E-commerce** **Agência LANSING** é o veículo de entrega. O serviço que executa o que Klarck diagnostica e projeta. Klarck é o engenheiro; a LANSING é a empreiteira. ### Regras de uso - Em conteúdo orgânico (TikTok, Instagram, DMs): voz de Klarck Lansing, primeira pessoa. - Em materiais institucionais (proposta, landing page, contrato): voz da LANSING, terceira pessoa. - O nome LANSING nunca aparece em minúsculo. Sempre `LANSING` — em qualquer contexto, canal ou tamanho. - Com artigo em copy corrido: "a LANSING entregou..." / "da LANSING". - Sem artigo em headlines e contextos de impacto: "LANSING. Conversão é ciência." --- ## 3. Identidade verbal ### Tom de voz **Direto, técnico, confiante.** Sem rodeios, sem fluff de marketing. A LANSING fala no cadenciamento contrarian — nomeia o que os outros erram, depois declara o que entrega: > "Sem temas prontos. Sem Frankenstein de plugins. Design exclusivo, performance real." Performance como prova. Números, percentuais, especificidade — nunca adjetivos vagos: > "Tecnologia que 99% dos e-commerces no Brasil não têm." Frases curtas, cláusulas diretas. Vírgulas e pontos sobre subordinadas longas. ### Tom por canal | Canal | Tom | Exemplo | | ---------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------- | | TikTok / conteúdo orgânico | Pessoal, direto, contrarian. Voz de Klarck. | "Sua loja está no ar. Mas não está convertendo. Diferença enorme." | | Instagram (post / carrossel) | Técnico-visual. Dado + conclusão. | "+60 funcionalidades nativas. Zero plugins pagos." | | WhatsApp comercial | Consultivo, objetivo. Sem formalidade excessiva. | "Antes de falar em tráfego, preciso entender o que está trancando a conversão." | | Landing page | Contrarian + prova. Copy de performance. | "Sem temas prontos. Sem Frankenstein de plugins." | | Proposta comercial | Técnico, estruturado, confiante. Sem hype. | "A LANSING desenvolve o e-commerce em Arquitetura proprietária..." | | Anúncio (Meta / Google) | Gancho forte + CTA direto. Curto. | "Sua loja vende menos do que poderia. Veja o porquê." | | E-mail | Objetivo, sem enrolação. Estrutura clara. | Assunto direto. Corpo sem parágrafo de aquecimento. | ### Regras de tom | ✅ Fazer | ❌ Não fazer | | ----------------------------------------------------------------------------- | ----------------------------------------------------------------------- | | Substantivos sobre adjetivos — "16 Agentes Autônomos" > "tecnologia poderosa" | Superlativos sem prova — "o melhor", "incrível", "revolucionário" | | Você (informal-profissional) para o leitor | Emoji. Ponto de exclamação. "Nós estamos empolgados" | | "a LANSING" (com artigo) em copy corrido | Startup cringe — "jornada", "ecossistema", "experiência transformadora" | | Numerais — "16 agentes", "99%" | Escrever números por extenso em contextos técnicos | | LANSING sempre em maiúsculo | `Lansing` ou `lansing` — nunca | ### Frase de marca > **"Não adianta, conversão é ciência."** Frase canônica da LANSING. Usada como encerramento de conteúdo, assinatura de copy e âncora de posicionamento. Nunca alterada, nunca parafraseada em contexto oficial. ### Capitalização | Contexto | Regra | Exemplo | | ------------------- | ----------------------------------------------- | --------------------------------------------- | | Títulos / headlines | Sentence case | "Tecnologia que 99% dos e-commerces não têm." | | Labels / eyebrows | UPPERCASE + letter-spacing largo | "PERFORMANCE REAL" | | Navegação e botões | Sentence case | "Fale com a gente" | | Nome da marca | Sempre `LANSING` — nunca `Lansing` ou `lansing` | "Agência LANSING" · "LANSING entrega..." | ### Exemplos on-brand vs. off-brand **On-brand** - "Design exclusivo, performance real." - "Consultoria e tecnologia integradas." - "Sem amarras contratuais." - "O que 99% dos e-commerces no Brasil não têm." - "16 Agentes Autônomos de IA." - "+60 funcionalidades nativas. Zero plugins pagos." - "Não adianta, conversão é ciência." **Off-brand** - "Transforme sua jornada digital!" — fluff - "A melhor agência do Brasil 🚀" — superlativo + emoji - "Estamos empolgados em anunciar…" — corporativo ### Idioma Português brasileiro como idioma primário — diacríticos corretos (`ê`, `ã`, `á`, `ç`). Inglês aceito para termos técnicos já consagrados no mercado (_e-commerce_, _performance_, _plugins_, _CTAs_, _framework_, _checkout_). --- ## 4. Glossário de marca Termos proprietários da LANSING com grafia canônica obrigatória. | Termo | Grafia correta | Nunca usar | | ----------------------- | ------------------------------------------- | ---------------------------------------------- | | Nome da marca | `LANSING` | `Lansing` · `lansing` | | Produto 1 | `Protocolo de Conversão` | `protocolo de conversão` · `Protocolo` isolado | | Produto 2 | `Mentoria de Conversão` | `mentoria` genérico | | Produto 3 | `Engenharia de Conversão` | `engenharia` genérico | | Sistema de IA | `Agentes Autônomos de IA` (conjunto dos 16) | `agentes` sozinho quando referindo ao conjunto | | Tecnologia proprietária | `Arquitetura LANSING` | `stack` · `stack Lansing` · `stack lansing` | | Frase de marca | `"Não adianta, conversão é ciência."` | Versões parafraseadas em contexto oficial | **Regra dos Agentes Autônomos de IA:** capitalizado quando referência ao conjunto proprietário dos 16 ("os 16 Agentes Autônomos de IA da LANSING"). Minúsculo quando genérico ou referindo a um agente individual em contexto técnico ("o agente de atendimento verifica..."). --- ## 5. Logo ### Elementos da marca A identidade visual da LANSING é composta por dois elementos distintos, nunca combinados: **Wordmark** — o nome `LANSING` em tipografia exclusiva e personalizada. É o elemento principal de comunicação da marca. **Favicon** — símbolo isolado composto por hexágono com ícone de pino centralizado, em ciano sobre fundo preto. Usado exclusivamente como ícone de navegador (favicon de site). Não é usado em nenhum outro contexto. ### Variantes do wordmark | Variante | Uso | | ------------------ | ------------------------------------------------------------- | | Branca (`#ffffff`) | Contextos dark — superfícies escuras, fundo `#0a0a0a`, vídeos | | Ciano (`#5ce1e6`) | Contextos dark de destaque — hero, thumbnails, capas | | Preta (`#111111`) | Contextos light — propostas impressas, fundos claros | ### Regras de uso do wordmark - Wordmark e favicon nunca aparecem juntos no mesmo layout. - Nunca alterar proporções, espaçamento interno ou cor da tipografia fora das variantes definidas. - Nunca aplicar sombra, contorno, gradiente ou efeito sobre o wordmark. - Nunca recriar o wordmark em outras fontes — é tipografia exclusiva e existe apenas como arquivo de asset. - Tamanho mínimo de uso: 80px de largura em digital; 25mm em impresso. - Área de proteção: espaço livre equivalente à altura da letra `L` em todos os lados. ### Fundos de marca Dois fundos texturizados fazem parte do sistema de identidade: - **Fundo escuro:** preto com grain monocromático — uso padrão em todo o sistema dark. - **Fundo claro:** branco suavizado com grain monocromático — uso em contextos light (propostas, impressos, templates, posts). O grain é parte da identidade. Fundos lisos sem grain não fazem parte do sistema da marca. ### Usos proibidos - Wordmark sobre fundos coloridos que não sejam do sistema da marca. - Wordmark em qualquer cor além das três variantes definidas. - Favicon fora do contexto de navegador. - Wordmark em versão lowercase ou mixed case. - Combinação de wordmark + favicon no mesmo layout. --- ## 6. Cores ### Modo padrão: dark O sistema de cores da LANSING é primariamente dark. Backgrounds claros existem para contextos light definidos (landing pages, propostas, posts, impressos, templates, edição de vídeo). ### Paleta principal — dark mode | Token | Hex | Uso | | ---------------- | --------- | --------------------------------------------------------- | | `--lansing-bg` | `#0a0a0a` | Background padrão dark | | `--lansing-fg` | `#ffffff` | Texto primário dark | | `--lansing-cyan` | `#5ce1e6` | Acento — CTAs, links, estados ativos, números de destaque | | `--lansing-red` | `#ff5353` | Negativo — erros, alertas, stats ruins | ### Paleta principal — light mode | Token | Hex | Uso | | ---------------------- | --------- | ------------------------ | | `--lansing-bg-light` | `#eeeeee` | Background padrão light | | `--lansing-fg-light` | `#111111` | Texto primário light | | `--lansing-cyan-light` | `#137c80` | Acento em contexto light | ### Escala de neutros — dark | Token | Hex | Uso | | ----------------------- | --------- | ----------------------- | | `--lansing-ink-0` | `#0a0a0a` | Base | | `--lansing-ink-1` | `#111111` | Card / surface elevada | | `--lansing-ink-2` | `#161616` | Surface mais alta | | `--lansing-ink-3` | `#1f1f1f` | Hover de surface | | `--lansing-line` | `#262626` | Bordas hairline no dark | | `--lansing-line-strong` | `#3a3a3a` | Bordas de foco / ênfase | ### Escala de foreground — dark | Token | Valor | Uso | | ---------------- | ------------------------ | ------------------- | | `--lansing-fg-1` | `#ffffff` | Texto primário | | `--lansing-fg-2` | `rgba(255,255,255,0.72)` | Texto secundário | | `--lansing-fg-3` | `rgba(255,255,255,0.52)` | Terciário / meta | | `--lansing-fg-4` | `rgba(255,255,255,0.32)` | Desabilitado / hint | ### Escala de foreground — light | Token | Valor | Uso | | ---------------------- | --------------------- | ------------------- | | `--lansing-fg-light-1` | `#111111` | Texto primário | | `--lansing-fg-light-2` | `rgba(17,17,17,0.72)` | Texto secundário | | `--lansing-fg-light-3` | `rgba(17,17,17,0.52)` | Terciário / meta | | `--lansing-fg-light-4` | `rgba(17,17,17,0.32)` | Desabilitado / hint | ### Escala do ciano — dark mode | Token | Hex | Uso | | ------------------------ | ----------------------- | ---------------------------------------- | | `--lansing-cyan-600` | `#2eb8bd` | Estado pressed | | `--lansing-cyan-500` | `#5ce1e6` | Base — contraste 12.60:1 sobre `#0a0a0a` | | `--lansing-cyan-400` | `#8aecef` | Hover sobre dark | | `--lansing-cyan-tint-24` | `rgba(92,225,230,0.24)` | Borda / focus ring / active | | `--lansing-cyan-tint-12` | `rgba(92,225,230,0.12)` | Wash suave | ### Ciano — light mode | Token | Hex | Contraste sobre `#eeeeee` | Uso | | ------------------------- | --------- | ------------------------- | ------------------------------------------------------- | | `--lansing-cyan-on-light` | `#137c80` | 4.97:1 ✅ AA | Texto, ícones e elementos interativos em contexto light | ### Contraste mínimo obrigatório | Contexto | Par | Contraste mínimo | Nível | | ------------------------------------------ | ------------------------- | ---------------- | ------------- | | Texto normal (dark) | fg sobre bg | 4.5:1 | WCAG AA | | Texto normal (light) | fg sobre bg | 4.5:1 | WCAG AA | | Texto grande / bold ≥18px (ambos) | fg sobre bg | 3.0:1 | WCAG AA large | | Ciano como texto (dark) | `#5ce1e6` sobre `#0a0a0a` | 12.60:1 ✅ | — | | Ciano como texto (light) | `#137c80` sobre `#eeeeee` | 4.97:1 ✅ | — | | Ciano como texto (light) sobre branco puro | `#137c80` sobre `#ffffff` | 4.97:1 ✅ | — | Nenhum par de cor-texto aprovado para uso na LANSING pode estar abaixo de 4.5:1. O ciano base `#5ce1e6` **nunca** é usado como texto em contexto light. ### Regras de uso de cor - Se tudo é ciano, nada é ciano — usar com intenção e parcimônia. - Nunca introduzir novas cores sem atualizar este sistema. - Sem sombras coloridas — proibido cyan glow ou red glow, exceto em estados de foco de elementos interativos e tratamentos de hero reservados. - Âmbar não faz parte da paleta da LANSING. --- ## 7. Tipografia ### Famílias | Família | Fonte | Pesos | Uso | | ------------------ | ------------------------------------------------------ | ------- | ------------------------------------ | | Display / headings | **Ruda** | 400–900 | Títulos, statements, números grandes | | Body / UI | **Figtree** | 300–700 | Corpo de texto, labels, UI | | Mono | System mono (`ui-monospace`, SF Mono, Menlo, Consolas) | 400 | Código | A tipografia do wordmark é exclusiva e personalizada — não é Ruda nem Figtree. Existe apenas como asset de logo e nunca é usada em texto corrido ou UI. ### Quando usar cada família - **Ruda** — headlines, títulos de seção, números de destaque, statements de hero, eyebrows em display. - **Figtree** — todo o restante: parágrafos, labels, botões, navegação, captions, UI em geral. - As duas nunca competem no mesmo nível hierárquico. Ruda lidera; Figtree suporta. ### Escala tipográfica (base 16px, módulo 1.25) | Token | Tamanho | Família / Peso | Uso típico | | ------------------ | ------- | ---------------------- | --------------------------- | | `--type-display-1` | 96px | Ruda Black (900) | Statements gigantes de hero | | `--type-display-2` | 72px | Ruda Black (900) | Display secundário | | `--type-h1` | 56px | Ruda ExtraBold (800) | H1 | | `--type-h2` | 40px | Ruda Bold (700) | H2 | | `--type-h3` | 32px | Ruda Bold (700) | H3 | | `--type-h4` | 24px | Ruda SemiBold (600) | H4 / botões grandes | | `--type-eyebrow` | 12px | Figtree SemiBold (600) | Labels uppercase | | `--type-body-lg` | 18px | Figtree Regular (400) | Parágrafos de destaque | | `--type-body` | 16px | Figtree Regular (400) | Corpo padrão | | `--type-body-sm` | 14px | Figtree Regular (400) | Texto pequeno | | `--type-caption` | 12px | Figtree Medium (500) | Caption / meta | ### Escala tipográfica mobile Em viewport mobile, os tokens de display e heading são comprimidos via `clamp()` para evitar overflow e quebra de leitura. | Token desktop | Valor mobile | Clamp sugerido | | ----------------------- | ------------ | -------------------------- | | `--type-display-1` 96px | 48px | `clamp(48px, 8vw, 96px)` | | `--type-display-2` 72px | 40px | `clamp(40px, 6vw, 72px)` | | `--type-h1` 56px | 32px | `clamp(32px, 5vw, 56px)` | | `--type-h2` 40px | 26px | `clamp(26px, 4vw, 40px)` | | `--type-h3` 32px | 22px | `clamp(22px, 3.5vw, 32px)` | | `--type-h4` 24px | 20px | `clamp(20px, 3vw, 24px)` | Body, captions e labels mantêm os valores desktop em mobile. ### Letter-spacing | Token | Valor | Uso | | ------------------- | --------- | ------------------- | | `--tracking-tight` | `-0.02em` | Display type grande | | `--tracking-normal` | `0` | Corpo | | `--tracking-wide` | `0.08em` | Labels | | `--tracking-wider` | `0.14em` | Eyebrows UPPERCASE | ### Regras tipográficas - `text-wrap: pretty` em blocos de parágrafo quando suportado. - Eyebrows sempre em UPPERCASE com `tracking-wider`. - Display type sempre com `tracking-tight`. - Nunca usar tipografias alternativas sem aprovação. - O wordmark nunca é recriado em Ruda ou qualquer outra fonte — usar sempre o asset. --- ## 8. Layout e espaçamento ### Grid - 12 colunas - Gutters: 80px no desktop, 16px no mobile - Largura máxima de conteúdo: ~1240px (display type pode romper para além) ### Breakpoints | Nome | Largura | Comportamento | | --------- | -------------- | ----------------------------------------------------- | | `mobile` | < 640px | Coluna única, gutters 16px, tipografia comprimida | | `tablet` | 640px – 1024px | 6–8 colunas, gutters 32px | | `desktop` | > 1024px | 12 colunas, gutters 80px, escala tipográfica completa | ### Escala de espaçamento (base 4pt) `4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128px` Em mobile, espaçamentos acima de 64px são reduzidos em 40%. ### Princípios de layout - Whitespace generoso. Seções hero com 120–160px de respiro vertical no desktop; 64–80px no mobile. - Texto left-aligned na maioria dos blocos. Títulos de seção centralizados apenas quando há uma linha curta. - Nav sticky de 56px com backdrop blur e borda hairline inferior. - Footer em fluxo; nunca sticky. - CTAs em fluxo dentro das seções; nunca como overlays fixos. --- ## 9. Textura e background - Canvas dark padrão: `#0a0a0a` + grain monocromático (SVG fractal-noise, ~6% alpha, tiled). - Canvas light: `#eeeeee` + grain monocromático equivalente (~6% alpha, tiled). - O grain é a única textura em ambos os modos. Sem gradientes de hero, sem halos neon. - Fundos lisos sem grain não fazem parte do sistema da marca. Código do noise overlay (dark): ```css --noise-url: url("data:image/svg+xml;utf8,"); ``` Para o canvas light, aplicar o mesmo SVG com `feColorMatrix` invertida (valores de cor `0` em vez de `1`) sobre o background `#eeeeee`. --- ## 10. Bordas, radii e sombras ### Radii | Token | Valor | Uso | | --------------- | ------- | --------------------------- | | `--radius-sm` | `6px` | Elementos pequenos | | `--radius-md` | `10px` | **Default da marca** | | `--radius-lg` | `16px` | Cards e modais grandes | | `--radius-xl` | `24px` | Painéis e containers amplos | | `--radius-pill` | `999px` | Tags e chips | ### Formato proprietário de cards e módulos A LANSING utiliza cards, módulos e painéis com **cantos chanfrados sutis** — nem totalmente redondos, nem totalmente quadrados. Esse formato cria uma leitura mais técnica, precisa e proprietária, alinhada à ideia de arquitetura, diagnóstico e engenharia de conversão. O formato base é um retângulo com bordas retas, radius discreto e **recortes diagonais pequenos em um ou mais cantos**. O corte deve parecer estrutural, não decorativo. A sensação visual esperada é de interface técnica, peça modular, painel de diagnóstico ou componente de sistema. | Elemento | Regra visual | Uso | | -------------- | --------------------------------------------------------- | ---------------------------------------------------- | | Card padrão | Retângulo com `--radius-md` e chanfro sutil em 1–2 cantos | Cards de auditoria, métricas, módulos de arquitetura | | Módulo técnico | Card com borda hairline, fundo escuro e cantos chanfrados | Blocos de fluxo, recursos, etapas de funil | | Card crítico | Mesmo formato, com borda/acento vermelho | Problemas, fricções, alertas e perdas | | Card positivo | Mesmo formato, com borda/acento ciano | Oportunidades, recomendações e ganhos | | Badge técnico | Pílula ou octógono baixo com microchanfros | Selos como `CRO`, `UX`, `IA`, `TRACKING` | #### Regras de construção - Usar chanfros pequenos, entre `8px` e `16px`, proporcionais ao tamanho do card. - Evitar cantos excessivamente arredondados — a marca não deve parecer app casual. - Evitar cantos 100% retos em cards de destaque — ficam genéricos e menos proprietários. - A borda deve ser fina: `1px`, preferencialmente `--lansing-line` ou ciano/vermelho em baixa opacidade. - O fundo do card deve preservar a lógica de surface: `#111111`, `#161616` ou grain monocromático sutil. - O card pode receber um pequeno indicador no canto inferior direito: seta técnica, ponto, linha ou microícone. - Em grupos de cards, manter o mesmo padrão de chanfro para criar sistema e não variação aleatória. #### Sensação visual desejada > Painéis técnicos de diagnóstico. Componentes modulares. Interface de precisão. Engenharia aplicada à conversão. ### Bordas - Hairline dark: `1px solid #262626` - Strong dark: `1px solid #3a3a3a` para inputs focados e nav ativo - Hairline light: `1px solid rgba(17,17,17,0.12)` - Strong light: `1px solid rgba(17,17,17,0.24)` ### Sombras | Token | Valor | Uso | | -------------------- | ------------------------------------------------ | ------------------------------ | | `--shadow-sm` | `0 1px 2px rgba(0,0,0,0.4)` | Micro elevação | | `--shadow-md` | `0 8px 24px -8px rgba(0,0,0,0.6)` | Cards, dropdowns | | `--shadow-lg` | `0 24px 64px -16px rgba(0,0,0,0.7)` | Modais, painéis | | `--shadow-glow-cyan` | Ring + `0 10px 40px -10px rgba(92,225,230,0.35)` | Foco especial / hero reservado | Sombras coloridas são proibidas de forma generalizada. --- ## 11. Componentes de UI ### Botão Quatro variantes. Todas com `border-radius: 10px` (`--radius-md`), tipografia Figtree SemiBold 14px, altura mínima 44px, padding horizontal 20px. **Primário (dark)** - Background: `#5ce1e6` - Texto: `#0a0a0a` - Hover: background `#8aecef` - Pressed: background `#2eb8bd` + `transform: scale(0.98)` - Focus: ring 2px `rgba(92,225,230,0.24)` **Primário (light)** - Background: `#137c80` - Texto: `#eeeeee` - Hover: background levemente mais claro - Pressed: `transform: scale(0.98)` **Secundário** - Background: transparente - Borda: `1px solid #3a3a3a` (dark) / `1px solid rgba(17,17,17,0.24)` (light) - Texto: `--lansing-fg-1` (dark) / `--lansing-fg-light-1` (light) - Hover: background `--lansing-ink-2` **Ghost** - Sem background, sem borda - Texto: `--lansing-fg-2` - Hover: texto `--lansing-fg-1`, background `--lansing-ink-1` **Destrutivo** - Background: `#ff5353` - Texto: `#ffffff` - Hover: opacidade 90% **Desabilitado (todas as variantes)** - Foreground: `--lansing-fg-4` (32% opacidade) - Background: surface base sem hover - `cursor: not-allowed` ### Input / Campo de texto - Background: `--lansing-ink-1` (`#111111`) - Borda: `1px solid #262626` - Borda focused: `1px solid #3a3a3a` + focus ring `rgba(92,225,230,0.24)` - Texto: `--lansing-fg-1` - Placeholder: `--lansing-fg-4` - Radius: `--radius-md` (10px) - Altura: 44px (single line) - Tipografia: Figtree Regular 16px ### Badge / Tag - Radius: `--radius-pill` (999px) - Padding: 4px 10px - Tipografia: Figtree SemiBold 12px, UPPERCASE, `tracking-wide` - Variantes de cor: ciano (`rgba(92,225,230,0.12)` bg + `#5ce1e6` texto), neutro (`--lansing-ink-2` bg + `--lansing-fg-2` texto), vermelho (`rgba(255,83,83,0.12)` bg + `#ff5353` texto) ### Card ``` Surface: #111111 (--lansing-ink-1) Borda: 1px solid #262626 Radius: 10px Formato: retângulo técnico com cantos chanfrados sutis Padding: 24px / 32px Sombra: nenhuma por padrão Hover: surface → #161616, borda → #3a3a3a, 200ms ease ``` Os cards da LANSING seguem o formato proprietário de **painel técnico chanfrado**. A estrutura deve parecer modular e analítica, como um componente de diagnóstico ou bloco de arquitetura. O chanfro é sutil e controlado; não deve transformar o card em polígono decorativo. Cards de auditoria podem usar acentos por função: vermelho para problema/fricção, ciano para oportunidade/recomendação e neutro para métrica/observação. ### Modal - Background: `rgba(10,10,10,0.72)` com `backdrop-filter: blur(20px)` - Painel interno: `--lansing-ink-1`, `--radius-lg` (16px), `--shadow-lg` - Largura máxima: 560px - Entrada: `translateY(12px → 0)` + fade, 200ms `--ease-out` ### Toast / Notificação - Surface: `--lansing-ink-2` - Borda: `1px solid #262626` - Radius: `--radius-md` - Posição: bottom-right, 16px de margem - Duração padrão: 4s - Variantes: neutro, sucesso (ciano), erro (vermelho) --- ## 12. Estados interativos | Estado | Comportamento | | ------------ | -------------------------------------------------------------------------------- | | **Hover** | Opacidade fg 72% → 100%; surfaces de `ink-1` para `ink-3`; acento para `#8aecef` | | **Pressed** | Ciano escuro `#2eb8bd` + `transform: scale(0.98)` em botões; sem bounce | | **Focus** | Anel externo de 2px em `rgba(92,225,230,0.24)` | | **Disabled** | Foreground em 32% (`--lansing-fg-4`); `cursor: not-allowed` | --- ## 13. Motion | Token | Valor | | ----------------- | -------------------------------- | | `--ease-standard` | `cubic-bezier(0.22, 1, 0.36, 1)` | | `--ease-out` | `cubic-bezier(0.16, 1, 0.3, 1)` | | `--ease-in-out` | `cubic-bezier(0.65, 0, 0.35, 1)` | | `--dur-fast` | `120ms` | | `--dur-base` | `200ms` | | `--dur-slow` | `400ms` | ### Padrões de animação por contexto de interface | Situação | Animação | Duração | Easing | | ------------------------- | -------------------------------- | ------- | ----------------- | | Card entrando em viewport | `translateY(12px → 0)` + fade in | 400ms | `--ease-out` | | Modal abrindo | `translateY(12px → 0)` + fade in | 200ms | `--ease-out` | | Modal fechando | fade out | 120ms | `--ease-in-out` | | Menu / dropdown abrindo | `translateY(-4px → 0)` + fade in | 120ms | `--ease-out` | | Toast entrando | `translateX(16px → 0)` + fade in | 200ms | `--ease-out` | | Hover em botão / card | Cor de background | 200ms | `--ease-standard` | | Transição de página | fade | 200ms | `--ease-standard` | | Hero — símbolo planeta | Rotação sutil ±3deg em scroll | — | Scroll-linked | - Fades sobre slides. - Sem bounces, sem wobbles, sem parallax. - Motion scroll-linked apenas para rotação sutil do símbolo no hero. --- ## 14. Iconografia - **Set preferido: Flaticon** (set proprietário LANSING). Ícones lineares/técnicos, 24px default, `currentColor`. - Estilo visual: traço limpo, geométrico, monoline ou line-fill controlado, com cantos levemente arredondados e leitura imediata em tamanhos pequenos. - Os ícones devem parecer parte de um sistema de diagnóstico: precisos, funcionais e técnicos — não ilustrativos, fofos ou decorativos. - Usar preferencialmente ícones de interface, análise e arquitetura: alerta, métrica, seta técnica, carrinho, checkout, tracking, IA, review, grid, alvo, conexão e módulo. - Espessura de traço consistente entre ícones. Evitar misturar ícones ultra finos com ícones pesados no mesmo layout. - Ícones podem aparecer dentro de círculos finos, badges ou cards chanfrados, sempre com borda hairline e contraste controlado. - Cores: `currentColor` como padrão. Ciano para inteligência, ação, oportunidade e tecnologia; vermelho apenas para erro, fricção, alerta ou perda. - Sem emoji. Nunca — nem em copy, nem em UI. - Sem dingbats unicode (✨ ★ ✓). Usar equivalentes do set. - Tamanhos: `16 / 20 / 24 / 32 / 48px`. Default 20px em nav/labels, 24px em botões. --- ## 15. Imagens e fotografia - Fotografia monocromática com grain quando necessário. Preto e branco quente-neutro, blacks levemente comprimidos. - Sem stock photos. Sem ilustrações gradientes. Sem renders 3D fora do símbolo. - O símbolo (favicon) é a única ilustração da marca — usado exclusivamente como ícone de navegador. --- ## 16. Transparência e blur - Menus e modais: `backdrop-filter: blur(20px)` sobre `rgba(10,10,10,0.72)`. - Usar com parcimônia — nunca para painéis decorativos. --- ## 17. Do / Don't — resumo visual | ✅ Fazer | ❌ Não fazer | | -------------------------------------------------- | ------------------------------------------------- | | LANSING sempre em maiúsculo | `Lansing` ou `lansing` em qualquer contexto | | Fundo escuro `#0a0a0a` com grain como padrão | Fundos lisos sem grain | | Fundo claro `#eeeeee` com grain em contextos light | Branco puro `#ffffff` como background de marca | | Tipografia branca sobre fundo escuro | Alterar proporções ou cores do wordmark | | Ciano `#5ce1e6` como único acento em dark | Ciano base `#5ce1e6` como texto em contexto light | | Ciano `#137c80` como acento em light | Introduzir novas cores sem atualizar o sistema | | Espaçamento generoso | Sombras coloridas excessivas | | Border-radius 10px como padrão | Gradientes chamativos ou neon excessivo | | Estilo minimalista, tech, clean | Tipografias alternativas sem aprovação | | Imagens monocromáticas com grain | Stock photos, renders 3D, ilustrações gradiente | | Wordmark e favicon sempre separados | Combinar wordmark e favicon no mesmo layout | | Contraste mínimo 4.5:1 para texto | Qualquer par texto/fundo abaixo de 4.5:1 | --- _Design system da LANSING. Qualquer adição de cor, tipografia ou componente deve seguir estes tokens e ser aprovada antes de entrar em produção._