Commit.
Developer portfolio as a repository history: hero as git log --graph, projects as pull requests with a real diff, stack as package.json and services as issues. Warm dark with a syntax-highlighting palette.
- Type
- Landing page
- Theme
- Dark
- Headings
- JetBrains Mono
- Body
- IBM Plex Sans
ForClients and technical recruiters who read code; small companies looking for a developer for integrations, APIs or maintenance
Page sections01/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".
From DESIGN.md, which is in Portuguese for now.
ForClients and technical recruiters who read code; small companies looking for a developer for integrations, APIs or maintenance
Palette
The four colors that define the design and every variable in tokens.css. Click to copy.
Typography
JetBrains Mono for headings, IBM Plex Sans for body text.
HeadingsJetBrains Mono
Aag!
Commit in one line
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
BodyIBM Plex Sans
The reading font carries long paragraphs without tiring the eye.
Running text, buttons, forms and captions. Headings get the display font; this is the page's everyday voice.
0123456789 · $1,234.56 · Sep 25, 7:30 PM
Who it's for
What the AI compares with your client to pick the design.
- tech professional working solo
- portfolio with projects that can be explained in code
- brand with amber, teal or earthy tones
- lay audience that doesn't know what git is
- local personal-service business
- light, colorful brand
- large agency with many visual case studies
Tone
What makes it Commit
The signatures from DESIGN.md: what must be there when you apply it.From DESIGN.md, which is in Portuguese for now.
- 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.
House rules
Straight from DESIGN.md.From DESIGN.md, which is in Portuguese for now.
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.
Two files.
One prompt.
Commit becomes your coding agent's design system: it builds any screen with this look, not just the sample landing.
Prompt for the agent Use with AI
Read the DESIGN.md at the project root and follow its rules on every screen. Import sistema.css once at the project's entry point and use its classes and tokens instead of creating new styles. Before every UI change, reread DESIGN.md.
- 01Download the two filesDESIGN.md (the visual rules) and sistema.css (tokens, components and the design's signatures).
- 02Add them to the projectDESIGN.md at the root. sistema.css imported once at the entry point: works with React, Vue, Svelte, HTML or WordPress.
- 03Paste the prompt into your agentIt reads the rules and builds any screen (login, pricing, dashboard) with the design's look.
- 04Make the rule stickPut the prompt in your agent's project rules so every new screen follows the same colors, fonts and spacing.
Similar
Landings that share a tone or niche with Commit.
