Palette token-isée

Échelle fluide via clamp()

Familles : --font-mono = JetBrains Mono (body, UI, code) · --font-display = Space Grotesk (titres, lede) · --font-body = Space Grotesk (alias).

Coins francs uniquement

Plafond : 8px. Au-dessus, on perd l'esthétique TTY. Pas de border-radius: 50% sauf pour les dots window-control et le .live-dot.

Le :root système, prêt à coller

Pour démarrer tout nouveau projet PDS : la palette canonique, les familles, les radius et les tokens motion en un seul bloc. C'est le nommage système (celui de ce guide) — le portfolio garde son nommage historique (--green-primary…) documenté dans les tableaux ci-dessus.

:root {
  /* identité — le vert ne change jamais */
  --primary:      #00FF41;
  --primary-dim:  #00CC33;
  --primary-glow: rgba(0, 255, 65, 0.35);
  --primary-soft: rgba(0, 255, 65, 0.08);
  --amber: #FFD700;  --cyan: #00D4FF;
  --red:   #FF4444;  --orange: #FF8800;

  --font-mono:    'JetBrains Mono', monospace;
  --font-display: 'Space Grotesk', sans-serif;

  --radius-sm: 3px;  --radius-md: 6px;  --radius-lg: 8px;  /* plafond : 8px */

  --t-instant: 80ms;  --t-quick: 160ms;  --t-base: 300ms;
  --t-cinematic: 2400ms;  --t-scan: 2500ms;
}

body.theme-dark {
  --bg: #000000;  --bg-2: #080D16;  --bg-3: #0F1A2A;
  --bg-card: rgba(8, 13, 22, 0.9);
  --fg: #D8E2EC;  --fg-dim: #8899AA;  --fg-strong: #FFFFFF;
  --border: rgba(0, 255, 65, 0.18);  --border-soft: #1E3044;
}

body.theme-light {
  --bg: #F4F2EA;  --bg-2: #ECEAE0;  --bg-3: #E0DDD0;
  --bg-card: #FFFFFF;
  --fg: #1B232E;  --fg-dim: #5A6470;  --fg-strong: #050810;
  --border: rgba(0, 90, 25, 0.22);  --border-soft: #C8C4B6;
}

Scanline ambiante

--scanline-gradient = repeating-linear-gradient(0deg, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 1px, rgba(0,255,65,0.008) 1px, rgba(0,255,65,0.008) 2px) appliqué sur body::after (z-index 9998, pointer-events none). Donne la texture CRT.

Les deux briques mères, rendues en vrai

<div class="terminal-card">
  <div class="terminal-card__header">
    <div class="terminal-card__dots">
      <span class="terminal-card__dot terminal-card__dot--red"></span>
      <span class="terminal-card__dot terminal-card__dot--yellow"></span>
      <span class="terminal-card__dot terminal-card__dot--green"></span>
    </div>
    <span class="terminal-card__header-title">incident_2841.log</span>
  </div>
  <div class="terminal-card__body">
    <div class="terminal-card__prompt">status --last</div>
    <div class="terminal-card__output">root cause isolée · patch shippé</div>
  </div>
  <div class="terminal-card__meta">closed · notes archived</div>
</div>

Le composant central

La quasi-totalité des surfaces de contenu (hero, projets, articles, widget career) sont des terminal-card. Source : css/terminal.css.

Widgets sidebar (hero right + career)

Structure de page

Petits éléments transverses

À noter : il n'existe pas de classe .btn générique sur le portfolio. Les CTA sont des <a> avec couleur --green-primary ou des .widget-dl-btn, .lang-toggle selon le contexte.

Status chrome & skill bars

Trois composants validés depuis la v1.1 (joués en live au chapitre Motion · Status chrome ↓) : la page devient elle-même un système qui rend compte de son état.

Comportements de survol

Survoler pour sentir le contrat

État courant

