Social Nexus — Brand Guidelines

01 — LE LOGO

Le signe & le wordmark

nexus

SOCIAL NETWORK

Version principale · fond clair

nexus

SOCIAL NETWORK

Version dark · fond sombre

CONCEPT

Trois fragments verticaux décalés en escalier. Chaque barre est un membre de la communauté : même logique, même forme, décalage assumé. Ensemble, ils forment un tout plus grand. Le mouvement vers le haut est intégré dans la structure — pas besoin de l'illustrer.

02 — VARIATIONS

Toutes les déclinaisons

COULEUR · FOND CLAIR

COULEUR · FOND SOMBRE

MONOCHROME NOIR

ICÔNE APP · CARRÉ BLEU

ICÔNE APP · FOND NUIT

MONOCHROME BLANC

TAILLES

64px

48px

36px

24px

16px

03 — COULEURS

Palette de marque

COULEURS PRIMAIRES

Blue 800

#1d4ed8

RGB 29 78 216

Blue 700

PRINCIPAL

#2563eb

RGB 37 99 235

Blue 600

#3b82f6

RGB 59 130 246

Blue 400

#60a5fa

RGB 96 165 250

NEUTRES

Ink

#0f172a

Ink 60

#475569

Ink 30

#94a3b8

Ink 10

#e2e8f0

Page

#f8fafc

COULEURS DU SIGNE

Barre 1 — Blue 800 #1d4ed8 · 100% opacité

Barre 2 — Blue 700 #2563eb · 100% opacité

Barre 3 — Blue 600 #3b82f6 · 100% opacité

04 — TYPOGRAPHIE

Système typographique

POLICE PRINCIPALE

DM Sans

Le réseau social où les prompts deviennent légendaires.

DM Sans

Google Fonts

Poids : 300, 400, 500, 700

Corps, titres, UI

POLICE SECONDAIRE

#prompt-engineering

#2563eb · rgb(37, 99, 235) · Blue 700

DM Mono

Google Fonts

Poids : 400, 500

Tags, codes, metadata

HIÉRARCHIE

nexus

Wordmark · 800 · −0.05em

L'Art de Converser avec les Machines

H1 · 700 · 32px

Bibliothèque de prompts validés

H2 · 600 · 20px

Découvrez, collectionnez et perfectionnez vos prompts.

Body · 400 · 15px

#Révision #Cours #MémorisationVisuelle

Tags · Mono 400 · 13px

05 — RÈGLES D'USAGE

Ce qu'il faut faire & éviter

À FAIRE

Utiliser le logo sur fond blanc ou très clair
Utiliser la version dark sur fond sombre (#0f172a)
Respecter l'espace de protection (1× la hauteur du signe autour)
Utiliser le bleu principal #2563eb pour les CTA
Garder les trois barres dans leur dégradé de profondeur
Utiliser DM Sans pour tous les textes de l'interface
Utiliser DM Mono pour les tags, codes et metadata
Télécharger les SVG sources pour tous les usages print/web

À ÉVITER

Déformer ou étirer le signe
Changer les couleurs des trois barres
Placer le logo sur un fond photo ou texturé
Réduire le logo en-dessous de 16px
Utiliser une version outline (contour seul)
Changer l'ordre des barres ou leur décalage
Utiliser Inter, Roboto ou Arial dans l'interface
Ajouter des effets (ombre, glow, rotation)

ZONE DE PROTECTION

nexus

SOCIAL NETWORK

1× hauteur signe

SIMULATION — NAVIGATION PRINCIPALE

Rechercher un prompt, un tag ou @utilisateur…

+ Nouveau Prompt

SV

06 — CODE SOURCE

SVG prêts à l'emploi

Copie-colle ces blocs SVG directement dans ton code. Aucune dépendance externe requise — les logos fonctionnent partout (React, HTML, Vue, Figma via import SVG).

ICÔNE APPLICATION (48×48)

<svg width="48" height="48" viewBox="0 0 48 48"
  fill="none" xmlns="http://www.w3.org/2000/svg">
  <rect width="48" height="48" rx="12" fill="#2563eb"/>
  <rect x="8"  y="8"  width="9" height="32" rx="2" fill="white"/>
  <rect x="20" y="14" width="9" height="32" rx="2" fill="white" opacity="0.7"/>
  <rect x="32" y="20" width="9" height="32" rx="2" fill="white" opacity="0.4"/>
</svg>

SIGNE SEUL — COULEUR

<svg width="82" height="78" viewBox="0 0 82 78"
  fill="none" xmlns="http://www.w3.org/2000/svg">
  <rect x="0"  y="0"  width="18" height="72" rx="4" fill="#1d4ed8"/>
  <rect x="24" y="13" width="18" height="72" rx="4" fill="#2563eb"/>
  <rect x="48" y="26" width="18" height="72" rx="4" fill="#3b82f6"/>
</svg>

SIGNE SEUL — VERSION DARK (sur fond sombre)

<svg width="82" height="78" viewBox="0 0 82 78"
  fill="none" xmlns="http://www.w3.org/2000/svg">
  <rect x="0"  y="0"  width="18" height="72" rx="4" fill="#3b82f6"/>
  <rect x="24" y="13" width="18" height="72" rx="4" fill="#3b82f6" opacity="0.65"/>
  <rect x="48" y="26" width="18" height="72" rx="4" fill="#3b82f6" opacity="0.35"/>
</svg>

SIGNE SEUL — MONOCHROME

<svg width="82" height="78" viewBox="0 0 82 78"
  fill="none" xmlns="http://www.w3.org/2000/svg">
  <rect x="0"  y="0"  width="18" height="72" rx="4" fill="#0f172a"/>
  <rect x="24" y="13" width="18" height="72" rx="4" fill="#0f172a" opacity="0.5"/>
  <rect x="48" y="26" width="18" height="72" rx="4" fill="#0f172a" opacity="0.22"/>
</svg>

BrandGuidelines

Le signe & le wordmark

Toutes les déclinaisons

Palette de marque

Système typographique

Ce qu'il faut faire & éviter

SVG prêts à l'emploi

Brand
Guidelines