Paleta de Cores
Preta
#0c0c0c · Elementos gráficos e texto principal
Texto
#282828 · Corpo de texto e parágrafos
Texto Secundário
#898989 · Labels, hints, metadados
Off Bege
#c1beb0 · Blocos decorativos em capas
Cinza
#e3e5e1 · Bordas, separadores, blocos capa
Off White
#f8f9f4 · Blocos decorativos no miolo
Branco
#ffffff · Fundo de todo material · sempre
Tipografia
Identidade visual
Display · Minion Pro Italic · 56px · Uso: hero, capas
Naming e estratégia de marca
Título H1 · Minion Pro Italic · 40px · Uso: título principal de página
Processo criativo
Título H2 · Paralucent ExtraLight · 28px · Uso: título de seção
Sobre o projeto
Título H3 · Paralucent ExtraLight · 20px · Uso: subtítulo
Identidade Visual · Naming · Estratégia
Label · Paralucent ExtraLight · CAPS · letter-spacing 0.25em · Uso: categorias, metadados
O Studio Solise atua no desenvolvimento de identidades visuais com foco em marcas que precisam comunicar elegância e autoridade sem abrir mão da leveza.
Corpo · Paralucent Light · 14px · line-height 1.7 · Uso: texto corrido
São Paulo · 2025 · Todos os direitos reservados
Texto secundário · Paralucent ExtraLight · 12px · Uso: rodapés, datas, hints
Regra de separador
Certo
São Paulo · 2025 · Studio Solise
Errado
São Paulo — 2025 — Studio Solise
Usar sempre · (ponto médio U+00B7). Nunca usar — (travessão).
Botões
Primário · ação principal
Secundário · ação alternativa
Fantasma · ação discreta
Campos de Formulário
Normal
Foco (borda preta)
Este campo é obrigatório
Erro
Desativado
Textarea
Elementos Gráficos da Marca
Barra | · como marcador de lista
Barra divisória centralizada
Seção anterior
Próxima seção
Blocos decorativos retangulares
Off White · miolo
#f8f9f4
Cinza · capa e fechamento
#e3e5e1
Off Bege · capa e fechamento
#c1beb0
Cards
Identidade Visual
Marca completa com alma
Criamos marcas que comunicam quem você é antes mesmo de você falar. Da estratégia ao sistema visual.
Naming
O nome certo muda tudo
Processo estratégico que vai além da criatividade · encontramos um nome com propósito, som e memória.
Espaçamentos · Base 4px
4px
8px
12px
16px
24px
32px
48px
64px
96px
Regra: todo espaçamento é múltiplo de 4. Nunca use 13px, 17px, 22px. Isso garante que tudo "encaixa" visualmente · como grade de caderno.
Checkbox · Radio
Checkbox · múltipla escolha
Radio · escolha única
Horizontal · opções lado a lado
Blocos Retangulares Decorativos
Tamanhos disponíveis
Pequeno · 100×60
detalhes, cantos
Médio · 180×110
uso padrão no miolo
Grande · 280×170
capas e impacto
Contexto de uso · adicione position:relative no pai
Canto superior direito
Serviços
O que fazemos
.bloco .bloco-m .bloco-cinza .bloco-topo-dir
Canto inferior esquerdo
Processo
Como trabalhamos
.bloco .bloco-m .bloco-offwhite .bloco-fundo-esq
Capa · bloco grande bege
Studio Solise
Proposta de Identidade
.bloco .bloco-g .bloco-bege .bloco-fundo-dir
Cortado pela borda
Sobre
O estúdio que transforma intenção em identidade.
.bloco-cortado-dir · metade visível
Regras obrigatórias
O pai deve ter
position: relative e
overflow: hidden.
Máximo 2 blocos por página. No miolo: somente off-white.
Em capas e fechamento: pode usar cinza ou bege.
Logo · Regras de Uso
Versões disponíveis
Completo · logo + tagline
Capas e páginas de fechamento
Nome · só SOLISE
Cabeçalhos, rodapés, materiais compactos
Versão cinza · fundo escuro
Fundos escuros ou hierarquia secundária
Nome cinza · fundo escuro
Rodapés em fundo escuro
Tamanhos por dispositivo
| Dispositivo | Mínimo | Máximo | % da largura |
|---|---|---|---|
| Desktop (1280px+) | 120px | 180px | 10–14% |
| Laptop (1024px) | 120px | 180px | 12–16% |
| Tablet (768px) | 100px | 150px | 16–22% |
| Mobile (480px) | 80px | 130px | 20–30% |
| Mobile pequeno (375px) | 72px | 120px | 25–35% |
Logo vertical · girado 90° · canto inferior direito
.logo-vertical-dir · girado 90° anti-horário · o pai deve ter position: relative e overflow: hidden
Simulação interativa · tamanho do logo por dispositivo
Conteúdo da página
Regras obrigatórias
Sempre manter proporção · nunca distorcer. Espaço de respiro ao redor igual à altura da letra S do logo.
Nunca sobre fundos coloridos sem área limpa. Nunca abaixo do tamanho mínimo.
Em fundo claro: versão preta. Em fundo escuro: versão cinza.
Margens e Layout Responsivo
Margens de página por dispositivo
Desktop (1280px+)
80px cada lado · var(--margem-desktop)
Laptop (1024px)
60px cada lado · var(--margem-laptop)
Tablet (768px)
40px cada lado · var(--margem-tablet)
Mobile (480px)
24px cada lado · var(--margem-mobile)
Containers disponíveis
.container
max 1200px · uso geral
.container-estreito
max 720px · textos longos, formulários
.container-largo
max 1440px · conteúdo amplo
Seções · espaçamento vertical
.secao
96px topo e base · uso padrão
.secao-compacta
48px topo e base · quando precisar comprimir
.secao-generosa
144px topo e base · hero, capas, respiro
Em tablet: reduz 33%. Em mobile: reduz 50%. Automático.
Citações e Depoimentos
Citação com barra vertical
A identidade visual não é só um logo · é a linguagem visual que a sua marca usa para se comunicar com o mundo.
blockquote.citacao / .citacao-texto / .citacao-autor
Depoimento de cliente
"Trabalhar com o Studio Solise foi transformador. A marca ficou exatamente o que eu precisava · sofisticada, com personalidade e pronta para crescer."
Ana Carvalho
Ateliê Bloom · Moda
.depoimento / .depoimento-texto / .depoimento-cliente / .depoimento-nome / .depoimento-empresa
Listas
Ponto médio · padrão
- Identidade visual completa
- Naming estratégico
- Manual de marca
- Aplicações e papelaria
ul.lista
Barra vertical · estilo Solise
ul.lista.lista-barra
Numerada com itálico
- Briefing e imersão
- Pesquisa e referências
- Conceito criativo
- Desenvolvimento visual
- Apresentação e refinamento
ol.lista-numerada
Tabelas
Tabela padrão
| Serviço | Descrição | Prazo |
|---|---|---|
| Identidade Visual | Logo, paleta, tipografia e manual de marca | 4–6 semanas |
| Naming | Criação estratégica de nome para a marca | 2–3 semanas |
| Apresentação | Deck completo com identidade aplicada | 1–2 semanas |
table.tabela
Tabela de precificação
| Item | Descrição | Valor |
|---|---|---|
| Identidade Visual Completa | Logo, sistema visual, manual e aplicações | R$ 4.800 |
| Naming Estratégico | Pesquisa, criação e validação de nome | R$ 2.400 |
| Apresentação Institucional | Deck com identidade aplicada, até 20 slides | R$ 1.800 |
| Total do projeto | R$ 9.000 | |
table.tabela.tabela-preco / tr.total
Tags e Badges
Variantes de cor
Padrão
Preta
Cinza
Bege
Status de projeto
Em andamento
Entregue
Aguardando cliente
Pausado
Categorias de serviço
Identidade Visual
Naming
Branding
Apresentação
Site
Landing Page
Alertas e Feedback
Informação
O prazo de aprovação começa a contar a partir do envio da proposta.
Enviado com sucesso
Sua mensagem foi recebida. Retornaremos em até 2 dias úteis.
Atenção
Este projeto requer aprovação do cliente antes de avançar para a próxima etapa.
Erro no envio
Não foi possível processar o formulário. Verifique os campos e tente novamente.
.alerta + .alerta-info / .alerta-sucesso / .alerta-atencao / .alerta-erro
Cabeçalho de Seção
Padrão · alinhado à esquerda
Nossos serviços
O que fazemos
Criamos marcas com estratégia, propósito e sistema visual completo · para que sua identidade comunique quem você é antes mesmo de você falar.
.cabecalho-secao / .cabecalho-label / .cabecalho-titulo / .cabecalho-descricao
Centralizado
Processo criativo
Como trabalhamos
Cada projeto começa com escuta profunda e termina com uma marca que carrega intenção em cada detalhe.
.cabecalho-centro
Hero · Capa
Capa clara · com bloco bege e logo vertical
.hero .pagina-com-bloco + .hero-conteudo + logo-completo-preto vertical · regra: com bloco bege, sempre usar logo-preto (nunca logo-bege ou logo-cinza — some sobre o fundo)
Capa escura
.hero-escuro · fundo preto, bloco com opacidade, logo cinza
Processo · Linha do Tempo
Etapas do projeto
01
Briefing e imersão
Entendemos o negócio, o público, os concorrentes e o que torna a sua marca única.
02
Conceito e referências
Construímos a direção criativa com moodboard e posicionamento visual.
03
Desenvolvimento
Criamos o logo, o sistema de cores, tipografia e todos os elementos da identidade.
04
Entrega e manual
Entregamos os arquivos finais e o manual de uso da marca.
Com tags de status
01
Briefing
Concluído
Reunião de alinhamento realizada em 10/04.
02
Conceito
Em andamento
Previsão de apresentação: 20/04.
03
Desenvolvimento
A iniciar
Início após aprovação do conceito.
.processo / .processo-etapa / .processo-numero / .processo-numero-valor / .processo-numero-linha / .processo-conteudo / .processo-titulo / .processo-descricao
Navegação · Header
Nav clara · fundo branco
.nav-wrapper → .nav → logo-completo-preto (110px) + ul.nav-links → li → a.nav-link
Nav escura · fundo preto
.nav-wrapper-escura + logo-completo-cinza (110px)
Rodapé
Perguntas Frequentes · FAQ · Sanfona
O projeto inclui criação do logo e suas variações, paleta de cores, tipografia institucional, elementos gráficos da marca, manual de identidade visual e arquivos finais em todos os formatos necessários.
O prazo varia conforme a complexidade do projeto. Uma identidade visual completa leva de 4 a 6 semanas. Projetos de naming levam de 2 a 3 semanas. Apresentações institucionais de 1 a 2 semanas.
Trabalhamos com apresentações por etapa. Cada fase tem rodadas de feedback incluídas, garantindo que o resultado final seja exatamente o que você imaginou.
Sim! Atendemos clientes em todo o Brasil e também no exterior. Todo o processo acontece de forma remota, com reuniões por videochamada e comunicação pelo WhatsApp.
.accordion → .accordion-item (.aberto) → .accordion-gatilho + .accordion-conteudo
Indicador de Progresso
Barra simples
25% · Briefing
60% · Desenvolvimento
100% · Concluído
.progresso → .progresso-barra (width em %)
Por etapas
Briefing
Conceito
Desenvolvimento
Revisão
Entrega
.progresso-etapas → .progresso-etapa-item (.concluido / .ativo)
Modo Escuro · .tema-escuro
Identidade visual
Sua marca no modo escuro
Todos os componentes se adaptam automaticamente ao adicionar .tema-escuro no contêiner pai.
Tag
Destaque
Status
Identidade Visual
Marca completa com alma
Da estratégia ao sistema visual completo.
A identidade visual é a linguagem silenciosa da sua marca.
Adicione .tema-escuro em qualquer container · seção, card, página inteira.
Ícones · Phosphor Thin
Ação · Interface
Arquivos
Comunicação · Contato
Redes Sociais
Branding · Serviços
Status · Feedback
Tamanhos
xs · 14px
sm · 16px
md · 20px
lg · 24px
xl · 32px
.icone-btn[data-tooltip] · .icone / .icone-sm / .icone-lg / .icone-xl · tooltip: CSS puro via data-tooltip · Phosphor Icons Thin · MIT License
Instagram · Cards
Formato principal: 4:5 · 1080×1350px · Demo na vitrine a 240px de largura · Stories/Reels 9:16 a 152px
Feed · Retrato 4:5 — Carrossel
Amazônia · 2028
A marca que a
01 / 07
A marca que a
Amazônia já tinha.
A primeira identidade visual oficial de um território com 25 mil km de história.
→ Arrasta pro lado
O território
"60% do Brasil.
"60% do Brasil.
28 milhões de
pessoas.
Nenhuma marca."
Acre, Amazonas, Amapá e mais seis estados comunicavam sozinhos um território imenso, sem voz coletiva.
02 / 07
A tipografia
O rio virou
O rio virou
fonte tipográfica.
04 / 07
O sistema visual
Além do logo,
Além do logo,
uma linguagem
viva.
01
Marca viva e adaptável
Paleta e elementos se ajustam por contexto
02
Alfabeto próprio
Certificador para produtos e experiências
03
Plataforma econômica
Turismo, bioeconomia e negócios sustentáveis
06 / 07
Branding com propósito
Quando o território
Quando o território
vira linguagem,
a marca já nasce
verdadeira.
Acompanhe conteúdos sobre marca, identidade visual e cultura criativa.
Feed · Retrato 4:5 — Posts avulsos
Depoimento
"O processo foi incrível. Finalmente tenho uma marca que me representa de verdade."
C
Camila Rocha
Coach de carreira
Serviço
Identidade
Identidade
Visual
Logo · paleta · tipografia · papelaria · manual de marca.
02 / 04
Naming
Encontre o nome
Studio Solise · 2025
01 / 04
Encontre o nome
certo para
a sua marca
Studio Solise · 2025
Stories · Reels 9:16
Reels
Como construir
▶ Assista até o final
Como construir
uma marca
inesquecível
▶ Assista até o final
Stories · conteúdo
Vagas abertas
Maio · 2025
Identidade visual · naming · estratégia de marca.
Link na bio
.ig-card · .ig-retrato / .ig-quadrado / .ig-stories · barra assinatura centralizada · bloco cinza nos cantos · logo-vertical ou logo-rodape · lista-barra e lista-num
Studio Solise Design System · index.html · use para revisar e testar componentes