Commit.
Portafolio de dev como historial de repositorio: hero en git log --graph, proyectos como pull requests con diff real, stack en package.json y servicios como issues. Oscuro cálido con paleta de resaltado de sintaxis.
- Tipo
- Landing page
- Tema
- Oscuro
- Títulos
- JetBrains Mono
- Texto
- IBM Plex Sans
ParaClientes y reclutadores técnicos que leen código; pequeñas empresas que buscan un dev para integración, API o mantenimiento
Secciones de la 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".
Del DESIGN.md, que por ahora está en portugués.
ParaClientes y reclutadores técnicos que leen código; pequeñas empresas que buscan un dev para integración, API o mantenimiento
Paleta
Los cuatro colores que definen el diseño y todas las variables de tokens.css. Haz clic para copiar.
Tipografía
JetBrains Mono en los títulos, IBM Plex Sans en el texto.
TítulosJetBrains Mono
Aag!
Commit en una línea
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoIBM Plex Sans
La fuente de lectura sostiene párrafos largos sin cansar.
Texto corrido, botones, formularios y leyendas. Los títulos usan la fuente destacada; esta es la del día a día.
0123456789 · $1.234,56 · 25/09 a las 19:30
Para quién es
Lo que la IA compara con el cliente para elegir el diseño.
- profesional de tecnología que trabaja solo
- portafolio con proyectos que se pueden explicar en código
- marca con ámbar, verde azulado o tonos tierra
- público no técnico que no sabe qué es git
- negocio local de servicio personal
- marca clara y colorida
- agencia grande con muchos casos visuales
Tono
Lo que lo hace Commit
Las firmas del DESIGN.md: lo que no puede faltar al aplicarlo.Del DESIGN.md, que por ahora está en portugués.
- 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.
Reglas del juego
Directo del DESIGN.md.Del DESIGN.md, que por ahora está en portugués.
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.
Dos archivos.
Un prompt.
Commit se vuelve el sistema de tu agente de código: arma cualquier pantalla con este estilo, no solo la landing de ejemplo.
Prompt para el agente Usar con IA
Lee el DESIGN.md en la raíz del proyecto y sigue sus reglas en cada pantalla. Importa sistema.css una sola vez en el punto de entrada del proyecto y usa sus clases y tokens en lugar de crear estilos nuevos. Antes de cada cambio de interfaz, vuelve a leer el DESIGN.md.
- 01Descarga los dos archivosDESIGN.md (las reglas visuales) y sistema.css (tokens, componentes y las firmas del diseño).
- 02Ponlos en el proyectoDESIGN.md en la raíz. sistema.css importado una vez en el punto de entrada: funciona en React, Vue, Svelte, HTML o WordPress.
- 03Pega el prompt en tu agenteLee las reglas y arma cualquier pantalla (login, precios, panel) con el estilo del diseño.
- 04Deja la regla fijaPon el prompt en las reglas del proyecto del agente para que cada pantalla nueva siga los mismos colores, fuentes y espaciados.
Similares
Landings con tono o nicho en común con Commit.