Marca Lysa · Logo, paleta e tipografia

Identidade

Logo

O símbolo é composto por dois "L" entrelaçados, em proporção aproximada de 1:2. Três formas de aplicação: imagotipo (símbolo + palavra), logotipo (só a palavra) e isotipo (só o símbolo). A palavra "Lysa" é composta em Nunito — a arredondada, sem "Sans" —, diferente do resto do sistema.

Lysa

Imagotipo verde sobre claro

SVG PNG

Lysa

Branco sobre verde

SVG PNG

Lysa

Branco sobre grafite

SVG PNG

Imagotipo

Símbolo + palavra. Aplicação padrão em site, apresentações e materiais institucionais.

Logotipo

Só a palavra "Lysa", em Nunito ExtraBold, quando o símbolo já aparece em outro ponto da peça.

Isotipo

Só o símbolo. Avatar, favicon, ícone de app e espaços reduzidos.

Aplicação

Regras de uso

Tamanho mínimo: 50px de largura. Abaixo disso o entrelaçamento não é legível.
Área de respiro: espaço livre em volta equivalente à metade da altura do símbolo.
Sobre fotografia: só sobre imagens de exposição baixa e escura, com a versão branca. Foto clara ou estourada é erro de aplicação.

Não fazer

Distorcer proporções
Aplicar contorno
Rotacionar
Adicionar sombra
Adicionar gradiente

Isotipo

Símbolo

O isotipo pode assumir a cor da funcionalidade que representa. Sobre fundo colorido, grafite ou foto escura, usa-se a versão branca. O ícone do aplicativo é o símbolo branco sobre ladrilho verde de cantos arredondados.

Verde sobre branco

Verde sobre #F1F1F1

Branco sobre verde

Branco sobre grafite

Ícone do aplicativo

Arquivos SVG do logo e do símbolo
Arquivo	Uso	Baixar
lysa-symbol-green	Isotipo verde — sobre branco e sobre #F1F1F1	SVG— baixar lysa-symbol-green.svg PNG— baixar lysa-symbol-green.png
lysa-symbol-white	Isotipo branco — sobre verde, grafite ou foto escura	SVG— baixar lysa-symbol-white.svg PNG— baixar lysa-symbol-white.png
lysa-symbol-app	Ícone do aplicativo (ladrilho verde de cantos arredondados)	SVG— baixar lysa-symbol-app.svg PNG— baixar lysa-symbol-app.png
lysa-logo-imagotipo	Imagotipo (símbolo + palavra) para fundo claro	SVG— baixar lysa-logo-imagotipo.svg PNG— baixar lysa-logo-imagotipo.png
lysa-logo-imagotipo-branco	Imagotipo branco para fundo verde, grafite ou foto escura	SVG— baixar lysa-logo-imagotipo-branco.svg PNG— baixar lysa-logo-imagotipo-branco.png

Nota

O símbolo já existe em SVG vetorial. Falta apenas o logotipo desenhado (a palavra "Lysa" como lettering); enquanto isso, ela é composta em Nunito ExtraBold — a arredondada, nunca Nunito Sans.

Cor

Paleta

A regra conceitual é a base de tudo: cada matiz representa uma funcionalidade única do ecossistema Lysa. Cor não é decoração, é endereçamento de módulo. O verde #5EBD3E é a cor da marca e da ação primária; as demais só aparecem para identificar módulos, tags e gráficos.

Marca e funcionalidades

Verde Lysa

Marca e ação primária

Vendas

Módulo de vendas

Fiscal

Notas e obrigações

Marketing

Campanhas e loja

Clientes

Cadastros e CRM

Cobrança

Contas e recebimentos

Estoque

Produtos e grades

Alertas

Pendências e avisos

Neutros

Black

Ink

Gray

Gray 40

Gray 25

Gray 10

White

Sistema

Aplicação semântica

Papéis semânticos das cores da Lysa e onde aplicá-los
Papel	Cor	Onde
Ação primária	#5EBD3E	Botão principal, links, foco. No máximo uma por tela.
Texto forte	#000000	Títulos
Texto corrido	#323232	Parágrafos, rótulos
Texto secundário	#717171	Dicas, legendas, metadados
Superfície afundada	#F1F1F1	Card sunken, fundo de seção
Borda sutil	#DADADA	Divisórias, contorno de card
Sucesso	#5EBD3E	Pago, conciliado, confirmado
Perigo	#FF3E50	Erro de campo, exclusão, vencido
Atenção	#FFB900	Alerta, pendência
Informação	#009CDF	Aviso neutro, agendado

Tipo

Tipografia

Duas famílias, papéis separados: o logotipo (a palavra "Lysa") é Nunito — a arredondada, sem "Sans". Todo o resto é Nunito Sans: ExtraBold nos títulos e Medium (500) como tipografia secundária, usada em todo texto corrido.

