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
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% |
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.
Studio Solise Design System · index.html · use para revisar e testar componentes