.nav__link--active = même rendu que :hover (couleur --green-primary + underline 100%). La cohérence "active = comme hover" évite les surprises au clavier.

.scroll-progress (barre de progression article) suit le scroll, fill --green-primary, opacité progressive.

Page d'erreur

404.html existe sur le portfolio : même nav, même footer, contenu en .terminal-card--centered avec message en terminal-card__output. Pas de gros 404 décoratif : l'incident reste sobre.

index.html

Grid 3 colonnes 1.4fr · 1fr · 0.75fr, gap 1.5rem, alignement start.

• Gauche — .hero__name (kicker), .hero__headline (display), .hero__jobtitle, value prop, CTAs.
• Centre — .terminal-card--hero avec prompt animé (terminal-card__prompt + .cursor-block).
• Droite — .widget (live status, métriques) ou .widget-career.

Variante .hero__grid--two-col (1fr · 1fr, gap 3rem) sur les pages internes.

article.html

Layout 1 colonne centrée. Header avec .section__title, body en .bg-prose-équivalent (mono, line-height 1.7). Barre de progression scroll-progress sticky en haut. Tags .tag en pied d'article.

career.html

Combo .widget-career (sidebar gauche : status live, downloads, CTA contact) + stack de .terminal-card à droite, une par expérience, avec .terminal-card__header daté.

projects.html · articles.html

Grille de .terminal-card--clickable, chacune avec __file (nom de fichier), __desc (résumé), __tags. Filtrage via JS, transition fade-enter (animation fadeIn 0.3s).

La page comme système vivant

Pattern transverse à toutes les pages longues : scroll-progress (2px, fixé en haut) + statusbar (fixée en bas : état du service, section courante en notation ~/chemin, % de scroll, horloge live). Le chrome est du statut, pas de l'animation — il tourne en continu, en vanilla, sans dépendance. Spécimen vivant en §02 Components, implémentation complète au chapitre Motion · 17 ↓.

Bonnes pratiques

• Toute nouvelle couleur passe par un token --* dans :root (style.css L8-32).
• Toute nouvelle surface de contenu = un .terminal-card ou un dérivé.
• Toute taille de texte = un --text-* (clamp), jamais une valeur en dur.
• Toute animation au-dessus de 300ms doit être justifiée (intro, hero unique).
• Le vert --green-primary reste à 10% max de la surface visible.

Refus par défaut

• Inventer une nouvelle teinte de vert. #00FF41 ou rien.
• Ajouter un border-radius > 8px (sauf 50% pour dots).
• Utiliser une font autre que JetBrains Mono ou Space Grotesk.
• Mettre une emoji dans la nav, un titre, un bouton.
• Ajouter une animation infinie sur du contenu textuel non-décoratif.
• Créer un composant ad hoc qui réinvente .terminal-card avec d'autres bordures.

Où vit quoi dans pdesouza-portfolio

Workflow

1. Vérifier si un .terminal-card--{variant} ou un .widget existant suffit. Réutiliser plutôt que créer.
2. Si nouveau : créer une branche preprod sur pdesouza-portfolio, ajouter la classe dans terminal.css ou un nouveau fichier.
3. Documenter ici (Section 02 Components) — ajouter une ligne au tableau.
4. Si un nouveau token est introduit, l'ajouter à :root ET à la Section 01 Tokens.
5. Audit responsive (responsive.css) avant merge.
6. Merge preprod → main uniquement après validation visuelle sur preprod.

$ git log brandguide --oneline

Stabiliser ce que les autres ont déclaré perdu.

Quand un incident escalade, c'est moi qu'on appelle. PDS est l'identité d'un opérateur cyber qui transforme le chaos en post-mortem propre — méthodique, factuel, documenté.

Les 4 piliers de l'identité

À qui PDS parle

3 déclinaisons officielles

Espace de protection · taille minimale

Do · Don't

Planche d'anatomie du signe