Os traços abertos e arredondados ecoam o desenho do símbolo. Nunito Sans ExtraBold (800) é a primária — títulos e display; SemiBold (600) fica só em títulos menores, botões e rótulos. Nunito Sans Medium (500) é a secundária e o peso padrão de todo texto corrido — parágrafos, legendas, notas. Itálico apenas para estrangeirismos.

H2 · 36 / 1.15 · 800

Gestão sem atrito

H3 · 28 / 1.2 · 800

Gestão sem atrito

H4 · 22 / 1.25 · 800

Gestão sem atrito

Lead · 18 / 1.5 · 500 Medium

Priorizamos a transparência em todas as nossas ações.

Body · 16 / 1.55 · 500 Medium

Tornando a gestão financeira mais eficiente, prática e lucrativa.

Small · 14 / 1.5 · 500 Medium

Dicas de campo, legendas e metadados.

XSmall · 12 / 1.45 · 500 Medium

Rodapés e notas legais.

Eyebrow · 12 · 800 · +0.06em

USANDO A PALETA DA MARCA

Regras

Caixa: sentence case em títulos, botões e rótulos. Sem CAPS LOCK em texto corrido — só no eyebrow, com tracking de 0.06em.
Texto corrido é sempre Nunito Sans Medium (500) — nunca 400 nem 600. SemiBold fica reservado a títulos, botões e rótulos.
Pesos usados: 500 texto · 600 títulos menores e ações · 800 títulos de display.
Nunito (sem "Sans") é exclusiva do logotipo. Não usar em botões, títulos ou texto corrido.

Design system

Componentes

Blocos prontos com os tokens da marca. Cada exemplo mostra o resultado e traz o código para copiar e colar.

Botões

Uma ação primária verde por tela; o resto é contorno neutro.

<button class="rounded-full bg-[var(--lysa-green)] px-5 py-3 text-sm font-extrabold text-white transition hover:opacity-90">
  Criar conta grátis
</button>

<button class="rounded-full border border-[var(--lysa-border)] px-5 py-3 text-sm font-bold text-[var(--lysa-ink)] transition hover:border-[var(--lysa-green)] hover:text-[var(--lysa-green)]">
  Falar com vendas
</button>

VendasFiscalMarketingClientesCobrança

Badges de módulo

A cor endereça o módulo: fundo a 12% e texto na cor cheia.

<span class="rounded-full px-3 py-1 text-xs font-bold"
  style="background:#009CDF1F;color:#009CDF">Vendas</span>

Estoque

128 produtos sincronizados

Card

Superfície branca, borda sutil e raio de 16px. Sunken usa #F1F1F1.

<div class="rounded-2xl border border-[var(--lysa-border)] bg-white p-5">
  <h3 class="text-lg font-extrabold text-[var(--lysa-black)]">Estoque</h3>
  <p class="mt-2 text-sm font-medium text-[var(--lysa-gray)]">
    128 produtos sincronizados
  </p>
</div>

Implementação

Variáveis CSS

Copie o bloco abaixo para começar qualquer produto ou peça digital já dentro do sistema da Lysa.

:root {
  /* Marca e funcionalidades */
  --lysa-green: #5EBD3E;
  --lysa-vendas: #009CDF;
  --lysa-fiscal: #3E71BD;
  --lysa-marketing: #C536C8;
  --lysa-clientes: #FF51B9;
  --lysa-cobranca: #FF3E50;
  --lysa-estoque: #D1834A;
  --lysa-alertas: #FFB900;

  /* Neutros */
  --lysa-black: #000000;
  --lysa-ink: #323232;
  --lysa-gray: #717171;
  --lysa-gray-40: #B6B6B6;
  --lysa-gray-25: #DADADA;
  --lysa-gray-10: #F1F1F1;
  --lysa-white: #FFFFFF;

  /* Papéis semânticos */
  --lysa-action: var(--lysa-green);
  --lysa-text-strong: var(--lysa-black);
  --lysa-text: var(--lysa-ink);
  --lysa-text-muted: var(--lysa-gray);
  --lysa-surface-sunken: var(--lysa-gray-10);
  --lysa-border: var(--lysa-gray-25);
  --lysa-success: var(--lysa-green);
  --lysa-danger: var(--lysa-cobranca);
  --lysa-warning: var(--lysa-alertas);
  --lysa-info: var(--lysa-vendas);

  /* Tipografia */
  --lysa-font-logo: "Nunito", sans-serif;      /* exclusiva do logotipo */
  --lysa-font-ui: "Nunito Sans", sans-serif;   /* interface, títulos e texto */
  --lysa-weight-text: 500;                     /* secundária — texto corrido */
  --lysa-weight-title: 600;                    /* títulos menores, botões, rótulos */
  --lysa-weight-display: 800;                  /* primária — títulos de display */
}