SLM soluções · Design System v1.1

Um sistema para construir soluções inteligentes com consistência.

Tokens, componentes e padrões visuais organizados para acelerar produto, marketing e desenvolvimento — com a identidade da SLM no centro.

Versão v1.1.0
Tema base Dark-first
Grid 8pt · 12 cols
Acessibilidade WCAG AA
02 / COR

Paleta de cores

Tokens primitivos (raw) e semânticos (uso). No Figma, crie duas Collections: Primitives e Semantic.

Brand · roxo (coração da marca)

purple/900
#4C1D95
brand.deep · pressed
purple/800
#5B21B6
purple/700
#7C3AED
brand.primary · default
purple/600
#8B5CF6
brand.light · hover
purple/500
#A78BFA
purple/700 (#7C3AED) é a cor de trabalho da marca — usada em todo botão primário, links e estados ativos. purple/600 cobre hover, purple/900 cobre pressed. Contraste com texto branco: 4.9:1 (passa WCAG AA).

Accent · ciano

cyan/500
#06B6D4
brand.accent
cyan/400
#22D3EE
cyan/300
#67E8F9

Neutros · fundos e superfícies

deep/bg
#0F0B1F
bg.primary
gray/900
#111827
bg.secondary
deep/surface
#1A1333
bg.surface
deep/elevated
#231A47
bg.elevated
deep/border
#2A2450
border.default

Texto

white
#FFFFFF
text.primary
gray/300
#D1D5DB
text.secondary
gray/400
#9CA3AF
text.muted

Feedback · estados

red/500
#EF4444
feedback.error
yellow/500
#D97706
feedback.warning
green/500
#22C55E
feedback.success
blue/500
#3B82F6
feedback.info
03 / TIPOGRAFIA

Escala tipográfica

Família principal: Space Grotesk (substitua por Gilroy em produção). Escala baseada em múltiplos consistentes de 4px.

display
48 / 700
Transforme complexidade.
h1
32 / 700
Soluções inteligentes
h2
24 / 600
Construídas com IA
h3
20 / 500
Seção do produto
body
16 / 400
A SLM soluções usa tecnologia e IA para transformar problemas complexos em soluções simples, claras e eficientes.
caption
14 / 400
Texto de suporte e legendas
small
12 / 400
METADADOS · TAGS · LABELS
04 / ESPAÇAMENTO

Escala de espaçamento

Base 8pt. Nunca use valores fora dessa escala — mantém todo o produto alinhado em pixel-perfect.

4px
spacing.xs
8px
spacing.sm
16px
spacing.md
24px
spacing.lg
32px
spacing.xl
48px
spacing.2xl
64px
spacing.3xl
80px
spacing.4xl
05 / BORDA

Border radius

Raios consistentes para manter coesão entre botões, inputs, cards e superfícies.

6px
radius.sm
10px
radius.md
16px
radius.lg
24px
radius.xl
full
radius.full
06 / SOMBRAS

Sistema de elevação

Sombras funcionais (elevação) e um focus ring acessível para inputs e botões.

shadow.sm
elevação base
shadow.md
cards
shadow.lg
modais, hero
shadow.focus
focus ring · inputs
shadow.glow existe no sistema mas é de uso pontual — reservado para CTAs especiais e momentos de marca. Não é default de hover de botão.
07 / COMPONENTE

Buttons

Três variantes de UI (primary sólido, secondary outline, ghost) + uma variante de marca restrita (brand com gradiente) para momentos específicos.

Variantes principais

variant=primary | secondary | ghost
primary
secondary
ghost
Botão primário é SÓLIDO. Cor base #7C3AED (purple/700). Cobre 95% dos casos de uso: formulários, listas, tabelas, modais, produto interno. Previsível, acessível, escala em repetição.

Estados do primary

default · hover · pressed · focus · disabled
default #7C3AED
hover #8B5CF6 (purple/600)
pressed #4C1D95 (purple/900)
focus ring 3px roxo 35%
disabled opacity 40%

Tamanhos

size=sm | md | lg
sm
md
lg

Variante de marca (uso restrito)

uso restrito
brand
Variant `brand` (com gradiente) existe para momentos onde a marca precisa brilhar: CTA do hero na landing page, primeira tela de onboarding, tela de sucesso após compra. Não usar em produto interno — em listas, formulários, tabelas, modais de confirmação, ou qualquer lugar onde o mesmo botão se repete.
08 / COMPONENTE

Inputs & Forms

Campos com estados claros: default, focus, error. Sempre com label visível.

Variações

state=default | focus | error
Usaremos para enviar o acesso.
Estado: focus
A senha precisa ter ao menos 8 caracteres.
09 / COMPONENTE

Alerts & Feedback

Quatro tipos: error, warning, success, info. Todos seguem os tokens semânticos de feedback.

!
Falha ao processar a operação
Verifique sua conexão e tente novamente em alguns segundos.
!
Você está próximo do limite
Restam 12% do seu volume mensal de processamento IA.
✓
Conexão estabelecida
Seus dados foram sincronizados com sucesso.
i
Nova versão disponível
O dashboard foi atualizado com novos gráficos de performance.
10 / COMPONENTE

Cards

Blocos modulares para dashboards, KPIs e conteúdo. Sempre com padding 24px e radius lg (16px).

Receita mensal
R$ 248.5k
+12.4% vs mês anterior — projeção IA positiva para o fechamento.
Processamento IA
1.2M ops
Operações executadas com automação inteligente no período.
Insight do dia
Otimize o fluxo de aprovação
A IA identificou 3 gargalos recorrentes que podem ser automatizados.
Card com gradiente sutil (o terceiro acima) é um padrão válido para destacar conteúdo especial (insight, premium, recomendação da IA) — porque é card, não controle interativo repetitivo.
12 / MARCA

Expressão de marca · gradiente

O gradiente é a assinatura visual da SLM. Ele tem lugar — mas lugares específicos. Aqui está o mapa de onde usar.

Gradiente oficial

GRADIENT / PRIMARY
linear-gradient(135deg, #4C1D95 → #7C3AED → #06B6D4)

Exemplo · CTA de hero

LANDING · PRIMEIRA DOBRA
Transforme complexidade em soluções inteligentes

Onde usar o gradiente

✓ Lugares certos
  • CTA principal do hero na landing
  • Logo e ícone da marca
  • Títulos de impacto (background-clip: text)
  • Primeira tela de onboarding
  • Tela de sucesso / conquista
  • Gráficos de destaque no dashboard
  • Cards "premium" ou "insight IA"
  • Background decorativo do hero
✗ Lugares errados
  • Botões de produto interno
  • Botões em listas, tabelas, formulários
  • Inputs e campos de formulário
  • Navegação, menus, sidebars
  • Qualquer componente que se repete
  • Ações destrutivas (excluir, cancelar)
  • Estados de sistema (error, warning)
Regra mental: se o elemento aparece mais de 2 vezes na mesma tela, gradiente é errado. Gradiente é momento, não linguagem.
13 / DIRETRIZES

Do's & Don'ts

Regras práticas para manter a identidade da SLM coerente em qualquer aplicação.

✓ Faça
  • Botão primário sempre sólido (#7C3AED)
  • Gradiente só em momentos de marca
  • Use fundo escuro como base
  • Mantenha espaçamento amplo e hierarquia clara
  • Priorize legibilidade: contraste mínimo AA
  • Use tokens sempre — nunca valores hardcoded
  • Consistência > criatividade isolada
✗ Evite
  • Gradiente em botões cotidianos
  • Gradiente em inputs, menus ou repetições
  • Misturar cores fora da paleta oficial
  • Usar fundo claro sem adaptar o logo
  • Aplicar sombras pesadas demais
  • Quebrar o grid de 8pt
  • Empilhar efeitos (glow + shadow + gradient)

Tom de voz em ação

✓ Assim sim
  • "Soluções que funcionam"
  • "Menos complexidade, mais resultado"
  • "Decisão inteligente, resultado real"
  • "Tecnologia que simplifica"
✗ Assim não
  • "Solução inovadora disruptiva de ponta"
  • "Tecnologia revolucionária de última geração"
  • "Transformação digital completa 360º"
  • "Sinergia aplicada à jornada do cliente"
construído com IA

SLM soluções

Design System v1.1 · Transforme complexidade em solução.