Preto#0A0C00
Base escura e texto principal.
RGB 10 / 12 / 0--ds-inkAprovadoRevisão da seçãoPrecisa de ajustes3 atendidos · 1 a ajustar · 1 a revisar
O que já existe, o que precisa melhorar e o que ainda merece uma avaliação. Cada estado se refere apenas ao critério abaixo; não é aprovação da seção inteira.
- Atende ao critérioA paleta tem papéis definidos e valores reutilizáveis.
Valores e papéis das cores estão no catálogo e nas exportações de tokens.
Ver material relacionado ↗ - Precisa de ajustesAs páginas usam os mesmos papéis de cor com consistência.
Inventariar aliases de cor legados e migrar valores locais para tokens compartilhados.
- Aguardando revisãoTextos e controles são legíveis em cada combinação prevista.
Razões de pares opacos calculadas no catálogo e em colors.json. Tamanhos finais de texto, foco, estados, fotos e limites reais dos componentes ainda precisam de revisão.
- Atende ao critérioHierarquia, combinações e limites de produção das cores estão documentados.
Paletas de marca e funcionais, receitas piloto, verificador de contraste, verde exclusivo do logo e orientação para impressão compartilham o registro da organização. CMYK e Pantone ainda não foram definidos.
Ler regras de cores ↗ - Atende ao critérioReceitas de gradientes, exemplos de uso e exportações reutilizáveis estão documentados.
Seis receitas piloto compartilham paradas, opacidade e CSS no catálogo, JSON, tokens e guia para IA. Composições finais e provas impressas ainda precisam de revisão.
Ver receitas de gradientes ↗Ler especificações de gradientes ↗
02 / Cores
O lime chama. A base sustenta.
Quatro cores de marca, cada uma com uma função. Preto e branco organizam a leitura, grafite acrescenta profundidade e lime destaca o que importa.
A paleta que nos identifica.
Use os valores exatos. HEX e RGB descrevem a mesma cor em sRGB; os tokens mantêm essa escolha consistente no produto.
Branco#FFFFFF
Superfícies claras e texto sobre fundos escuros.
RGB 255 / 255 / 255--ds-whiteAprovadoLime#E3FF04
Ações principais, seleção e destaques da marca.
RGB 227 / 255 / 4--ds-limeAprovadoGrafite#252525
Superfície escura de apoio.
RGB 37 / 37 / 37--ds-supportAprovadoTons que ajudam a interface.
Papel, texto secundário, divisores e erro têm funções específicas. Estão em piloto e não ampliam a paleta de campanhas.
Papel#F4F4F0
Fundo de trabalho do catálogo.
RGB 244 / 244 / 240--ds-paperPilotoTexto secundário#60605A
Texto auxiliar sobre superfícies claras.
RGB 96 / 96 / 90--ds-mutedPilotoDivisor#D9D9D1
Separação visual; não usar como texto.
RGB 217 / 217 / 209--ds-linePilotoErro#A12622
Mensagem e contorno de erro, acompanhados de texto.
RGB 161 / 38 / 34--ds-errorPilotoA intensidade acompanha a peça.
Escolha uma direção para ver como a paleta pode se distribuir. As proporções são pontos de partida do piloto, não uma fórmula obrigatória para cada tela.
Um próximo passo bem claro.
Conhecer o serviçoClareza no dia a dia
Páginas de serviço, documentos e formulários. A base clara dá espaço à leitura e o lime aponta o próximo passo.
- Branco70%
- Preto20%
- Lime10%
As barras indicam a intenção de equilíbrio entre áreas de cor, sem contar fotografias. As prévias são composições ilustrativas, não medições desses percentuais.
Receitas piloto · sRGB digital
Um pouco de luz. Um propósito claro.
Gradientes adicionam profundidade à paleta 6am. Comece com superfícies sólidas e escolha uma destas seis receitas quando uma transição ajudar a composição.
Gradientes lineares
Duas cores, uma direção. Mantenha as transições amplas e simples.
--ds-gradient-first-light
Primeira luz
O lime se abre em branco. Use em uma mensagem curta de campanha, capa ou divisória editorial.
Use letras ink e o logo para fundo claro. Mantenha a mensagem curta e confira a composição final.
Paradas de cor
1 · 120°
- #E3FF04 · 0% · 100% opacidade
- #FFFFFF · 100% · 100% opacidade
Base: #FFFFFF
background: linear-gradient(120deg, #E3FF04 0%, #FFFFFF 100%), #FFFFFF;--ds-gradient-quiet-depth
Profundidade suave
O grafite se transforma em ink. Um fundo discreto para aberturas, encerramentos e histórias de serviços.
Use letras brancas e o logo para fundo escuro. Mantenha o lime como um pequeno destaque sólido.
Paradas de cor
1 · 135°
- #252525 · 0% · 100% opacidade
- #0A0C00 · 100% · 100% opacidade
Base: #0A0C00
background: linear-gradient(135deg, #252525 0%, #0A0C00 100%), #0A0C00;Campos de luz
Gradientes radiais em camadas criam profundidade em duas dimensões. Use um campo por composição e dê à mensagem uma superfície sólida própria.
--ds-gradient-lime-field
Campo lime
Dois focos de lime sobre branco criam um fundo suave e aberto para peças de campanha.
Mantenha texto e logo completo em um painel sólido branco ou ink. Deixe o campo de luz como decoração.
Paradas de cor
1 · ellipse · 15% / 20%
- #E3FF04 · 0% · 100% opacidade
- #E3FF04 · 75% · 0% opacidade
2 · ellipse · 90% / 90%
- #E3FF04 · 0% · 45% opacidade
- #E3FF04 · 65% · 0% opacidade
Base: #FFFFFF
background: radial-gradient(ellipse at 15% 20%, #E3FF04 0%, rgba(227, 255, 4, 0) 75%), radial-gradient(ellipse at 90% 90%, rgba(227, 255, 4, 0.45) 0%, rgba(227, 255, 4, 0) 65%), #FFFFFF;--ds-gradient-night-glow
Brilho noturno
Um brilho lime encontra o grafite sobre ink. Use em uma única capa expressiva ou transição.
Coloque texto e logo completo em um painel opaco. Não deduza o contraste apenas pelo fundo escuro.
Paradas de cor
1 · ellipse · 90% / 15%
- #E3FF04 · 0% · 55% opacidade
- #E3FF04 · 65% · 0% opacidade
2 · ellipse · 10% / 90%
- #252525 · 0% · 100% opacidade
- #252525 · 70% · 0% opacidade
Base: #0A0C00
background: radial-gradient(ellipse at 90% 15%, rgba(227, 255, 4, 0.55) 0%, rgba(227, 255, 4, 0) 65%), radial-gradient(ellipse at 10% 90%, #252525 0%, rgba(37, 37, 37, 0) 70%), #0A0C00;Espaço para uma boa ideia.
Dê espaço à mensagem. Mantenha o trabalho à vista.Sobreposições para imagens
Use uma transição de opacidade para abrir espaço para a mensagem. Ela fica acima da imagem; não é um filtro de cor para toda a cena.
--ds-gradient-ink-overlay
Sobreposição ink
Uma borda sólida ink se dissolve na imagem. Use quando texto claro precisa de uma área tranquila ao lado do assunto.
Coloque texto branco no primeiro quarto opaco ou em um painel ink sólido. Preserve rostos e detalhes importantes fora da transição.
Paradas de cor
1 · 90°
- #0A0C00 · 0% · 100% opacidade
- #0A0C00 · 25% · 100% opacidade
- #0A0C00 · 70% · 0% opacidade
Base: Transparente
background: linear-gradient(90deg, #0A0C00 0%, #0A0C00 25%, rgba(10, 12, 0, 0) 70%);--ds-gradient-white-overlay
Sobreposição branca
Uma borda branca sólida se abre para a imagem. Use em uma composição leve com letras escuras.
Coloque texto ink no primeiro quarto opaco ou em um painel branco sólido. Não apague pele, produtos ou evidências.
Paradas de cor
1 · 90°
- #FFFFFF · 0% · 100% opacidade
- #FFFFFF · 25% · 100% opacidade
- #FFFFFF · 70% · 0% opacidade
Base: Transparente
background: linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 25%, rgba(255, 255, 255, 0) 70%);Fotografia, gradiente, mensagem.
Uma transição gradual abre espaço para a mensagem e mantém a profissional e seu trabalho à vista. Escolha uma composição clara ou escura para ver o logo correspondente.
Bom trabalho.
Em foco.
Espaço para as pessoas por trás de cada boa ideia.
Da esquerda para a direita · opacidade
0% · 100%36% · 100%65% · 0%
Esta composição fotográfica estende a área opaca até 36% e termina a transição em 65%. É uma receita de layout separada dos tokens básicos de sobreposição.
01Mantenha a mensagem e o logo na área opaca. A transição começa depois da área de leitura, afastada do rosto.
02Leve a sobreposição até a transparência; preserve os tons naturais da pele, as mãos e o objeto em produção. Esta é uma sobreposição localizada, não um tratamento duotone.
03Mantenha as proporções originais do logo e uma margem livre ao redor. Use o arquivo com letras brancas sobre ink e o arquivo com letras escuras sobre branco.
04Em layouts estreitos, coloque a mensagem em uma superfície sólida abaixo da foto. Revise o corte e o contraste ao trocar a imagem.
Abaixo de 640 px de largura disponível, a mensagem passa para baixo da fotografia.
Receita da composição · HTML + CSS
<style>
.sixam-photo-composition { container-type: inline-size; }
.sixam-photo-scene { position: relative; aspect-ratio: 16/10; background: #0A0C00; color: #FFFFFF; overflow: hidden; }
.sixam-photo-composition .sixam-photo-scene > img { display: block; position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: 75% 50%; }
.sixam-photo-fade { position: absolute; inset: 0; background: linear-gradient(90deg, #0A0C00 0%, #0A0C00 36%, rgba(10, 12, 0, 0) 65%); }
.sixam-photo-message { position: absolute; left: 6%; width: 28%; top: 10%; bottom: 10%; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 24px; }
.sixam-photo-message h2 { margin: 0; white-space: pre-line; font: 800 clamp(32px, 5cqw, 64px)/1.05 var(--6am-font-display, sans-serif); }
.sixam-photo-message p { margin: 16px 0 0; font: 16px/1.5 sans-serif; }
.sixam-photo-message img { width: 120px; height: auto; }
@container (max-width: 640px) {
.sixam-photo-scene { aspect-ratio: auto; }
.sixam-photo-composition .sixam-photo-scene > img { position: relative; aspect-ratio: 3/2; height: auto; }
.sixam-photo-fade { bottom: auto; width: 100%; aspect-ratio: 3/2; }
.sixam-photo-message { position: relative; inset: auto; width: auto; padding: 32px; }
}
</style>
<figure class="sixam-photo-composition">
<div class="sixam-photo-scene">
<img src="/assets/design/6am/photography/ceramics-workshop-ai.png" alt="Cena gerada por IA de uma artesã examinando uma tigela de cerâmica em um ateliê com luz natural." width="1536" height="1024">
<div class="sixam-photo-fade" aria-hidden="true"></div>
<div class="sixam-photo-message">
<div><h2>Bom trabalho.
Em foco.</h2><p>Espaço para as pessoas por trás de cada boa ideia.</p></div>
<img src="/assets/img/logo/logo-6am-white.svg" width="120" height="24" alt="6am">
</div>
</div>
<figcaption>Cena demonstrativa gerada por IA. Não retrata cliente, equipe ou projeto real da 6am.</figcaption>
</figure>Cada efeito no seu lugar.
- Use somente estas receitas e suas paradas publicadas. Tons interpolados pertencem ao efeito, não são novos tokens da marca.
- Mantenha logos, ícones, textos, botões, formulários e gráficos em cores sólidas. Os estilos de ilustração mantêm suas regras de cor chapada.
- Não combine vários gradientes, adicione arco-íris ou anime o campo. Deixe um tratamento conduzir a composição.
- Meça o contraste atrás de cada área de texto na composição final. Conferir apenas as cores inicial e final não basta, principalmente sobre imagens.
- Use um painel opaco quando houver dúvida de contraste. Confira recortes mobile e arquivos exportados; impressão ainda exige prova física.
Receitas reutilizáveis
Copie um fundo CSS completo ou um briefing para sua IA. O JSON inclui camadas, paradas, opacidade e CSS resolvido; o download CSS inclui as seis variáveis.
Combinações para começar bem.
A cor do texto depende do fundo. Compare pares prontos e confira outras combinações no verificador abaixo.
19.71:1 · Adequado para texto comum
17.43:1 · Adequado para texto comum
15.33:1 · Adequado para texto comum
5.74:1 · Adequado para texto comum
1.13:1 · Evite para texto
1.29:1 · Evite para texto
Confira antes de publicar.
Para texto comum, use pelo menos 4,5:1. Texto grande exige 3:1: pelo menos 24 px, ou 18,67 px em negrito. Elementos visuais necessários para reconhecer controles e informações precisam de 3:1 contra as cores adjacentes relevantes.
17.43:1 Razão de contraste
- Texto comum · AAAtende
- Texto grande · AAAtende
- Elementos essenciais · 3:1Atende
Cálculo para duas cores sRGB opacas e sólidas. Transparências, fotos, gradientes, foco e estados precisam de verificação no contexto final. O resultado de um par não certifica a acessibilidade da página.
Dois verdes. Funções diferentes.
O lime #E3FF04 é a cor de destaque da interface e das peças. O verde #C4E86B pertence aos arquivos existentes do logo e do símbolo. Ele não é uma segunda cor de destaque para botões.
Lime da marca#E3FF04
Verde do arquivo do logo · #C4E86BUse os arquivos da marca sem recolorir. Na variante para fundo lime, os dois pontos são brancos e as letras pretas. Uma exceção de cor do logo não vira regra para textos de interface.
Ver variantes e downloadsA informação não depende só da cor.
A cor reforça uma mensagem que já está clara em palavras, símbolos ou posição. Vermelho não deve ser a única pista de erro; lime não significa automaticamente sucesso.
E-mail
name@
Informe um e-mail válido para continuar.
Site
24
Indicação
16
Social
8
Rótulos, valores e contornos continuam explicando o gráfico sem depender do lime. Estes números são fictícios.
Cor com intenção, sem efeitos por padrão.
- Comece com superfícies sólidas. Quando a composição pedir profundidade, use as receitas piloto de gradientes desta página. Novas escalas de tons ainda não estão definidas.
- Em fotos, preserve as cores naturais de pessoas e materiais. Ajuste o fundo da mensagem sem pintar toda a cena de lime.
- Use lime para uma prioridade clara. Em uma sequência de peças, alterne momentos expressivos e superfícies neutras.
- O tom de divisor é decorativo. Para limites essenciais de campos e controles, escolha uma cor com contraste suficiente.
A tela é uma referência. O material é outra etapa.
Digital · definido
HEX e RGB em sRGB são os valores de referência. Preserve o perfil na exportação e verifique o resultado no dispositivo de destino.
HEX · RGB · sRGBImpressão · a definir
Ainda não temos equivalências CMYK ou Pantone aprovadas. Não converta o lime automaticamente e publique o resultado como oficial. O brilho de tela pode mudar bastante no papel.
- Defina papel, acabamento, processo e perfil de cor com o fornecedor.
- Compare uma prova física com a intenção da marca e registre os ajustes.
- Registre a fórmula validada e o material no sistema antes de reutilizar.
A mesma paleta para pessoas e IAs.
As quatro cores de marca permanecem aprovadas. Proporções, tons funcionais e orientações de produção estão em piloto; equivalências de impressão continuam pendentes.