Estilo Linear
Inspirado no LinearUm painel de comando à meia-noite: quase preto, letras brancas e precisas, e um verde-limão elétrico só no botão principal.
A Linear trata o escuro como o chão de tudo: o fundo é um quase preto, e os cartões sobem degrau a degrau em pretos um pouco mais claros, separados por fios finíssimos, não por sombra. O texto é branco e cinza-azulado, em pesos médios, nunca em negrito, com as letras um pouco mais juntas nos títulos. A única cor que chama é um verde-limão elétrico, usado num só botão por tela. O resto da graça vem da própria tela do produto, mostrada grande dentro de molduras escuras, com etiquetas pequenas e códigos em fonte de máquina de escrever.
A ProfitizeBuild não tem relação com as marcas citadas. Os nomes e os logos só identificam a inspiração.
Fundos
Cada seção do site num destes, com o texto e o acento que vão sobre ele.
Acentos e detalhes
- Verde-limão
#e4f222O único botão colorido, um por tela, e o marcador da aba ativa - Fio
#23252aAs bordas finas que separam cartões e seções, no lugar da sombra - Névoa
#d0d6e0O texto do corpo e dos botões sobre o escuro - Verde pulso
#27a644Etiquetas e contornos de apoio, nunca como botão - Íris
#6366f1O fundo das etiquetas de categoria, em pequenas doses
Tipografia
Os títulos e o corpo da Linear já são na Inter, que é gratuita. Os códigos e atalhos usam a Berkeley Mono, que é paga: aqui e no arquivo vai a JetBrains Mono no lugar.
- Título principalInter · 510O ritmo do time, num lugar só.
- Título de seçãoInter · 510Ciclos que terminam no prazo.
- SubtítuloInter · 400Do pedido à entrega, sem planilha.
- Destaque do corpoInter · 590Cada tarefa sabe de quem é.
- CorpoInter · 400Planeje as duas próximas semanas, distribua as tarefas e acompanhe tudo sem reunião.
- Código e atalhoJetBrains Mono · 400RUM-2703 · Em andamento · ⌘K
Componentes
Os botões, o campo e um cartão, desenhados no estilo da marca.
Regras
- Faça
- O fundo quase preto de ponta a ponta, com os cartões um degrau mais claros.
- Fios finos de 1 px entre as partes, no lugar da sombra.
- O verde-limão num só botão por tela; os outros botões ficam neutros.
- Títulos em peso médio, com as letras um pouco mais juntas.
- A tela do produto grande, dentro de uma moldura escura de cantos de 12 px.
- Códigos, atalhos e números de tarefa na fonte mono, pequenos.
- Evite
- Nada de negrito pesado: o mais forte é o peso médio.
- Nada de gradiente em botões, cartões ou textos.
- Nenhuma segunda cor de botão além do verde-limão.
- Nada de cantos muito redondos: 6 px nos botões, 12 px nos cartões.
- Nada de texto colorido no corpo: só branco e os cinzas-azulados.
- Nada de fotos ou ilustrações: a imagem é sempre a tela do produto.
Movimento
- Transições curtas e secas, de 150 a 200 ms, sem quicar.
- A tela do produto entra com um fade e uma leve subida, como se acendesse.
- No hover, a borda clareia um tom; nada cresce nem pula.