Commit.
Portfólio de dev como histórico de repositório: hero em git log --graph, projetos como pull requests com diff real, stack em package.json e serviços como issues. Escuro quente com paleta de realce de sintaxe.
- Tipo
- Landing page
- Tema
- Escuro
- Títulos
- JetBrains Mono
- Texto
- IBM Plex Sans
ParaClientes e recrutadores técnicos que leem código; empresas pequenas atrás de um dev para integração, API ou manutenção
Seções da página01/07prompt com badge de disponibilidade
Portfólio de dev que é o próprio histórico do repositório. Escuro quente (#12110f, nada de preto-azulado), mono JetBrains para tudo que é "código" e IBM Plex Sans para o texto corrido. Parece o terminal de quem sabe o que faz, não um template de "dev portfolio".
ParaClientes e recrutadores técnicos que leem código; empresas pequenas atrás de um dev para integração, API ou manutenção
Paleta
As quatro cores que definem o design e todas as variáveis do tokens.css. Clique para copiar.
Tipografia
JetBrains Mono nos títulos, IBM Plex Sans no texto.
TítulosJetBrains Mono
Aag!
Commit em uma linha
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoIBM Plex Sans
A fonte de leitura carrega parágrafos longos sem cansar.
Texto corrido, botões, formulários e legendas. Os títulos ficam com a fonte de destaque; aqui é o dia a dia da página.
0123456789 · R$ 1.234,56 · 25/09 às 19h30
Para quem serve
O que a skill /escolher-design compara com o cliente.
- profissional de tecnologia que trabalha sozinho
- portfólio com projetos que dá para explicar em código
- marca com âmbar, verde-água ou tons terrosos
- público leigo que não sabe o que é git
- negócio local de serviço pessoal
- marca clara e colorida
- agência grande com muitos cases visuais
Tom
O que faz ser Commit
As assinaturas do DESIGN.md: o que não pode faltar ao aplicar.
- 01
Grafo git descendo pela página: trilho main (âmbar) em
--l0, branches em--l1que saem e voltam em curva SVG (Branch). Cada seção é um commit (Cabeca: nó + hash + comando + h2). Fios acendem ao rolar (view-timeline), nós se preenchem quando entram na tela. - 02
Hero = `git log`: linha de comando com cursor piscando,
commit <hash> (HEAD -> main), Author/Date, nome enorme em duas linhas (sobrenome em âmbar) e a mensagem do commit. À direita, o histórico antigo com um mini grafo (humor seco nas mensagens). - 03
Projetos = pull requests mergeados: selo
merged, número, branch → main, problema / o que mudou, labels, diffstat (+1.204 −380e 5 quadradinhos) e um diff legível com numeração, realce e hover por linha. - 04
Stack = `package.json` com valores opinativos, ao lado de um
README.mdcom o jeito de trabalhar. - 05
Serviços = issues abertas com labels, prazo típico e "comentar";
detailscom o que ele não faz (wontfix). - 06
Contato = commit pendente: nó tracejado,
git commit -m "..."com cursor, botão de e-mail egit remote -vcom os links. Disponibilidade como badge de CI (no topo e no fim). - 07
Botões com sombra dura deslocada em verde-água (
4px 4px 0), sem sombra difusa.
Regras do jogo
Direto do DESIGN.md.
Identidade
- Fundo
#12110f(grafite quente); cartões em#1a1815, cabeçalhos de arquivo em#24211c. - Texto
#ece6da(papel envelhecido); secundário#9b9184. - Primária âmbar
#e8a33d: trilho main do grafo, hash, botão, chaves do JSON. - Destaque verde-água
#4fb3a5: branch de projetos, linhas+, badge de disponibilidade. - Coral
#e8735a(--commit-coral): linhas−, branch de issues, "problema". - Paleta é de realce de sintaxe. Nunca verde-matrix, neon, nem gradiente roxo/azul.
- Fontes: JetBrains Mono (títulos em peso 600-700, tracking bem negativo), IBM Plex Sans.
Regras
- Conteúdo fica na calha (
.commit-calha); nada invade os trilhos à esquerda. - Máximo 1 botão âmbar por tela. Texto de botão pode ser comando (
git checkout -b seu-projeto). - Texto como dev escreve: concreto, curto, com número de verdade do problema. Sem "soluções inovadoras", sem emoji, sem "código limpo e escalável".
- Diff precisa ser código plausível e legível (10-12 linhas), não lorem ipsum com cor.
- Animações próprias (fio, nó, cursor, pulso) param em
prefers-reduced-motion.
Adaptar à marca do cliente
- A marca tem cor? Troque
--d-primary(trilho main, hash, botão). Mantenha o fundo quente. - Stack diferente: edite
stack.grupos(as chaves viram linhas do JSON) e as labels dos PRs. - Menos projetos: o grafo se ajusta sozinho; com um só PR, mantenha a branch mesmo assim.
- Público que não lê código (ex.: dono de padaria)? Esse design provavelmente não é o certo.
Dois arquivos.
Um prompt.
O Commit vira o sistema do seu agente de código: ele monta qualquer tela com esta cara, não só a landing de exemplo.
Prompt para o agente
Leia o DESIGN.md na raiz do projeto e siga as regras dele em toda tela. Importe o sistema.css uma única vez no ponto de entrada do projeto e use as classes e tokens dele em vez de criar estilos novos. Antes de cada mudança de interface, releia o DESIGN.md.
- 01Baixe os dois arquivosDESIGN.md (as regras visuais) e sistema.css (tokens, componentes e as assinaturas do design).
- 02Coloque no projetoDESIGN.md na raiz. O sistema.css importado uma vez no ponto de entrada: funciona em React, Vue, Svelte, HTML ou WordPress.
- 03Cole o prompt no seu agenteEle lê as regras e passa a montar qualquer tela (login, preços, painel) com a cara do design.
- 04Deixe a regra fixaColoque o prompt nas regras do projeto do agente para toda tela nova seguir as mesmas cores, fontes e espaçamentos.
Parecidos
Landings com tom ou nicho em comum com Commit.