dokraphael.com / design system

Plain, technical, alive.

Le site est un portfolio documentaire, pas une landing page. Il doit rester lisible, calme, monospaced, presque outil interne, avec des blocs noirs nets pour donner du poids aux titres et des surfaces grises qui gardent la page simple a scanner.

Principes

1 / attitude

Documentaire, direct, construit pour lire et comparer des projets techniques.

2 / forme

Angles droits, bordures fines, pas de decoration gratuite, pas d'effet glossy.

3 / hierarchie

Les titres importants sont des blocs d'encre. Le reste reste discret.

4 / contenu

Chaque page doit expliquer le probleme, l'approche, les points forts et pourquoi ca compte.

Tokens

background

#ececec

panel

#f4f4f4

panel strong

#e2e2e2

text

#111111

muted

#555555

border

#c8c8c8

Layout

Element Regle Valeur
Page Cadre gris autour d'une surface principale. body padding: 16px
Shell Grille fixe: navigation a gauche, contenu a droite. 280px minmax(0, 1fr)
Contenu Colonne lisible, pas de hero marketing, pas de cartes imbriquees. max-width: 860-980px
Mobile La sidebar passe au-dessus du contenu. Les listes deviennent plus compactes. @media max-width: 860px

Typographie

Project title

Police monospace partout. Les paragraphes respirent avec une ligne a 1.7. Le texte ne cherche pas a etre spectaculaire: il doit donner l'impression d'un systeme de notes propre, robuste et maintenable.

Composants

navigation item

actions

tags

AI Infrastructure Automation

status

Loading content...

Contenu

structure projet

Problem, Approach, Highlights, Why It Matters. Toujours concret, jamais trop promo.

voix

Anglais simple ou francais simple. Phrases courtes. Vocabulaire d'atelier, de systeme, d'infrastructure.

navigation

Noms courts en minuscules quand possible. Badges seulement pour signaler une nouveaute utile.

media

Preferer les vraies captures, videos ou assets du projet. Pas d'illustrations abstraites.

Fast grab

Brief a donner a un agent code: reproduis un portfolio documentaire monospace, gris clair, en grille sidebar/contenu. Angles droits, bordures #c8c8c8, titres en bloc #2b2b2b sur #ececec, boutons plats, tags fins, contenu max 860px. Pas de gradients, pas de cards marketing, pas de hero image. 

:root {
  --bg: #ececec;
  --panel: #f4f4f4;
  --panel-strong: #e2e2e2;
  --text: #111111;
  --muted: #555555;
  --border: #c8c8c8;
  --ink-block: #2b2b2b;
}

body {
  margin: 0;
  padding: 16px;
  background: var(--bg);
  color: var(--text);
  font-family: "SF Mono", Menlo, Monaco, Consolas, monospace;
}

.shell {
  min-height: calc(100vh - 32px);
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  background: var(--panel);
}

.block-title {
  display: inline-block;
  padding: 0.12em 0.24em;
  background: var(--ink-block);
  color: var(--bg);
  line-height: 1;
  font-weight: 700;
}