926 lines
35 KiB
HTML
926 lines
35 KiB
HTML
<!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 #Cours #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><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></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><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></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><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></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><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></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>
|