Style Tech

Style Tech

L'outil est fait pour des gens qui vivent dans un terminal. Traite-les avec ce respect.

Quand l'utiliser

• Outils pour développeurs, documentation technique, API, CLI, SDK, dashboards d'infra, changelogs, status pages.
• Évite-le pour le grand public non technique, le lifestyle, la mode ou tout ce qui doit paraître chaleureux.

Palette

• --bg : gris très foncé #0d1117 (GitHub dark) ou noir bleuté #0a0e1a.
• --surface (panels, code blocks) : #161b22. --border : #30363d.
• --text : #e6edf3 (environ 16:1). --muted : #8b949e (environ 6:1).
• Accents "syntax" : vert string #7ee787, bleu function #79c0ff, magenta keyword #ff7b72, jaune constant #f0883e, comment gris #6e7681 (réservé aux commentaires, 4:1 seulement).
• États, mêmes couleurs : succès #7ee787, info et focus #79c0ff, erreur #ff7b72, warning #f0883e.
• Bouton primaire : fond #79c0ff, texte #0d1117.

Typographie

• Mono partout : JetBrains Mono, IBM Plex Mono ou Fira Code (Google Fonts), Söhne Mono si licence. Fallback ui-monospace, SFMono-Regular, Menlo, monospace.
• Ou hybride : Inter pour l'UI (fallback system-ui) et mono pour code, data et chemins.
• H1 : 32 px, weight 600, line-height 1.2. H2 : 24 px. H3 : 18 px.
• Body : 15 px, line-height 1.5. UI dense : 13 à 14 px.
• Code blocks : 13 à 14 px, line-height 1.7.
• Labels et métadonnées : 12 px, --muted.
• font-variant-numeric: tabular-nums sur tous les chiffres (tables, durées, versions).

Layout & grille

• Trois zones : sidebar gauche fixe 260 px, contenu central max-width: 760px qui scrolle, sidebar droite 220 px (table des matières).
• Header de 48 px, base d'espacement 4 px (4, 8, 12, 16, 24).
• Densité d'information élevée, aucun whitespace décoratif.
• Tables serrées : padding vertical 8 px, survol de ligne en --surface.
• Sous 1280 px, la sidebar droite disparaît. Sous 768 px, la sidebar gauche passe en drawer.

Composants signature

• Command palette (Cmd+K) omniprésente : modal 640 px centrée, input mono, résultats avec raccourcis à droite.
• Raccourcis affichés partout dans des <kbd> : fond --surface, bordure 1px --border, radius 4 px, mono 12 px (⌘K, ↵).
• Code block : numéros de ligne, bouton copier, tag de langage en haut à droite, fond --surface, radius 6 px.
• Breadcrumb type filesystem : ~/project/src/components/Button.tsx.
• Output terminal : prompt $, succès en vert, erreur en magenta.
• Bouton : hauteur 32 px, radius 6 px, bordure 1px --border, fond --surface. Survol : bordure --muted.
• Onglets : soulignement 2px #79c0ff sur l'actif.
• Icônes Lucide ou Phosphor en 16 px, stroke 1.5.

Motion

• Survols en 100 à 150 ms, ease-out.
• Command palette : fade et scale de 0.98 à 1 en 120 ms.
• Toasts : slide de 8 px en 200 ms. Caret qui clignote en 1 s steps(1).
• Jamais de reveal au scroll, de parallax ou de transition de page : le contenu s'affiche immédiatement.

Tokens CSS

:root {
  --bg: #0d1117;
  --surface: #161b22;
  --border: #30363d;
  --text: #e6edf3;
  --muted: #8b949e;
  --green: #7ee787;
  --blue: #79c0ff;
  --magenta: #ff7b72;
  --orange: #f0883e;
  --comment: #6e7681;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --font-ui: "Inter", system-ui, sans-serif;
  --radius: 6px;
  --focus: 0 0 0 2px var(--blue);
}

Checklist avant livraison

• Focus rings visibles (2px outline accent) sur tout élément interactif.
• Chaque action fréquente a un raccourci clavier affiché.
• Chaque code block a un bouton copier et un tag de langage.
• Chiffres en tabular-nums.
• Navigation complète au clavier, sans souris.

À éviter

• Illustrations décoratives, mascottes, blobs ou gradients arc-en-ciel.
• Accents syntax utilisés au hasard : chaque couleur garde son rôle.
• Texte en #6e7681 pour autre chose que des commentaires.
• Cards aérées façon landing marketing dans la doc.

Prompts de démarrage

• "Crée une page de documentation d'API en style tech : sidebar, code blocks avec copier, table des matières à droite."
• "Ajoute une command palette Cmd+K à mon app avec raccourcis clavier affichés."
• "Fais la landing de ma CLI en style terminal, avec une démo d'output animée et le prompt $."
• "Transforme mon dashboard en UI dense façon IDE, thème #0d1117, tables serrées."