Le chevron est construit, pas dessiné : ouverture 58.2°, trait 0.16X à joints carrés, curseur compagnon 0.45X, clear space X sur les quatre côtés. La rémanence (FIG. D) est la métaphore d'extinction officielle — le phosphore ne s'éteint pas, il se souvient.

Mark minimal — onglet navigateur

À 16–32px le lockup >pds_ devient illisible. La déclinaison favicon garde uniquement le prompt + curseur — c'est l'essence du logo, et c'est reconnaissable même sur un onglet à 16×16.

Hiérarchie de la marque

pds.service
├── pds.web          // pdesouza.fr — site & articles
├── pds.talks        // conférences & meetups
├── pds.notes        // post-mortems & techniques
├── pds.mail         // signature email & newsletters
└── pds.social       // LinkedIn, Mastodon, GitHub

Règles de nommage

Grille de base 8px

Patterns ASCII officiels

┌──────────────┐
│  pds         │
│  $ ready     │
└──────────────┘

────────────────
▓▓▓░░░░░░░░░░░░░
████░░░░░░░░░░░░
▓▓▓▓▓▓▓░░░░░░░░░

> _ ▸ ◆
  $ ●
    ▓ ▒ ░

Cadres canoniques

8 couleurs, point.

60 / 30 / 10

Le vert n'occupe jamais plus de 10% de la surface visible. Sa rareté est sa force.

Pairs validés

Terminal-card surface · #080D16

Le token --bg-3 du système (#0F1A2A, navy bleuté) sert de fond pour les frames de contenu du brandguide et des sections en grille. Mais les terminal cards du portfolio (hero, projets, articles, about, 404…) utilisent une teinte plus profonde — la swatch Terminal navy #080D16 documentée plus haut. C'est une exception volontaire au design system, pas une dérive.

Space Grotesk

JetBrains Mono

Règles de mise en page

Système d'icônes — base

Construction

À ne pas faire

Que photographier

Traitement photo

Réduction de saturation à 30%. Highlights tirés vers le vert primaire, shadows vers le navy. Grain léger toléré.

Cadrage

Mix B + C — logo géométrique + fragment terminal

Chaque article et chaque projet porte une signature visuelle à deux étages : un logo Bauhaus mono-phosphore (B) au-dessus, un fragment de commande terminal (C) en dessous. Lisible à 36px, narratif au scroll, cohérent avec le hero.

Implémentation référence : preprod/js/signatures.js (data) + main.js (render) + patch-final.css §20 (visuel).

Phosphor Vigil — la série

Direction artistique 2026.06, déclinée de l'identité : PL. 01 (relevé d'escalade — source de l'og:image et de la topographie de cover) et PL. 03 (taxonomie raisonnée — 5 signatures nouvelles prêtes à servir : VIGIL, MESH, SIGNAL, ROOT CAUSE, BRIDGE). Usage : posters, slides d'ouverture de talks, covers d'articles.

Quatre règles non négociables

À éviter en motion

• ✕ Bounce, elastic, overshoot — jamais.
• ✕ Parallax au scroll — sauf si vraiment justifié, et discret.
• ✕ Spinners ronds génériques. Préférer un [████░░░░] ASCII.
• ✕ Animations > 3s sauf cinematic intro.
• ✕ Auto-play vidéo avec son.
• ✕ Card flip 3D au hover — testé sur les 2 premières project-card de la page Projets, retiré : effet "show-off" qui rompt la grille calme. Hover des cards = uniquement border-color shift + box-shadow subtle (cf. tokens --t-instant / --t-quick).

Card hover — borderline only

Tous les composants type terminal-card, project-card, article-card, career-tl__item, career-cert, career-edu__item partagent une même grammaire de feedback : changement de border-color (vers --primary ou --cyan) + box-shadow lointain (offset Y 4px, blur 16-20px, opacity 0.06-0.08), durée --t-quick (160ms ease-out). Pas de translation, pas de scale, pas de rotation, pas de flip. Le pulse vient des états système (status-badge, dot live), pas des interactions.

.terminal-card {
  border: 1px solid var(--border);
  transition: border-color var(--t-quick) ease-out,
              box-shadow   var(--t-quick) ease-out;
}
.terminal-card:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 16px rgba(0, 255, 65, 0.07);
}

