Octopusdesign/social-nexus-chart
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Téléverser les fichiers vers "/"

Browse Source
This commit is contained in:
sebvtl 2026-05-21 09:02:41 +00:00
parent e5ca0d762d
commit afa1535627
1 changed files with 925 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

925
index.html Normal file
View File

@ -0,0 +1,925 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Social Nexus — Brand Guidelines</title>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;0,700;1,300&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
:root {
--blue-900: #1e3a8a;
--blue-800: #1d4ed8;
--blue-700: #2563eb;
--blue-600: #3b82f6;
--blue-400: #60a5fa;
--blue-100: #dbeafe;
--blue-50: #eff6ff;
--ink: #0f172a;
--ink-60: #475569;
--ink-30: #94a3b8;
--ink-10: #e2e8f0;
--paper: #ffffff;
--page: #f8fafc;
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
font-family: 'DM Sans', sans-serif;
background: var(--page);
color: var(--ink);
font-size: 15px;
line-height: 1.6;
}
/* ── PRINT ── */
@media print {
.no-print { display: none !important; }
body { background: white; }
.page { box-shadow: none; margin: 0; border-radius: 0; }
.page-break { page-break-before: always; }
}
/* ── LAYOUT ── */
.cover {
background: var(--ink);
color: white;
padding: 80px 80px 64px;
display: flex;
flex-direction: column;
min-height: 340px;
position: relative;
overflow: hidden;
}
.cover::before {
content: '';
position: absolute;
top: -80px; right: -80px;
width: 320px; height: 320px;
border-radius: 50%;
background: var(--blue-800);
opacity: 0.25;
}
.cover-label {
font-size: 11px;
letter-spacing: 0.22em;
color: var(--blue-400);
margin-bottom: 40px;
font-weight: 500;
}
.cover-title {
font-size: 52px;
font-weight: 700;
letter-spacing: -0.04em;
line-height: 1.05;
margin-bottom: 16px;
}
.cover-sub {
font-size: 15px;
color: #94a3b8;
max-width: 400px;
font-weight: 300;
margin-bottom: 48px;
}
.cover-meta {
font-size: 12px;
color: #475569;
letter-spacing: 0.08em;
border-top: 1px solid #1e293b;
padding-top: 24px;
display: flex;
gap: 40px;
}
.page {
background: var(--paper);
max-width: 900px;
margin: 0 auto 2px;
padding: 64px 80px;
}
.page:first-of-type { margin-top: 0; }
.section-label {
font-size: 10px;
letter-spacing: 0.22em;
color: var(--ink-30);
font-weight: 500;
margin-bottom: 8px;
}
.section-title {
font-size: 28px;
font-weight: 700;
letter-spacing: -0.03em;
color: var(--ink);
margin-bottom: 40px;
padding-bottom: 20px;
border-bottom: 1px solid var(--ink-10);
}
hr.rule { border: none; border-top: 1px solid var(--ink-10); margin: 48px 0; }
/* ── PRINT BUTTON ── */
.print-bar {
position: sticky;
top: 0;
z-index: 100;
background: var(--ink);
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 40px;
max-width: 900px;
margin: 0 auto;
}
.print-bar span {
font-size: 12px;
color: #64748b;
letter-spacing: 0.1em;
}
.btn-print {
background: var(--blue-700);
color: white;
border: none;
padding: 10px 24px;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
font-family: 'DM Sans', sans-serif;
letter-spacing: 0.02em;
transition: background 0.2s;
}
.btn-print:hover { background: var(--blue-800); }
/* ── LOGO DISPLAY ── */
.logo-main {
display: flex;
align-items: center;
gap: 28px;
padding: 48px 40px;
background: var(--page);
border-radius: 12px;
margin-bottom: 16px;
}
.logo-main-dark {
background: var(--ink);
}
.logo-tag {
font-size: 11px;
letter-spacing: 0.14em;
color: var(--ink-30);
text-align: right;
margin-bottom: 40px;
}
/* ── VARIATIONS GRID ── */
.var-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 2px;
margin-bottom: 2px;
}
.var-cell {
background: var(--page);
padding: 40px 32px 28px;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
.var-cell.dark { background: var(--ink); }
.var-cell.mid { background: #f1f5f9; }
.var-label {
font-size: 10px;
letter-spacing: 0.16em;
color: var(--ink-30);
text-align: center;
font-weight: 500;
}
.var-label.on-dark { color: #334155; }
/* ── SIZES ── */
.sizes-row {
display: flex;
align-items: flex-end;
gap: 40px;
padding: 40px;
background: var(--page);
border-radius: 12px;
margin-bottom: 16px;
}
.size-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.size-label {
font-size: 11px;
color: var(--ink-30);
font-family: 'DM Mono', monospace;
}
/* ── COLORS ── */
.color-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
margin-bottom: 32px;
}
.color-swatch {
border-radius: 10px;
overflow: hidden;
}
.swatch-block {
height: 72px;
}
.swatch-info {
padding: 12px;
background: var(--page);
border: 1px solid var(--ink-10);
border-top: none;
border-radius: 0 0 10px 10px;
}
.swatch-name {
font-size: 12px;
font-weight: 600;
color: var(--ink);
margin-bottom: 2px;
}
.swatch-hex {
font-size: 11px;
font-family: 'DM Mono', monospace;
color: var(--ink-60);
}
/* ── TYPOGRAPHY ── */
.type-sample {
padding: 32px 40px;
background: var(--page);
border-radius: 12px;
margin-bottom: 12px;
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 24px;
}
.type-specimen { flex: 1; }
.type-meta {
font-size: 11px;
font-family: 'DM Mono', monospace;
color: var(--ink-30);
text-align: right;
min-width: 160px;
line-height: 1.8;
}
/* ── USAGE ── */
.usage-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.usage-card {
padding: 28px 32px;
border-radius: 10px;
border: 1px solid var(--ink-10);
}
.usage-card.do { border-color: #bbf7d0; background: #f0fdf4; }
.usage-card.dont { border-color: #fecaca; background: #fff1f2; }
.usage-card-label {
font-size: 10px;
letter-spacing: 0.18em;
font-weight: 700;
margin-bottom: 12px;
}
.do .usage-card-label { color: #15803d; }
.dont .usage-card-label { color: #b91c1c; }
.usage-card ul {
list-style: none;
font-size: 13px;
color: var(--ink-60);
display: flex;
flex-direction: column;
gap: 6px;
}
.usage-card ul li::before {
margin-right: 8px;
}
.do ul li::before { content: '✓'; color: #15803d; }
.dont ul li::before { content: '✕'; color: #b91c1c; }
/* ── FOOTER ── */
.doc-footer {
background: var(--ink);
padding: 32px 80px;
max-width: 900px;
margin: 2px auto 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.doc-footer p {
font-size: 12px;
color: #334155;
}
.doc-footer strong {
color: var(--blue-400);
}
/* ── SVG ICONS (inline) ── */
.icon-fragment svg { display: block; }
</style>
</head>
<body>
<!-- STICKY PRINT BAR -->
<div class="print-bar no-print">
<span>SOCIAL NEXUS — BRAND GUIDELINES 2026</span>
<button class="btn-print" onclick="window.print()">Exporter en PDF</button>
</div>
<!-- ═══════════════════════════════════════════════════ -->
<!-- COVER -->
<!-- ═══════════════════════════════════════════════════ -->
<div class="cover" style="max-width:900px;margin:0 auto;">
<p class="cover-label">SOCIAL NEXUS · IDENTITÉ DE MARQUE</p>
<!-- Logo inline sur la cover -->
<div style="display:flex;align-items:center;gap:20px;margin-bottom:40px;">
<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="10" y="10" width="8" height="28" rx="2.5" fill="white"/>
<rect x="22" y="17" width="8" height="28" rx="2.5" fill="white" opacity="0.7"/>
<rect x="34" y="24" width="8" height="28" rx="2.5" fill="white" opacity="0.4"/>
</svg>
<div>
<div style="font-size:28px;font-weight:800;letter-spacing:-0.04em;color:white;">nexus</div>
<div style="font-size:11px;letter-spacing:0.22em;color:#475569;">SOCIAL NETWORK</div>
</div>
</div>
<h1 class="cover-title">Brand<br>Guidelines</h1>
<p class="cover-sub">Identité visuelle, logo, couleurs, typographie et règles d'usage.</p>
<div class="cover-meta">
<span>Version 1.0</span>
<span>Mai 2026</span>
<span>Confidentiel</span>
</div>
</div>
<!-- ═══════════════════════════════════════════════════ -->
<!-- PAGE 1 — LE LOGO -->
<!-- ═══════════════════════════════════════════════════ -->
<div class="page page-break">
<p class="section-label">01 — LE LOGO</p>
<h2 class="section-title">Le signe & le wordmark</h2>
<!-- Logo principal sur fond clair -->
<div class="logo-main">
<svg width="98" height="96" viewBox="0 0 98 96" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="22" height="88" rx="5" fill="#1d4ed8"/>
<rect x="30" y="16" width="22" height="88" rx="5" fill="#2563eb"/>
<rect x="60" y="32" width="22" height="88" rx="5" fill="#3b82f6"/>
</svg>
<div>
<div style="font-size:64px;font-weight:800;letter-spacing:-0.05em;color:#0f172a;line-height:1;">nexus</div>
<div style="font-size:13px;letter-spacing:0.28em;color:#94a3b8;margin-top:4px;">SOCIAL NETWORK</div>
</div>
</div>
<p class="logo-tag">Version principale · fond clair</p>
<!-- Logo principal sur fond sombre -->
<div class="logo-main logo-main-dark">
<svg width="98" height="96" viewBox="0 0 98 96" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="22" height="88" rx="5" fill="#3b82f6"/>
<rect x="30" y="16" width="22" height="88" rx="5" fill="#3b82f6" opacity="0.65"/>
<rect x="60" y="32" width="22" height="88" rx="5" fill="#3b82f6" opacity="0.35"/>
</svg>
<div>
<div style="font-size:64px;font-weight:800;letter-spacing:-0.05em;color:white;line-height:1;">nexus</div>
<div style="font-size:13px;letter-spacing:0.28em;color:#334155;margin-top:4px;">SOCIAL NETWORK</div>
</div>
</div>
<p class="logo-tag">Version dark · fond sombre</p>
<hr class="rule">
<!-- Concept -->
<p class="section-label">CONCEPT</p>
<p style="font-size:18px;font-weight:300;color:#475569;line-height:1.8;max-width:580px;">
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.
</p>
</div>
<!-- ═══════════════════════════════════════════════════ -->
<!-- PAGE 2 — VARIATIONS -->
<!-- ═══════════════════════════════════════════════════ -->
<div class="page page-break">
<p class="section-label">02 — VARIATIONS</p>
<h2 class="section-title">Toutes les déclinaisons</h2>
<div class="var-grid">
<!-- Couleur fond clair -->
<div class="var-cell">
<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>
<p class="var-label">COULEUR · FOND CLAIR</p>
</div>
<!-- Couleur fond sombre -->
<div class="var-cell dark">
<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>
<p class="var-label on-dark">COULEUR · FOND SOMBRE</p>
</div>
<!-- Monochrome -->
<div class="var-cell mid">
<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>
<p class="var-label">MONOCHROME NOIR</p>
</div>
<!-- Icône app fond clair -->
<div class="var-cell">
<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="72" height="72" rx="18" fill="#2563eb"/>
<rect x="14" y="14" width="12" height="44" rx="3" fill="white"/>
<rect x="30" y="22" width="12" height="44" rx="3" fill="white" opacity="0.7"/>
<rect x="46" y="30" width="12" height="44" rx="3" fill="white" opacity="0.4"/>
</svg>
<p class="var-label">ICÔNE APP · CARRÉ BLEU</p>
</div>
<!-- Icône app fond noir -->
<div class="var-cell dark">
<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="72" height="72" rx="18" fill="#1e293b"/>
<rect x="14" y="14" width="12" height="44" rx="3" fill="#3b82f6"/>
<rect x="30" y="22" width="12" height="44" rx="3" fill="#3b82f6" opacity="0.7"/>
<rect x="46" y="30" width="12" height="44" rx="3" fill="#3b82f6" opacity="0.4"/>
</svg>
<p class="var-label on-dark">ICÔNE APP · FOND NUIT</p>
</div>
<!-- Monochrome blanc -->
<div class="var-cell dark">
<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="white"/>
<rect x="24" y="13" width="18" height="72" rx="4" fill="white" opacity="0.5"/>
<rect x="48" y="26" width="18" height="72" rx="4" fill="white" opacity="0.22"/>
</svg>
<p class="var-label on-dark">MONOCHROME BLANC</p>
</div>
</div>
<hr class="rule">
<!-- Tailles -->
<p class="section-label">TAILLES</p>
<div class="sizes-row">
<div class="size-item">
<svg width="64" height="64" viewBox="0 0 64 64" fill="none">
<rect width="64" height="64" rx="16" fill="#2563eb"/>
<rect x="11" y="11" width="11" height="42" rx="2.5" fill="white"/>
<rect x="26" y="18" width="11" height="42" rx="2.5" fill="white" opacity="0.7"/>
<rect x="42" y="25" width="11" height="42" rx="2.5" fill="white" opacity="0.4"/>
</svg>
<span class="size-label">64px</span>
</div>
<div class="size-item">
<svg width="48" height="48" viewBox="0 0 48 48" fill="none">
<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>
<span class="size-label">48px</span>
</div>
<div class="size-item">
<svg width="36" height="36" viewBox="0 0 36 36" fill="none">
<rect width="36" height="36" rx="9" fill="#2563eb"/>
<rect x="6" y="6" width="7" height="24" rx="1.5" fill="white"/>
<rect x="15" y="10" width="7" height="24" rx="1.5" fill="white" opacity="0.7"/>
<rect x="24" y="14" width="7" height="24" rx="1.5" fill="white" opacity="0.4"/>
</svg>
<span class="size-label">36px</span>
</div>
<div class="size-item">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect width="24" height="24" rx="6" fill="#2563eb"/>
<rect x="4" y="4" width="4" height="16" rx="1" fill="white"/>
<rect x="10" y="7" width="4" height="16" rx="1" fill="white" opacity="0.7"/>
<rect x="16" y="10" width="4" height="16" rx="1" fill="white" opacity="0.4"/>
</svg>
<span class="size-label">24px</span>
</div>
<div class="size-item">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
<rect width="16" height="16" rx="4" fill="#2563eb"/>
<rect x="3" y="3" width="3" height="10" rx="0.5" fill="white"/>
<rect x="7" y="5" width="3" height="10" rx="0.5" fill="white" opacity="0.7"/>
<rect x="11" y="7" width="3" height="10" rx="0.5" fill="white" opacity="0.4"/>
</svg>
<span class="size-label">16px</span>
</div>
</div>
</div>
<!-- ═══════════════════════════════════════════════════ -->
<!-- PAGE 3 — COULEURS -->
<!-- ═══════════════════════════════════════════════════ -->
<div class="page page-break">
<p class="section-label">03 — COULEURS</p>
<h2 class="section-title">Palette de marque</h2>
<!-- Primaires -->
<p style="font-size:11px;letter-spacing:0.14em;color:#94a3b8;margin-bottom:16px;">COULEURS PRIMAIRES</p>
<div class="color-grid" style="grid-template-columns:repeat(4,1fr);">
<div class="color-swatch">
<div class="swatch-block" style="background:#1d4ed8;border-radius:10px 10px 0 0;"></div>
<div class="swatch-info">
<p class="swatch-name">Blue 800</p>
<p class="swatch-hex">#1d4ed8</p>
<p class="swatch-hex" style="margin-top:2px;">RGB 29 78 216</p>
</div>
</div>
<div class="color-swatch">
<div class="swatch-block" style="background:#2563eb;border-radius:10px 10px 0 0;"></div>
<div class="swatch-info">
<div style="display:flex;align-items:center;gap:6px;">
<p class="swatch-name">Blue 700</p>
<span style="font-size:9px;background:#dbeafe;color:#1d4ed8;padding:2px 6px;border-radius:4px;font-weight:700;letter-spacing:0.1em;">PRINCIPAL</span>
</div>
<p class="swatch-hex">#2563eb</p>
<p class="swatch-hex" style="margin-top:2px;">RGB 37 99 235</p>
</div>
</div>
<div class="color-swatch">
<div class="swatch-block" style="background:#3b82f6;border-radius:10px 10px 0 0;"></div>
<div class="swatch-info">
<p class="swatch-name">Blue 600</p>
<p class="swatch-hex">#3b82f6</p>
<p class="swatch-hex" style="margin-top:2px;">RGB 59 130 246</p>
</div>
</div>
<div class="color-swatch">
<div class="swatch-block" style="background:#60a5fa;border-radius:10px 10px 0 0;"></div>
<div class="swatch-info">
<p class="swatch-name">Blue 400</p>
<p class="swatch-hex">#60a5fa</p>
<p class="swatch-hex" style="margin-top:2px;">RGB 96 165 250</p>
</div>
</div>
</div>
<hr class="rule">
<!-- Neutres -->
<p style="font-size:11px;letter-spacing:0.14em;color:#94a3b8;margin-bottom:16px;">NEUTRES</p>
<div class="color-grid">
<div class="color-swatch">
<div class="swatch-block" style="background:#0f172a;border-radius:10px 10px 0 0;"></div>
<div class="swatch-info">
<p class="swatch-name">Ink</p>
<p class="swatch-hex">#0f172a</p>
</div>
</div>
<div class="color-swatch">
<div class="swatch-block" style="background:#475569;border-radius:10px 10px 0 0;"></div>
<div class="swatch-info">
<p class="swatch-name">Ink 60</p>
<p class="swatch-hex">#475569</p>
</div>
</div>
<div class="color-swatch">
<div class="swatch-block" style="background:#94a3b8;border-radius:10px 10px 0 0;"></div>
<div class="swatch-info">
<p class="swatch-name">Ink 30</p>
<p class="swatch-hex">#94a3b8</p>
</div>
</div>
<div class="color-swatch">
<div class="swatch-block" style="background:#e2e8f0;border-radius:10px 10px 0 0;"></div>
<div class="swatch-info">
<p class="swatch-name">Ink 10</p>
<p class="swatch-hex">#e2e8f0</p>
</div>
</div>
<div class="color-swatch">
<div class="swatch-block" style="background:#f8fafc;border-radius:10px 10px 0 0;border:1px solid #e2e8f0;border-bottom:none;"></div>
<div class="swatch-info">
<p class="swatch-name">Page</p>
<p class="swatch-hex">#f8fafc</p>
</div>
</div>
</div>
<hr class="rule">
<!-- Utilisation couleurs logo -->
<p style="font-size:11px;letter-spacing:0.14em;color:#94a3b8;margin-bottom:20px;">COULEURS DU SIGNE</p>
<div style="display:flex;gap:12px;align-items:center;padding:32px 40px;background:var(--page);border-radius:12px;">
<svg width="82" height="78" viewBox="0 0 82 78" fill="none">
<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>
<div style="display:flex;flex-direction:column;gap:10px;">
<div style="display:flex;align-items:center;gap:12px;">
<div style="width:32px;height:12px;border-radius:3px;background:#1d4ed8;"></div>
<span style="font-size:13px;color:#475569;">Barre 1 — Blue 800 <span style="font-family:'DM Mono',monospace;">#1d4ed8</span> · 100% opacité</span>
</div>
<div style="display:flex;align-items:center;gap:12px;">
<div style="width:32px;height:12px;border-radius:3px;background:#2563eb;"></div>
<span style="font-size:13px;color:#475569;">Barre 2 — Blue 700 <span style="font-family:'DM Mono',monospace;">#2563eb</span> · 100% opacité</span>
</div>
<div style="display:flex;align-items:center;gap:12px;">
<div style="width:32px;height:12px;border-radius:3px;background:#3b82f6;"></div>
<span style="font-size:13px;color:#475569;">Barre 3 — Blue 600 <span style="font-family:'DM Mono',monospace;">#3b82f6</span> · 100% opacité</span>
</div>
</div>
</div>
</div>
<!-- ═══════════════════════════════════════════════════ -->
<!-- PAGE 4 — TYPOGRAPHIE -->
<!-- ═══════════════════════════════════════════════════ -->
<div class="page page-break">
<p class="section-label">04 — TYPOGRAPHIE</p>
<h2 class="section-title">Système typographique</h2>
<!-- DM Sans -->
<div class="type-sample">
<div class="type-specimen">
<p style="font-size:11px;letter-spacing:0.14em;color:#94a3b8;margin-bottom:16px;">POLICE PRINCIPALE</p>
<p style="font-family:'DM Sans',sans-serif;font-size:42px;font-weight:700;letter-spacing:-0.03em;color:#0f172a;line-height:1.1;">DM Sans</p>
<p style="font-family:'DM Sans',sans-serif;font-size:16px;font-weight:300;color:#475569;margin-top:12px;">Le réseau social où les prompts deviennent légendaires.</p>
</div>
<div class="type-meta">
<p>DM Sans</p>
<p>Google Fonts</p>
<p>Poids : 300, 400, 500, 700</p>
<p>Corps, titres, UI</p>
</div>
</div>
<!-- DM Mono -->
<div class="type-sample">
<div class="type-specimen">
<p style="font-size:11px;letter-spacing:0.14em;color:#94a3b8;margin-bottom:16px;">POLICE SECONDAIRE</p>
<p style="font-family:'DM Mono',monospace;font-size:36px;font-weight:500;color:#0f172a;line-height:1.2;">#prompt-engineering</p>
<p style="font-family:'DM Mono',monospace;font-size:14px;color:#2563eb;margin-top:12px;">#2563eb · rgb(37, 99, 235) · Blue 700</p>
</div>
<div class="type-meta">
<p>DM Mono</p>
<p>Google Fonts</p>
<p>Poids : 400, 500</p>
<p>Tags, codes, metadata</p>
</div>
</div>
<hr class="rule">
<!-- Hiérarchie -->
<p style="font-size:11px;letter-spacing:0.14em;color:#94a3b8;margin-bottom:24px;">HIÉRARCHIE</p>
<div style="padding:40px;background:var(--page);border-radius:12px;display:flex;flex-direction:column;gap:20px;">
<div style="display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid #f1f5f9;padding-bottom:20px;">
<p style="font-family:'DM Sans',sans-serif;font-size:48px;font-weight:800;letter-spacing:-0.05em;color:#0f172a;line-height:1;">nexus</p>
<p style="font-size:11px;font-family:'DM Mono',monospace;color:#94a3b8;">Wordmark · 800 · −0.05em</p>
</div>
<div style="display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid #f1f5f9;padding-bottom:20px;">
<p style="font-family:'DM Sans',sans-serif;font-size:32px;font-weight:700;letter-spacing:-0.03em;color:#0f172a;">L'Art de Converser avec les Machines</p>
<p style="font-size:11px;font-family:'DM Mono',monospace;color:#94a3b8;">H1 · 700 · 32px</p>
</div>
<div style="display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid #f1f5f9;padding-bottom:20px;">
<p style="font-family:'DM Sans',sans-serif;font-size:20px;font-weight:600;color:#0f172a;">Bibliothèque de prompts validés</p>
<p style="font-size:11px;font-family:'DM Mono',monospace;color:#94a3b8;">H2 · 600 · 20px</p>
</div>
<div style="display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid #f1f5f9;padding-bottom:20px;">
<p style="font-family:'DM Sans',sans-serif;font-size:15px;font-weight:400;color:#475569;">Découvrez, collectionnez et perfectionnez vos prompts.</p>
<p style="font-size:11px;font-family:'DM Mono',monospace;color:#94a3b8;">Body · 400 · 15px</p>
</div>
<div style="display:flex;justify-content:space-between;align-items:baseline;">
<p style="font-family:'DM Mono',monospace;font-size:13px;color:#2563eb;">#Révision &nbsp;#Cours &nbsp;#MémorisationVisuelle</p>
<p style="font-size:11px;font-family:'DM Mono',monospace;color:#94a3b8;">Tags · Mono 400 · 13px</p>
</div>
</div>
</div>
<!-- ═══════════════════════════════════════════════════ -->
<!-- PAGE 5 — RÈGLES D'USAGE -->
<!-- ═══════════════════════════════════════════════════ -->
<div class="page page-break">
<p class="section-label">05 — RÈGLES D'USAGE</p>
<h2 class="section-title">Ce qu'il faut faire & éviter</h2>
<div class="usage-grid">
<div class="usage-card do">
<p class="usage-card-label">À FAIRE</p>
<ul>
<li>Utiliser le logo sur fond blanc ou très clair</li>
<li>Utiliser la version dark sur fond sombre (#0f172a)</li>
<li>Respecter l'espace de protection (1× la hauteur du signe autour)</li>
<li>Utiliser le bleu principal #2563eb pour les CTA</li>
<li>Garder les trois barres dans leur dégradé de profondeur</li>
<li>Utiliser DM Sans pour tous les textes de l'interface</li>
<li>Utiliser DM Mono pour les tags, codes et metadata</li>
<li>Télécharger les SVG sources pour tous les usages print/web</li>
</ul>
</div>
<div class="usage-card dont">
<p class="usage-card-label">À ÉVITER</p>
<ul>
<li>Déformer ou étirer le signe</li>
<li>Changer les couleurs des trois barres</li>
<li>Placer le logo sur un fond photo ou texturé</li>
<li>Réduire le logo en-dessous de 16px</li>
<li>Utiliser une version outline (contour seul)</li>
<li>Changer l'ordre des barres ou leur décalage</li>
<li>Utiliser Inter, Roboto ou Arial dans l'interface</li>
<li>Ajouter des effets (ombre, glow, rotation)</li>
</ul>
</div>
</div>
<hr class="rule">
<!-- Zone de protection -->
<p style="font-size:11px;letter-spacing:0.14em;color:#94a3b8;margin-bottom:24px;">ZONE DE PROTECTION</p>
<div style="padding:40px;background:var(--page);border-radius:12px;display:flex;justify-content:center;">
<div style="position:relative;display:inline-flex;align-items:center;gap:20px;">
<!-- Zone de protection visualisée -->
<div style="border:1.5px dashed #e2e8f0;padding:28px;border-radius:8px;display:flex;align-items:center;gap:16px;">
<svg width="56" height="52" viewBox="0 0 56 52" fill="none">
<rect x="0" y="0" width="12" height="48" rx="3" fill="#1d4ed8"/>
<rect x="16" y="9" width="12" height="48" rx="3" fill="#2563eb"/>
<rect x="32" y="18" width="12" height="48" rx="3" fill="#3b82f6"/>
</svg>
<div>
<div style="font-size:38px;font-weight:800;letter-spacing:-0.04em;color:#0f172a;line-height:1;">nexus</div>
<div style="font-size:11px;letter-spacing:0.24em;color:#94a3b8;">SOCIAL NETWORK</div>
</div>
</div>
<div style="position:absolute;top:-8px;left:-8px;font-size:10px;font-family:'DM Mono',monospace;color:#94a3b8;">1× hauteur signe</div>
</div>
</div>
<hr class="rule">
<!-- Simulation dans l'app -->
<p style="font-size:11px;letter-spacing:0.14em;color:#94a3b8;margin-bottom:24px;">SIMULATION — NAVIGATION PRINCIPALE</p>
<div style="background:white;border:1px solid #e2e8f0;border-radius:10px;padding:12px 20px;display:flex;align-items:center;gap:16px;">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none">
<rect width="32" height="32" rx="8" fill="#2563eb"/>
<rect x="6" y="6" width="6" height="20" rx="1.5" fill="white"/>
<rect x="14" y="10" width="6" height="20" rx="1.5" fill="white" opacity="0.7"/>
<rect x="22" y="14" width="6" height="20" rx="1.5" fill="white" opacity="0.4"/>
</svg>
<div style="flex:1;background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;padding:8px 16px;">
<p style="font-size:13px;color:#cbd5e1;">Rechercher un prompt, un tag ou @utilisateur…</p>
</div>
<div style="background:#2563eb;border-radius:8px;padding:8px 18px;">
<p style="font-size:13px;font-weight:600;color:white;">+ Nouveau Prompt</p>
</div>
<div style="width:32px;height:32px;border-radius:50%;background:#e2e8f0;display:flex;align-items:center;justify-content:center;">
<p style="font-size:12px;font-weight:600;color:#64748b;">SV</p>
</div>
</div>
</div>
<!-- ═══════════════════════════════════════════════════ -->
<!-- PAGE 6 — CODE SVG -->
<!-- ═══════════════════════════════════════════════════ -->
<div class="page page-break">
<p class="section-label">06 — CODE SOURCE</p>
<h2 class="section-title">SVG prêts à l'emploi</h2>
<p style="font-size:14px;color:#475569;margin-bottom:32px;line-height:1.8;">
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).
</p>
<!-- Icône app -->
<p style="font-size:11px;letter-spacing:0.14em;color:#94a3b8;margin-bottom:12px;">ICÔNE APPLICATION (48×48)</p>
<pre style="background:#0f172a;color:#e2e8f0;padding:24px;border-radius:10px;font-family:'DM Mono',monospace;font-size:12px;line-height:1.7;overflow-x:auto;margin-bottom:24px;"><code>&lt;svg width="48" height="48" viewBox="0 0 48 48"
fill="none" xmlns="http://www.w3.org/2000/svg"&gt;
&lt;rect width="48" height="48" rx="12" fill="#2563eb"/&gt;
&lt;rect x="8" y="8" width="9" height="32" rx="2" fill="white"/&gt;
&lt;rect x="20" y="14" width="9" height="32" rx="2" fill="white" opacity="0.7"/&gt;
&lt;rect x="32" y="20" width="9" height="32" rx="2" fill="white" opacity="0.4"/&gt;
&lt;/svg&gt;</code></pre>
<!-- Signe seul -->
<p style="font-size:11px;letter-spacing:0.14em;color:#94a3b8;margin-bottom:12px;">SIGNE SEUL — COULEUR</p>
<pre style="background:#0f172a;color:#e2e8f0;padding:24px;border-radius:10px;font-family:'DM Mono',monospace;font-size:12px;line-height:1.7;overflow-x:auto;margin-bottom:24px;"><code>&lt;svg width="82" height="78" viewBox="0 0 82 78"
fill="none" xmlns="http://www.w3.org/2000/svg"&gt;
&lt;rect x="0" y="0" width="18" height="72" rx="4" fill="#1d4ed8"/&gt;
&lt;rect x="24" y="13" width="18" height="72" rx="4" fill="#2563eb"/&gt;
&lt;rect x="48" y="26" width="18" height="72" rx="4" fill="#3b82f6"/&gt;
&lt;/svg&gt;</code></pre>
<!-- Logo complet -->
<p style="font-size:11px;letter-spacing:0.14em;color:#94a3b8;margin-bottom:12px;">SIGNE SEUL — VERSION DARK (sur fond sombre)</p>
<pre style="background:#0f172a;color:#e2e8f0;padding:24px;border-radius:10px;font-family:'DM Mono',monospace;font-size:12px;line-height:1.7;overflow-x:auto;margin-bottom:24px;"><code>&lt;svg width="82" height="78" viewBox="0 0 82 78"
fill="none" xmlns="http://www.w3.org/2000/svg"&gt;
&lt;rect x="0" y="0" width="18" height="72" rx="4" fill="#3b82f6"/&gt;
&lt;rect x="24" y="13" width="18" height="72" rx="4" fill="#3b82f6" opacity="0.65"/&gt;
&lt;rect x="48" y="26" width="18" height="72" rx="4" fill="#3b82f6" opacity="0.35"/&gt;
&lt;/svg&gt;</code></pre>
<!-- Monochrome -->
<p style="font-size:11px;letter-spacing:0.14em;color:#94a3b8;margin-bottom:12px;">SIGNE SEUL — MONOCHROME</p>
<pre style="background:#0f172a;color:#e2e8f0;padding:24px;border-radius:10px;font-family:'DM Mono',monospace;font-size:12px;line-height:1.7;overflow-x:auto;"><code>&lt;svg width="82" height="78" viewBox="0 0 82 78"
fill="none" xmlns="http://www.w3.org/2000/svg"&gt;
&lt;rect x="0" y="0" width="18" height="72" rx="4" fill="#0f172a"/&gt;
&lt;rect x="24" y="13" width="18" height="72" rx="4" fill="#0f172a" opacity="0.5"/&gt;
&lt;rect x="48" y="26" width="18" height="72" rx="4" fill="#0f172a" opacity="0.22"/&gt;
&lt;/svg&gt;</code></pre>
</div>
<!-- FOOTER -->
<div class="doc-footer">
<p>© 2026 <strong>Social Nexus</strong> · Tous droits réservés</p>
<p>Brand Guidelines v1.0 · Confidentiel</p>
</div>
</body>
</html>