Commit.
Portfolio de dev façon historique de dépôt : hero en git log --graph, projets en pull requests avec vrai diff, stack dans package.json et services en issues. Sombre et chaud avec palette de coloration syntaxique.
- Type
- Landing page
- Thème
- Sombre
- Titres
- JetBrains Mono
- Texte
- IBM Plex Sans
PourClients et recruteurs techniques qui lisent du code ; petites entreprises qui cherchent un dev pour intégration, API ou maintenance
Sections de la page01/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".
Extrait du DESIGN.md, en portugais pour l'instant.
PourClients et recruteurs techniques qui lisent du code ; petites entreprises qui cherchent un dev pour intégration, API ou maintenance
Palette
Les quatre couleurs qui définissent le design et toutes les variables de tokens.css. Cliquez pour copier.
Typographie
JetBrains Mono pour les titres, IBM Plex Sans pour le texte.
TitresJetBrains Mono
Aag!
Commit en une ligne
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TexteIBM Plex Sans
La police de lecture porte les longs paragraphes sans fatiguer.
Texte courant, boutons, formulaires et légendes. Les titres prennent la police d'affichage ; celle-ci fait le quotidien de la page.
0123456789 · 1 234,56 € · 25/09 à 19h30
Pour qui
Ce que l'IA compare avec le client pour choisir le design.
- professionnel de la tech qui travaille seul
- portfolio avec projets explicables en code
- marque avec ambre, vert d'eau ou tons terreux
- public non technique qui ne sait pas ce qu'est git
- commerce local de services à la personne
- marque claire et colorée
- grande agence avec beaucoup d'études de cas visuelles
Ton
Ce qui fait Commit
Les signatures du DESIGN.md : ce qui ne doit pas manquer à l'application.Extrait du DESIGN.md, en portugais pour l'instant.
- 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.
Règles du jeu
Directement du DESIGN.md.Extrait du DESIGN.md, en portugais pour l'instant.
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.
Deux fichiers.
Un prompt.
Commit devient le design system de votre agent de code : il construit n'importe quel écran avec ce style, pas seulement la landing d'exemple.
Prompt pour l'agent Utiliser avec l'IA
Lis le DESIGN.md à la racine du projet et suis ses règles sur chaque écran. Importe sistema.css une seule fois au point d'entrée du projet et utilise ses classes et tokens au lieu de créer de nouveaux styles. Avant chaque changement d'interface, relis le DESIGN.md.
- 01Téléchargez les deux fichiersDESIGN.md (les règles visuelles) et sistema.css (tokens, composants et signatures du design).
- 02Ajoutez-les au projetDESIGN.md à la racine. sistema.css importé une fois au point d'entrée : fonctionne avec React, Vue, Svelte, HTML ou WordPress.
- 03Collez le prompt dans votre agentIl lit les règles et construit n'importe quel écran (connexion, tarifs, dashboard) avec le style du design.
- 04Fixez la règleMettez le prompt dans les règles du projet de l'agent pour que chaque nouvel écran suive les mêmes couleurs, polices et espacements.
Similaires
Des landings qui partagent un ton ou un secteur avec Commit.