Images & cache discipline

Caractère par caractère — jamais d'easing fluide

function typewriter(el, { speed = 38, delay = 0 } = {}) {
  return new Promise(resolve => {
    const text = el.dataset.text || '';
    el.textContent = '';
    setTimeout(() => {
      let i = 0;
      const id = setInterval(() => {
        el.textContent = text.slice(0, ++i);
        if (i >= text.length) { clearInterval(id); resolve(); }
      }, speed);
    }, delay);
  });
}

La signature PDS — 180ms entre les lignes

animate('.term-line', {
  opacity:    [0, 1],
  translateX: [-10, 0],
  duration:   360,
  ease:       'outQuad',
  delay:      stagger(180),   // la cadence canonique
});

Le remplacement officiel de tout spinner

function asciiBar(pct, width = 18) {
  const filled = Math.round((pct / 100) * width);
  return '█'.repeat(filled) + '░'.repeat(width - filled);
}
document.querySelectorAll('[data-bar]').forEach(el => {
  const state = { v: 0 };
  animate(state, {
    v: +el.dataset.bar, duration: 1100, ease: 'steps(18)',
    onUpdate: () => { el.textContent = asciiBar(state.v); },
  });
});

Les métriques qui montent

document.querySelectorAll('[data-count]').forEach(el => {
  const state = { v: 0 };
  animate(state, {
    v: +el.dataset.count, duration: 1100, ease: 'outQuad',
    onUpdate: () => { el.textContent = Math.round(state.v); },
  });
});

Les signatures se dessinent — stroke-dashoffset

const shapes = card.querySelectorAll('.sig [stroke]');
shapes.forEach(s => {
  const len = s.getTotalLength();
  s.style.strokeDasharray  = len;
  s.style.strokeDashoffset = len;   // invisible au départ
});
animate(shapes, {
  strokeDashoffset: 0, duration: 700, ease: 'outQuad',
  delay: stagger(120, { start: 200 }),
});

L'entrée standard — une fois, puis plus rien

const io = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (!entry.isIntersecting) return;
    io.unobserve(entry.target);          // R3 : une seule fois
    animate(entry.target, {
      opacity: [0, 1], translateY: [18, 0],
      duration: 520, ease: 'outQuad',
      delay: (+entry.target.dataset.idx || 0) * 120,
    });
  });
}, { threshold: 0.18 });

Cinematic intro — budget < 3 secondes

const lines = document.querySelectorAll('.boot__line');
animate(lines, {
  opacity: [0, 1], translateX: [-12, 0],
  duration: 300, ease: 'outQuad', delay: stagger(180),
});
await new Promise(r => setTimeout(r, 180 * lines.length + 450));
document.getElementById('boot').classList.add('is-done');

// progress bar — <div id="scroll-progress"><i></i></div>
const fill = document.querySelector('#scroll-progress i');
window.addEventListener('scroll', () => {
  const max = document.documentElement.scrollHeight - innerHeight;
  fill.style.width = Math.round(scrollY / max * 100) + '%';
}, { passive: true });

// horloge statusbar
setInterval(() => {
  clock.textContent = new Date().toLocaleTimeString('fr-FR');
}, 1000);

Ce chrome est du statut, pas de l'animation : il tourne en continu, listener passive, aucune dépendance anime.js. La progress bar fait 2px, vert + glow léger ; la statusbar reprend la grammaire tmux : gauche = état, centre = chemin, droite = métriques.

Direct, factuel, système

Mots qu'on aime · qu'on évite

Avant / après

Six contextes, six réglages

Adaptation par canal

Phrase de clôture

Tout ce que PDS publie peut se terminer par une phrase courte, un peu sèche, qui ferme l'incident.