1c5a58e09a
Bascule du domaine principal vers rubis.pro / app.rubis.pro : - K3s ConfigMaps (api.yml, web.yml) : APP_URL, WEB_URL, COOKIE_DOMAIN, OAUTH callbacks pointent vers app.rubis.pro - Dockerfile.web : ARG VITE_API_URL et VITE_PUBLIC_LANDING_URL - Workflows Gitea : commentaires + build args web → rubis.pro - Code API (mail_dispatcher, send_test_email, config/mail) : defaults env LANDING_URL et MAIL_FROM_ADDRESS migrés - Templates env (.env.example) idem - Docs (architecture, backend, frontend, brand-identity) idem - AGENTS.md / CLAUDE.md / deploy-memory : pointeurs domaine MAJ Note : MAIL_FROM_ADDRESS dans le secret K3s reste sur rubis@arthurbarre.fr tant que le domaine rubis.pro n'est pas Verified dans Resend. À switcher manuellement après vérif Resend. Compat : un 301 Traefik redirige rubis.arthurbarre.fr → rubis.pro (et app.X aussi) — config Ansible dans le repo proxmox. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
1131 lines
52 KiB
HTML
1131 lines
52 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Rubis Sur l'Ongle — Identité de marque v0.1</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
/* Anchor palette */
|
|
--rubis: #9F1239;
|
|
--rubis-deep: #771328;
|
|
--rubis-light: #C9415C;
|
|
--rubis-glow: #FBE4EA;
|
|
|
|
--ink: #1A1410; /* warm near-black */
|
|
--ink-2: #4F4640;
|
|
--ink-3: #8A7F76;
|
|
--line: #E8E0D6;
|
|
--cream: #FAF7F2;
|
|
--cream-2: #F5EFE7;
|
|
--gold: #B89F6B; /* discreet accent, used sparingly */
|
|
|
|
--display: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
--body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
|
|
}
|
|
* { box-sizing: border-box; }
|
|
html, body {
|
|
margin: 0; padding: 0;
|
|
background: var(--cream);
|
|
color: var(--ink);
|
|
font-family: var(--body);
|
|
font-size: 15px;
|
|
line-height: 1.55;
|
|
font-feature-settings: "ss01", "cv11";
|
|
}
|
|
::selection { background: var(--rubis); color: white; }
|
|
|
|
/* Layout */
|
|
.page-header {
|
|
padding: 64px 64px 40px;
|
|
border-bottom: 1px solid var(--line);
|
|
background: var(--cream);
|
|
position: relative;
|
|
}
|
|
.page-header::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 64px; left: 64px;
|
|
width: 8px; height: 8px;
|
|
background: var(--rubis);
|
|
transform: rotate(45deg);
|
|
}
|
|
.eyebrow {
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.16em;
|
|
color: var(--rubis);
|
|
font-weight: 600;
|
|
margin-bottom: 8px;
|
|
padding-left: 22px;
|
|
}
|
|
.page-header h1 {
|
|
font-family: var(--display);
|
|
font-weight: 700;
|
|
font-size: 56px;
|
|
line-height: 1.05;
|
|
letter-spacing: -0.025em;
|
|
margin: 0 0 8px;
|
|
max-width: 760px;
|
|
}
|
|
.page-header h1 em {
|
|
font-style: italic;
|
|
color: var(--rubis);
|
|
}
|
|
.page-header .meta {
|
|
color: var(--ink-3);
|
|
font-size: 13px;
|
|
max-width: 600px;
|
|
}
|
|
main { padding: 56px 64px 96px; max-width: 1280px; }
|
|
@media (max-width: 720px) {
|
|
.page-header { padding: 40px 28px 28px; }
|
|
.page-header::before { top: 40px; left: 28px; }
|
|
.eyebrow { padding-left: 22px; }
|
|
.page-header h1 { font-size: 36px; }
|
|
main { padding: 32px 28px 64px; }
|
|
}
|
|
|
|
section {
|
|
margin-bottom: 80px;
|
|
scroll-margin-top: 24px;
|
|
}
|
|
section > .section-head {
|
|
margin-bottom: 32px;
|
|
border-top: 1px solid var(--line);
|
|
padding-top: 32px;
|
|
}
|
|
section .section-head .num {
|
|
font-family: var(--display);
|
|
font-weight: 600;
|
|
color: var(--rubis);
|
|
font-size: 14px;
|
|
margin-bottom: 4px;
|
|
display: block;
|
|
}
|
|
section h2 {
|
|
font-family: var(--display);
|
|
font-weight: 600;
|
|
font-size: 32px;
|
|
letter-spacing: -0.018em;
|
|
margin: 0 0 8px;
|
|
}
|
|
section .section-head p {
|
|
color: var(--ink-2);
|
|
font-size: 16px;
|
|
max-width: 640px;
|
|
margin: 0;
|
|
}
|
|
|
|
h3 {
|
|
font-family: var(--display);
|
|
font-weight: 600;
|
|
font-size: 18px;
|
|
letter-spacing: -0.01em;
|
|
margin: 0 0 8px;
|
|
}
|
|
h4 {
|
|
font-family: var(--display);
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
color: var(--ink-3);
|
|
margin: 0 0 10px;
|
|
}
|
|
p { margin: 0 0 12px; color: var(--ink-2); }
|
|
|
|
.card {
|
|
background: white;
|
|
border: 1px solid var(--line);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
.card-pad { padding: 24px; }
|
|
.card-cream { background: var(--cream-2); }
|
|
|
|
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
|
|
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
|
|
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
|
|
@media (max-width: 980px) {
|
|
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; }
|
|
}
|
|
@media (max-width: 600px) {
|
|
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
|
|
}
|
|
|
|
/* ===== PRINCIPLES ===== */
|
|
.principles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
|
|
@media (max-width: 980px) { .principles { grid-template-columns: 1fr 1fr; } }
|
|
@media (max-width: 600px) { .principles { grid-template-columns: 1fr; } }
|
|
.principle {
|
|
background: white;
|
|
border: 1px solid var(--line);
|
|
border-radius: 8px;
|
|
padding: 24px 20px;
|
|
position: relative;
|
|
}
|
|
.principle .gem {
|
|
width: 14px; height: 14px;
|
|
background: var(--rubis);
|
|
transform: rotate(45deg);
|
|
margin-bottom: 16px;
|
|
}
|
|
.principle h3 { font-size: 16px; margin-bottom: 6px; }
|
|
.principle p { font-size: 13px; line-height: 1.5; margin: 0; }
|
|
|
|
/* ===== LOGO DIRECTIONS ===== */
|
|
.logo-card { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; min-height: 320px; }
|
|
@media (max-width: 880px) { .logo-card { grid-template-columns: 1fr; } }
|
|
.logo-canvas {
|
|
background: var(--cream-2);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 48px;
|
|
border-right: 1px solid var(--line);
|
|
min-height: 280px;
|
|
}
|
|
.logo-canvas.dark { background: var(--ink); }
|
|
.logo-info { padding: 28px 28px 24px; }
|
|
.logo-info h3 { font-family: var(--display); font-size: 22px; letter-spacing: -0.012em; margin-bottom: 4px; }
|
|
.logo-info .tagline { font-size: 13px; color: var(--rubis); font-weight: 500; margin-bottom: 14px; text-transform: uppercase; letter-spacing: 0.06em; }
|
|
.logo-info .desc { font-size: 14px; color: var(--ink-2); line-height: 1.55; margin-bottom: 14px; }
|
|
.logo-info .pros, .logo-info .cons {
|
|
font-size: 12.5px;
|
|
line-height: 1.5;
|
|
margin-bottom: 6px;
|
|
}
|
|
.logo-info .pros::before { content: "✓ "; color: var(--rubis); font-weight: 700; }
|
|
.logo-info .cons::before { content: "△ "; color: var(--gold); font-weight: 700; }
|
|
.size-strip {
|
|
border-top: 1px solid var(--line);
|
|
padding: 20px 24px;
|
|
background: var(--cream);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 24px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.size-strip .item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
.size-strip .item .label {
|
|
font-size: 10px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
color: var(--ink-3);
|
|
}
|
|
|
|
/* ===== COLOR PALETTE ===== */
|
|
.palette-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr; gap: 12px; }
|
|
@media (max-width: 980px) { .palette-grid { grid-template-columns: 1fr 1fr 1fr; } }
|
|
@media (max-width: 600px) { .palette-grid { grid-template-columns: 1fr 1fr; } }
|
|
.swatch {
|
|
border: 1px solid var(--line);
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
}
|
|
.swatch .chip { height: 120px; }
|
|
.swatch .meta { padding: 12px 14px; }
|
|
.swatch .meta .name { font-weight: 600; font-size: 13px; }
|
|
.swatch .meta .hex { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--ink-3); }
|
|
.swatch .meta .role { font-size: 11px; color: var(--ink-3); margin-top: 4px; }
|
|
|
|
/* ===== TYPOGRAPHY ===== */
|
|
.type-spec { padding: 28px; background: white; border: 1px solid var(--line); border-radius: 8px; }
|
|
.type-spec .face { margin-bottom: 8px; font-size: 12px; color: var(--rubis); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
|
|
.type-spec .sample { line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 8px; }
|
|
.type-spec .sample.display { font-family: var(--display); font-weight: 600; font-size: 56px; }
|
|
.type-spec .sample.body { font-family: var(--body); font-weight: 400; font-size: 22px; line-height: 1.45; letter-spacing: -0.005em; }
|
|
.type-spec .specs { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 11.5px; color: var(--ink-3); border-top: 1px solid var(--line); padding-top: 12px; margin-top: 16px; }
|
|
.type-spec .specs span { display: inline-block; margin-right: 16px; }
|
|
.type-scale { display: grid; gap: 8px; }
|
|
.type-scale .row {
|
|
display: grid; grid-template-columns: 80px 1fr; gap: 16px;
|
|
align-items: baseline;
|
|
border-bottom: 1px dashed var(--line);
|
|
padding: 10px 0;
|
|
}
|
|
.type-scale .row .label {
|
|
font-family: ui-monospace, monospace;
|
|
font-size: 11px;
|
|
color: var(--ink-3);
|
|
}
|
|
.type-scale .row .demo { font-family: var(--display); }
|
|
.type-scale .row .demo.body { font-family: var(--body); }
|
|
|
|
/* ===== APPLICATIONS ===== */
|
|
.app-icon-shelf {
|
|
display: flex;
|
|
gap: 24px;
|
|
align-items: flex-end;
|
|
padding: 32px;
|
|
background: linear-gradient(180deg, var(--cream-2) 0%, var(--cream) 100%);
|
|
border-radius: 8px;
|
|
border: 1px solid var(--line);
|
|
flex-wrap: wrap;
|
|
}
|
|
.app-icon {
|
|
background: var(--rubis);
|
|
border-radius: 22%;
|
|
box-shadow: 0 8px 24px -8px rgba(159, 18, 57, 0.45), 0 2px 6px rgba(0,0,0,0.06);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
}
|
|
.icon-meta {
|
|
display: flex; flex-direction: column; align-items: center; gap: 8px;
|
|
}
|
|
.icon-meta .label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); }
|
|
|
|
.browser {
|
|
background: white; border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
|
|
}
|
|
.browser .bar {
|
|
display: flex; align-items: center; gap: 8px;
|
|
background: var(--cream-2); padding: 10px 14px; border-bottom: 1px solid var(--line);
|
|
}
|
|
.browser .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
|
|
.browser .url { flex: 1; background: white; border: 1px solid var(--line); border-radius: 4px; font-size: 11.5px; padding: 4px 10px; color: var(--ink-3); font-family: ui-monospace, monospace; margin-left: 12px; }
|
|
|
|
.signature {
|
|
padding: 24px 28px;
|
|
background: white;
|
|
border: 1px solid var(--line);
|
|
border-radius: 8px;
|
|
}
|
|
.signature .from { font-family: var(--display); font-size: 14px; color: var(--ink-3); margin-bottom: 6px; }
|
|
.signature .subject { font-family: var(--display); font-weight: 600; font-size: 17px; margin-bottom: 16px; }
|
|
.signature .body { font-size: 14px; line-height: 1.6; margin-bottom: 18px; color: var(--ink); }
|
|
.signature .sig {
|
|
border-top: 1px solid var(--line);
|
|
padding-top: 14px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
}
|
|
.signature .sig .name { font-weight: 600; font-size: 13px; }
|
|
.signature .sig .role { font-size: 11.5px; color: var(--ink-3); }
|
|
.signature .sig .brand-mark { width: 32px; height: 32px; }
|
|
|
|
/* ===== DO / DONT ===== */
|
|
.dodont { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
|
|
@media (max-width: 720px) { .dodont { grid-template-columns: 1fr; } }
|
|
.do, .dont { padding: 24px; border-radius: 8px; }
|
|
.do { background: white; border: 1px solid var(--line); }
|
|
.dont { background: white; border: 1px solid var(--line); position: relative; }
|
|
.do h4, .dont h4 { margin-bottom: 12px; color: var(--ink); }
|
|
.do h4::before { content: "✓"; color: var(--rubis); margin-right: 6px; font-weight: 700; }
|
|
.dont h4::before { content: "✕"; color: var(--ink-3); margin-right: 6px; font-weight: 700; }
|
|
.do ul, .dont ul { margin: 0; padding-left: 18px; font-size: 13.5px; color: var(--ink-2); }
|
|
.do li, .dont li { margin-bottom: 6px; }
|
|
|
|
.toc { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 24px; padding-left: 22px; }
|
|
.toc a {
|
|
color: var(--ink-2);
|
|
font-size: 12px;
|
|
text-decoration: none;
|
|
border-bottom: 1px solid transparent;
|
|
padding-bottom: 1px;
|
|
}
|
|
.toc a:hover { color: var(--rubis); border-bottom-color: var(--rubis); }
|
|
.toc .sep { color: var(--line); }
|
|
|
|
.pull {
|
|
font-family: var(--display);
|
|
font-size: 22px;
|
|
line-height: 1.35;
|
|
letter-spacing: -0.012em;
|
|
font-weight: 500;
|
|
color: var(--ink);
|
|
border-left: 3px solid var(--rubis);
|
|
padding: 8px 0 8px 20px;
|
|
margin: 16px 0;
|
|
}
|
|
.pull em { font-style: italic; color: var(--rubis); }
|
|
|
|
.voice-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
background: white;
|
|
border: 1px solid var(--line);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
.voice-table th, .voice-table td {
|
|
padding: 14px 18px;
|
|
text-align: left;
|
|
border-bottom: 1px solid var(--line);
|
|
font-size: 13.5px;
|
|
vertical-align: top;
|
|
}
|
|
.voice-table th {
|
|
background: var(--cream-2);
|
|
font-family: var(--display);
|
|
font-weight: 600;
|
|
font-size: 12px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
color: var(--ink-2);
|
|
}
|
|
.voice-table td:first-child { font-weight: 600; color: var(--ink); width: 22%; }
|
|
.voice-table tr:last-child td { border-bottom: none; }
|
|
|
|
.footnote {
|
|
margin-top: 64px;
|
|
padding: 20px 24px;
|
|
border: 1px dashed var(--line);
|
|
border-radius: 8px;
|
|
font-size: 13px;
|
|
color: var(--ink-2);
|
|
background: white;
|
|
}
|
|
.footnote h3 { color: var(--ink); margin-top: 0; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<header class="page-header">
|
|
<div class="eyebrow">Identité de marque · v0.1</div>
|
|
<h1>Rubis Sur l'Ongle —<br>une marque <em>chaleureuse</em>, précise, et fière de l'être.</h1>
|
|
<p class="meta">Document de travail · 4 directions de logo, palette ancrée rubis, paire typographique, applications. Choisis une direction (ou un mix) et on monte en fidélité.</p>
|
|
<nav class="toc">
|
|
<a href="#principes">1. Principes</a><span class="sep">·</span>
|
|
<a href="#logo">2. Logo (4 directions)</a><span class="sep">·</span>
|
|
<a href="#palette">3. Palette</a><span class="sep">·</span>
|
|
<a href="#typo">4. Typographie</a><span class="sep">·</span>
|
|
<a href="#applications">5. Applications</a><span class="sep">·</span>
|
|
<a href="#voix">6. Voix & ton</a><span class="sep">·</span>
|
|
<a href="#dodont">7. Do & Don't</a>
|
|
</nav>
|
|
</header>
|
|
|
|
<main>
|
|
|
|
<!-- ============================================================ -->
|
|
<!-- 1. PRINCIPES -->
|
|
<!-- ============================================================ -->
|
|
<section id="principes">
|
|
<div class="section-head">
|
|
<span class="num">01</span>
|
|
<h2>Quatre principes</h2>
|
|
<p>Ils ne décrivent pas la marque comme elle est aujourd'hui — ils décrivent comment on tranche quand on hésite.</p>
|
|
</div>
|
|
<div class="principles">
|
|
<div class="principle">
|
|
<div class="gem"></div>
|
|
<h3>Chaleureux, pas corporate</h3>
|
|
<p>Couleurs chaudes, neutres crème, typographie humaniste. On parle à un boulanger ou une consultante, pas à une DAF.</p>
|
|
</div>
|
|
<div class="principle">
|
|
<div class="gem"></div>
|
|
<h3>Précis, pas froid</h3>
|
|
<p>Les chiffres sont nets. Les marges sont disciplinées. La grille tient. Mais on garde toujours un peu d'âme — un détail typo, un mot bien placé.</p>
|
|
</div>
|
|
<div class="principle">
|
|
<div class="gem"></div>
|
|
<h3>Action, pas finance</h3>
|
|
<p>On dit "lancer", "récupérer", "gagné". Jamais "DSO", "créances", "AR aging". La marque vit dans le verbe, pas dans le bilan.</p>
|
|
</div>
|
|
<div class="principle">
|
|
<div class="gem"></div>
|
|
<h3>Le rubis est central, pas décoratif</h3>
|
|
<p>Une couleur, une forme. Pas trois rouges, pas dix variantes du logo. Tout part d'une seule pierre.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ============================================================ -->
|
|
<!-- 2. LOGO DIRECTIONS -->
|
|
<!-- ============================================================ -->
|
|
<section id="logo">
|
|
<div class="section-head">
|
|
<span class="num">02</span>
|
|
<h2>Quatre directions de logo</h2>
|
|
<p>Chaque direction porte une promesse différente. Lis les pros/cons, regarde les tailles, et dis-moi celle (ou celles) qu'on creuse.</p>
|
|
</div>
|
|
|
|
<!-- DIRECTION A -->
|
|
<div class="card" style="margin-bottom: 24px;">
|
|
<div class="logo-card">
|
|
<div class="logo-canvas">
|
|
<svg viewBox="0 0 200 200" width="180" height="180" xmlns="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
<linearGradient id="gemA1" x1="0" x2="0" y1="0" y2="1">
|
|
<stop offset="0%" stop-color="#C9415C"/>
|
|
<stop offset="100%" stop-color="#9F1239"/>
|
|
</linearGradient>
|
|
</defs>
|
|
<polygon points="100,10 190,100 100,190 10,100" fill="url(#gemA1)"/>
|
|
<line x1="10" y1="100" x2="190" y2="100" stroke="rgba(255,255,255,0.55)" stroke-width="1.2"/>
|
|
<line x1="55" y1="55" x2="100" y2="100" stroke="rgba(255,255,255,0.4)" stroke-width="1"/>
|
|
<line x1="145" y1="55" x2="100" y2="100" stroke="rgba(255,255,255,0.4)" stroke-width="1"/>
|
|
<line x1="55" y1="145" x2="100" y2="100" stroke="rgba(0,0,0,0.18)" stroke-width="1"/>
|
|
<line x1="145" y1="145" x2="100" y2="100" stroke="rgba(0,0,0,0.18)" stroke-width="1"/>
|
|
</svg>
|
|
</div>
|
|
<div class="logo-info">
|
|
<h3>Direction A</h3>
|
|
<div class="tagline">Le gem facetté</div>
|
|
<p class="desc">Un rubis géométrique, vu de dessus, avec ses facettes suggérées. Lisible à toutes tailles, immédiatement « précieux », fonctionne en favicon dès 16 px.</p>
|
|
<p class="pros">Iconique, scalable, ownable. Naturellement cohérent avec le compteur ◆ déjà dans les wireframes.</p>
|
|
<p class="pros">Marche en monochrome, en knockout, en filigrane. Animation possible (rotation lente, sparkle).</p>
|
|
<p class="cons">"Risque diamant" — proche visuellement de logos joaillerie / fintech. À différencier par la couleur (rubis profond, pas saphir).</p>
|
|
</div>
|
|
</div>
|
|
<div class="size-strip">
|
|
<div class="item">
|
|
<svg viewBox="0 0 200 200" width="64" height="64"><polygon points="100,10 190,100 100,190 10,100" fill="#9F1239"/><line x1="10" y1="100" x2="190" y2="100" stroke="rgba(255,255,255,0.55)" stroke-width="1.5"/></svg>
|
|
<span class="label">64 px</span>
|
|
</div>
|
|
<div class="item">
|
|
<svg viewBox="0 0 200 200" width="32" height="32"><polygon points="100,10 190,100 100,190 10,100" fill="#9F1239"/></svg>
|
|
<span class="label">32 px</span>
|
|
</div>
|
|
<div class="item">
|
|
<svg viewBox="0 0 200 200" width="16" height="16"><polygon points="100,10 190,100 100,190 10,100" fill="#9F1239"/></svg>
|
|
<span class="label">16 px (favicon)</span>
|
|
</div>
|
|
<div class="item">
|
|
<div style="display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: -0.015em;">
|
|
<svg viewBox="0 0 200 200" width="28" height="28"><polygon points="100,10 190,100 100,190 10,100" fill="#9F1239"/></svg>
|
|
Rubis
|
|
</div>
|
|
<span class="label">Wordmark horizontal</span>
|
|
</div>
|
|
<div class="item">
|
|
<div style="background: var(--ink); padding: 10px 14px; border-radius: 4px; display: flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 700; font-size: 16px; color: white;">
|
|
<svg viewBox="0 0 200 200" width="20" height="20"><polygon points="100,10 190,100 100,190 10,100" fill="#9F1239"/></svg>
|
|
Rubis
|
|
</div>
|
|
<span class="label">Sur fond sombre</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- DIRECTION B -->
|
|
<div class="card" style="margin-bottom: 24px;">
|
|
<div class="logo-card">
|
|
<div class="logo-canvas">
|
|
<svg viewBox="0 0 200 220" width="160" height="176" xmlns="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
<linearGradient id="gemB1" x1="0" x2="0" y1="0" y2="1">
|
|
<stop offset="0%" stop-color="#C9415C"/>
|
|
<stop offset="100%" stop-color="#771328"/>
|
|
</linearGradient>
|
|
</defs>
|
|
<path d="M 100 10
|
|
C 175 50, 175 170, 100 210
|
|
C 25 170, 25 50, 100 10 Z"
|
|
fill="url(#gemB1)"/>
|
|
<ellipse cx="80" cy="70" rx="22" ry="40" fill="rgba(255,255,255,0.18)" transform="rotate(-25 80 70)"/>
|
|
</svg>
|
|
</div>
|
|
<div class="logo-info">
|
|
<h3>Direction B</h3>
|
|
<div class="tagline">Le rubis brut</div>
|
|
<p class="desc">Une forme en amande/œil, courbe et organique. Joue le rubis "non taillé" — moins technique, plus humain. Laisse passer un reflet (highlight) qui apporte de la matière.</p>
|
|
<p class="pros">Plus chaleureux et accessible que A. Différencie radicalement de Stripe, Notion, Linear et toute la galaxie tech B2B.</p>
|
|
<p class="pros">Très bonne tenue en illustration / éditorial — la forme accepte d'être étirée, dupliquée, animée comme une goutte.</p>
|
|
<p class="cons">Moins lisible en très petite taille (le reflet disparaît à 16 px → fallback nécessaire).</p>
|
|
<p class="cons">"Trop joaillerie" si manipulé sans rigueur. À ancrer par une typographie nette pour ne pas glisser vers Cartier.</p>
|
|
</div>
|
|
</div>
|
|
<div class="size-strip">
|
|
<div class="item">
|
|
<svg viewBox="0 0 200 220" width="56" height="62"><path d="M 100 10 C 175 50, 175 170, 100 210 C 25 170, 25 50, 100 10 Z" fill="#9F1239"/></svg>
|
|
<span class="label">64 px</span>
|
|
</div>
|
|
<div class="item">
|
|
<svg viewBox="0 0 200 220" width="28" height="31"><path d="M 100 10 C 175 50, 175 170, 100 210 C 25 170, 25 50, 100 10 Z" fill="#9F1239"/></svg>
|
|
<span class="label">32 px</span>
|
|
</div>
|
|
<div class="item">
|
|
<svg viewBox="0 0 200 220" width="14" height="16"><path d="M 100 10 C 175 50, 175 170, 100 210 C 25 170, 25 50, 100 10 Z" fill="#9F1239"/></svg>
|
|
<span class="label">16 px</span>
|
|
</div>
|
|
<div class="item">
|
|
<div style="display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: -0.015em;">
|
|
<svg viewBox="0 0 200 220" width="22" height="24"><path d="M 100 10 C 175 50, 175 170, 100 210 C 25 170, 25 50, 100 10 Z" fill="#9F1239"/></svg>
|
|
Rubis
|
|
</div>
|
|
<span class="label">Wordmark</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- DIRECTION C -->
|
|
<div class="card" style="margin-bottom: 24px;">
|
|
<div class="logo-card">
|
|
<div class="logo-canvas">
|
|
<div style="font-family: var(--display); font-weight: 800; font-size: 96px; letter-spacing: -0.04em; color: var(--rubis); display: flex; align-items: baseline; line-height: 1;">
|
|
rub<span style="position: relative; display: inline-block;">i<span style="position: absolute; top: -2px; left: 50%; width: 16px; height: 16px; background: var(--rubis); transform: translateX(-50%) rotate(45deg);"></span></span>s
|
|
</div>
|
|
</div>
|
|
<div class="logo-info">
|
|
<h3>Direction C</h3>
|
|
<div class="tagline">Le wordmark</div>
|
|
<p class="desc">Pas de symbole — le mot lui-même <i>est</i> le logo. Le point sur le « i » devient un rubis. Sophistiqué, ownable par la typo seule, parfait sur la landing en grande taille.</p>
|
|
<p class="pros">Lisibilité maximale du nom — la marque est sa propre signature. Très moderne (cf. Notion, Vercel, Stripe — tous wordmark-only).</p>
|
|
<p class="pros">L'accent gem donne juste assez de personnalité pour ne pas être un wordmark générique.</p>
|
|
<p class="cons">Pas de monogramme autonome — il faut quand même un picto pour l'app icon, le favicon, l'avatar Twitter. À combiner avec A ou B.</p>
|
|
<p class="cons">Très dépendant de la qualité de la typo finale. Bricolage Grotesque tient bien, mais une typo custom serait l'idéal en v2.</p>
|
|
</div>
|
|
</div>
|
|
<div class="size-strip">
|
|
<div class="item">
|
|
<div style="font-family: var(--display); font-weight: 800; font-size: 32px; letter-spacing: -0.04em; color: var(--rubis); display: flex; align-items: baseline; line-height: 1;">
|
|
rub<span style="position: relative; display: inline-block;">i<span style="position: absolute; top: -1px; left: 50%; width: 6px; height: 6px; background: var(--rubis); transform: translateX(-50%) rotate(45deg);"></span></span>s
|
|
</div>
|
|
<span class="label">Display</span>
|
|
</div>
|
|
<div class="item">
|
|
<div style="font-family: var(--display); font-weight: 800; font-size: 18px; letter-spacing: -0.04em; color: var(--rubis); display: flex; align-items: baseline; line-height: 1;">
|
|
rub<span style="position: relative; display: inline-block;">i<span style="position: absolute; top: 0; left: 50%; width: 4px; height: 4px; background: var(--rubis); transform: translateX(-50%) rotate(45deg);"></span></span>s
|
|
</div>
|
|
<span class="label">Petit</span>
|
|
</div>
|
|
<div class="item">
|
|
<div style="background: var(--ink); padding: 12px 18px; border-radius: 4px; font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: -0.04em; color: white; display: flex; align-items: baseline; line-height: 1;">
|
|
rub<span style="position: relative; display: inline-block;">i<span style="position: absolute; top: 0; left: 50%; width: 5px; height: 5px; background: var(--rubis); transform: translateX(-50%) rotate(45deg);"></span></span>s
|
|
</div>
|
|
<span class="label">Sur sombre</span>
|
|
</div>
|
|
<div class="item">
|
|
<div style="background: var(--cream-2); padding: 10px 14px; border: 1px solid var(--line); border-radius: 4px; font-family: var(--display); font-style: italic; font-weight: 600; font-size: 14px; color: var(--ink-2);">
|
|
rubis<span style="color: var(--rubis); margin-left: 1px;">.</span><span style="font-style: normal;">sur-l-ongle.fr</span>
|
|
</div>
|
|
<span class="label">Domaine</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- DIRECTION D -->
|
|
<div class="card" style="margin-bottom: 24px;">
|
|
<div class="logo-card">
|
|
<div class="logo-canvas">
|
|
<svg viewBox="0 0 240 200" width="200" height="166" xmlns="http://www.w3.org/2000/svg">
|
|
<!-- the gem on top -->
|
|
<polygon points="120,10 165,55 120,100 75,55" fill="#9F1239"/>
|
|
<line x1="75" y1="55" x2="165" y2="55" stroke="rgba(255,255,255,0.55)" stroke-width="1.2"/>
|
|
<!-- the nail (oval / cuvette) -->
|
|
<ellipse cx="120" cy="155" rx="90" ry="22" fill="none" stroke="#1A1410" stroke-width="3"/>
|
|
<!-- gem casts a small shadow on the nail -->
|
|
<ellipse cx="120" cy="155" rx="14" ry="3" fill="rgba(0,0,0,0.15)"/>
|
|
</svg>
|
|
</div>
|
|
<div class="logo-info">
|
|
<h3>Direction D</h3>
|
|
<div class="tagline">Sur l'ongle (littéral)</div>
|
|
<p class="desc">L'expression française rendue littéralement : un rubis posé sur un ongle. Le geste du paiement comptant, immédiat — exactement la promesse du produit.</p>
|
|
<p class="pros">Mémorable et inattendue. C'est la direction qui ferait le plus parler — un détail qui se raconte ("tu as remarqué le logo ?").</p>
|
|
<p class="pros">Très ancrée culturellement française : l'expression existe depuis le XVIIIᵉ, l'image résonne.</p>
|
|
<p class="cons">Polarisante. Risque d'être lu comme "manucure" ou "produit cosmétique" hors contexte.</p>
|
|
<p class="cons">Difficile à utiliser en favicon — la composition perd à très petite taille. Nécessiterait un mark simplifié pour les contextes restreints.</p>
|
|
</div>
|
|
</div>
|
|
<div class="size-strip">
|
|
<div class="item">
|
|
<svg viewBox="0 0 240 200" width="80" height="66">
|
|
<polygon points="120,10 165,55 120,100 75,55" fill="#9F1239"/>
|
|
<ellipse cx="120" cy="155" rx="90" ry="22" fill="none" stroke="#1A1410" stroke-width="4"/>
|
|
</svg>
|
|
<span class="label">80 px</span>
|
|
</div>
|
|
<div class="item">
|
|
<svg viewBox="0 0 240 200" width="40" height="33">
|
|
<polygon points="120,10 165,55 120,100 75,55" fill="#9F1239"/>
|
|
<ellipse cx="120" cy="155" rx="90" ry="22" fill="none" stroke="#1A1410" stroke-width="6"/>
|
|
</svg>
|
|
<span class="label">40 px</span>
|
|
</div>
|
|
<div class="item">
|
|
<svg viewBox="0 0 200 200" width="20" height="20"><polygon points="100,10 190,100 100,190 10,100" fill="#9F1239"/></svg>
|
|
<span class="label">Mark seul (favicon fallback)</span>
|
|
</div>
|
|
<div class="item">
|
|
<div style="display: flex; align-items: center; gap: 12px; font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: -0.015em;">
|
|
<svg viewBox="0 0 240 200" width="32" height="27">
|
|
<polygon points="120,10 165,55 120,100 75,55" fill="#9F1239"/>
|
|
<ellipse cx="120" cy="155" rx="90" ry="22" fill="none" stroke="#1A1410" stroke-width="7"/>
|
|
</svg>
|
|
Rubis Sur l'Ongle
|
|
</div>
|
|
<span class="label">Lockup</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card card-cream" style="padding: 24px 28px; margin-top: 24px;">
|
|
<h3 style="margin-bottom: 8px;">Recommandation</h3>
|
|
<p style="margin: 0; color: var(--ink-2);">
|
|
<b style="color: var(--ink);">A + C en duo</b> est le pari le plus solide : la <b>direction A</b> (gem facetté) sert de symbole iconique pour favicon, app icon et picto réseaux ; la <b>direction C</b> (wordmark avec gem-dot sur le i) sert de signature pour la landing, l'email, la doc. C'est la combinaison la plus défendable, la plus scalable, et celle qui préserve le mieux la promesse "premium mais accessible".<br><br>
|
|
La <b>direction D</b> (littérale "sur l'ongle") est tentante mais risquée pour la v1 — je la garderais en réserve pour de la communication éditoriale (campagnes ads, illustrations) plutôt qu'en logo principal.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ============================================================ -->
|
|
<!-- 3. PALETTE -->
|
|
<!-- ============================================================ -->
|
|
<section id="palette">
|
|
<div class="section-head">
|
|
<span class="num">03</span>
|
|
<h2>Palette</h2>
|
|
<p>Une seule couleur dominante (le rubis), des neutres chauds, un accent or à doser. Pas de bleu — on n'est pas une fintech.</p>
|
|
</div>
|
|
|
|
<h4>Couleur de marque</h4>
|
|
<div class="palette-grid" style="margin-bottom: 32px;">
|
|
<div class="swatch" style="grid-column: span 2;">
|
|
<div class="chip" style="background: var(--rubis); height: 160px;"></div>
|
|
<div class="meta">
|
|
<div class="name">Rubis</div>
|
|
<div class="hex">#9F1239</div>
|
|
<div class="role">Couleur primaire · CTA · accents · ◆ gamification · jamais en grand aplat (réservé à l'impact)</div>
|
|
</div>
|
|
</div>
|
|
<div class="swatch">
|
|
<div class="chip" style="background: var(--rubis-deep);"></div>
|
|
<div class="meta">
|
|
<div class="name">Rubis profond</div>
|
|
<div class="hex">#771328</div>
|
|
<div class="role">Hover, pressed, headers sombres</div>
|
|
</div>
|
|
</div>
|
|
<div class="swatch">
|
|
<div class="chip" style="background: var(--rubis-light);"></div>
|
|
<div class="meta">
|
|
<div class="name">Rubis clair</div>
|
|
<div class="hex">#C9415C</div>
|
|
<div class="role">Survol, dégradé, illustrations</div>
|
|
</div>
|
|
</div>
|
|
<div class="swatch">
|
|
<div class="chip" style="background: var(--rubis-glow);"></div>
|
|
<div class="meta">
|
|
<div class="name">Glow</div>
|
|
<div class="hex">#FBE4EA</div>
|
|
<div class="role">Backgrounds doux, panneaux mis en avant, succès</div>
|
|
</div>
|
|
</div>
|
|
<div class="swatch">
|
|
<div class="chip" style="background: var(--gold);"></div>
|
|
<div class="meta">
|
|
<div class="name">Or discret</div>
|
|
<div class="hex">#B89F6B</div>
|
|
<div class="role">Accent rare · badges premium · jamais > 5 % de l'écran</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h4>Neutres chauds</h4>
|
|
<div class="palette-grid">
|
|
<div class="swatch" style="grid-column: span 2;">
|
|
<div class="chip" style="background: var(--cream); height: 140px; border-bottom: 1px solid var(--line);"></div>
|
|
<div class="meta">
|
|
<div class="name">Crème (page)</div>
|
|
<div class="hex">#FAF7F2</div>
|
|
<div class="role">Fond principal de la landing et de l'app · plus chaleureux que le blanc pur</div>
|
|
</div>
|
|
</div>
|
|
<div class="swatch">
|
|
<div class="chip" style="background: var(--cream-2);"></div>
|
|
<div class="meta">
|
|
<div class="name">Crème 2</div>
|
|
<div class="hex">#F5EFE7</div>
|
|
<div class="role">Surface secondaire, sidebar</div>
|
|
</div>
|
|
</div>
|
|
<div class="swatch">
|
|
<div class="chip" style="background: var(--line);"></div>
|
|
<div class="meta">
|
|
<div class="name">Lignes</div>
|
|
<div class="hex">#E8E0D6</div>
|
|
<div class="role">Bordures, séparateurs</div>
|
|
</div>
|
|
</div>
|
|
<div class="swatch">
|
|
<div class="chip" style="background: var(--ink-3);"></div>
|
|
<div class="meta">
|
|
<div class="name">Encre 3</div>
|
|
<div class="hex">#8A7F76</div>
|
|
<div class="role">Texte muted, métadonnées</div>
|
|
</div>
|
|
</div>
|
|
<div class="swatch">
|
|
<div class="chip" style="background: var(--ink-2);"></div>
|
|
<div class="meta">
|
|
<div class="name">Encre 2</div>
|
|
<div class="hex">#4F4640</div>
|
|
<div class="role">Corps de texte</div>
|
|
</div>
|
|
</div>
|
|
<div class="swatch">
|
|
<div class="chip" style="background: var(--ink);"></div>
|
|
<div class="meta">
|
|
<div class="name">Encre</div>
|
|
<div class="hex">#1A1410</div>
|
|
<div class="role">Titres, logo mono · noir chaud, jamais #000</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pull" style="margin-top: 28px;">
|
|
Le rubis est rare — c'est ce qui le rend précieux. <em>N'inonde jamais une page de rouge.</em> Une touche de rubis sur un sea of cream attire 100 % du regard.
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ============================================================ -->
|
|
<!-- 4. TYPOGRAPHIE -->
|
|
<!-- ============================================================ -->
|
|
<section id="typo">
|
|
<div class="section-head">
|
|
<span class="num">04</span>
|
|
<h2>Typographie</h2>
|
|
<p>Une paire libre, accessible, et installable en 2 minutes via Google Fonts.</p>
|
|
</div>
|
|
|
|
<div class="grid-2" style="margin-bottom: 24px;">
|
|
<div class="type-spec">
|
|
<div class="face">Display · Titres</div>
|
|
<div class="sample display">Rubis Sur l'Ongle</div>
|
|
<p style="margin: 0; color: var(--ink-2); font-size: 14px;">Titres de pages, headlines de landing, sections, logo wordmark. Apporte le caractère "français contemporain" sans tomber dans le designer-flex.</p>
|
|
<div class="specs">
|
|
<span><b>Bricolage Grotesque</b></span>
|
|
<span>500 / 600 / 700 / 800</span>
|
|
<span>Google Fonts</span>
|
|
</div>
|
|
</div>
|
|
<div class="type-spec">
|
|
<div class="face">Body · Texte courant</div>
|
|
<div class="sample body">Vos factures se relancent toutes seules pendant que vous travaillez.</div>
|
|
<p style="margin: 0; color: var(--ink-2); font-size: 14px;">Tout le reste : paragraphes, UI, formulaires, tableaux, chiffres. Workhorse neutre et hyper-lisible. Standard mais imbattable.</p>
|
|
<div class="specs">
|
|
<span><b>Inter</b></span>
|
|
<span>400 / 500 / 600 / 700</span>
|
|
<span>Google Fonts</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h4>Échelle typographique</h4>
|
|
<div class="card card-pad">
|
|
<div class="type-scale">
|
|
<div class="row">
|
|
<span class="label">Display 56</span>
|
|
<div class="demo" style="font-size: 56px; font-weight: 700; line-height: 1.05; letter-spacing: -0.025em;">Plus jamais de relance</div>
|
|
</div>
|
|
<div class="row">
|
|
<span class="label">H1 · 36</span>
|
|
<div class="demo" style="font-size: 36px; font-weight: 700; line-height: 1.1; letter-spacing: -0.022em;">Vos factures, relancées</div>
|
|
</div>
|
|
<div class="row">
|
|
<span class="label">H2 · 24</span>
|
|
<div class="demo" style="font-size: 24px; font-weight: 600; line-height: 1.2; letter-spacing: -0.015em;">Comment ça marche</div>
|
|
</div>
|
|
<div class="row">
|
|
<span class="label">H3 · 18</span>
|
|
<div class="demo" style="font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em;">Importer vos factures</div>
|
|
</div>
|
|
<div class="row">
|
|
<span class="label">Body · 15</span>
|
|
<div class="demo body" style="font-size: 15px; font-weight: 400; line-height: 1.55;">Glissez-déposez vos PDF. Notre OCR extrait les champs en 3 secondes.</div>
|
|
</div>
|
|
<div class="row">
|
|
<span class="label">Small · 13</span>
|
|
<div class="demo body" style="font-size: 13px; font-weight: 400; line-height: 1.5; color: var(--ink-3);">Aucune carte bancaire requise pour démarrer.</div>
|
|
</div>
|
|
<div class="row">
|
|
<span class="label">Caps · 11</span>
|
|
<div class="demo body" style="font-size: 11px; font-weight: 600; line-height: 1.4; color: var(--rubis); text-transform: uppercase; letter-spacing: 0.12em;">Nouveau · disponible en mai 2026</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ============================================================ -->
|
|
<!-- 5. APPLICATIONS -->
|
|
<!-- ============================================================ -->
|
|
<section id="applications">
|
|
<div class="section-head">
|
|
<span class="num">05</span>
|
|
<h2>Applications</h2>
|
|
<p>Comment l'identité respire dans le réel : icône d'app, signature email, page web, post social.</p>
|
|
</div>
|
|
|
|
<h4>Icône d'application</h4>
|
|
<div class="app-icon-shelf">
|
|
<div class="icon-meta">
|
|
<div class="app-icon" style="width: 128px; height: 128px;">
|
|
<svg viewBox="0 0 200 200" width="76" height="76">
|
|
<polygon points="100,10 190,100 100,190 10,100" fill="white"/>
|
|
<line x1="10" y1="100" x2="190" y2="100" stroke="rgba(159,18,57,0.35)" stroke-width="2"/>
|
|
<line x1="55" y1="55" x2="100" y2="100" stroke="rgba(159,18,57,0.25)" stroke-width="1.5"/>
|
|
<line x1="145" y1="55" x2="100" y2="100" stroke="rgba(159,18,57,0.25)" stroke-width="1.5"/>
|
|
</svg>
|
|
</div>
|
|
<span class="label">128 px · App Store</span>
|
|
</div>
|
|
<div class="icon-meta">
|
|
<div class="app-icon" style="width: 80px; height: 80px;">
|
|
<svg viewBox="0 0 200 200" width="48" height="48">
|
|
<polygon points="100,10 190,100 100,190 10,100" fill="white"/>
|
|
<line x1="10" y1="100" x2="190" y2="100" stroke="rgba(159,18,57,0.35)" stroke-width="2"/>
|
|
</svg>
|
|
</div>
|
|
<span class="label">80 px</span>
|
|
</div>
|
|
<div class="icon-meta">
|
|
<div class="app-icon" style="width: 56px; height: 56px;">
|
|
<svg viewBox="0 0 200 200" width="34" height="34">
|
|
<polygon points="100,10 190,100 100,190 10,100" fill="white"/>
|
|
</svg>
|
|
</div>
|
|
<span class="label">56 px · iOS</span>
|
|
</div>
|
|
<div class="icon-meta">
|
|
<div class="app-icon" style="width: 40px; height: 40px;">
|
|
<svg viewBox="0 0 200 200" width="24" height="24">
|
|
<polygon points="100,10 190,100 100,190 10,100" fill="white"/>
|
|
</svg>
|
|
</div>
|
|
<span class="label">40 px · Dock</span>
|
|
</div>
|
|
<div class="icon-meta">
|
|
<div class="app-icon" style="width: 24px; height: 24px; border-radius: 6px;">
|
|
<svg viewBox="0 0 200 200" width="14" height="14">
|
|
<polygon points="100,10 190,100 100,190 10,100" fill="white"/>
|
|
</svg>
|
|
</div>
|
|
<span class="label">24 px · Tab bar</span>
|
|
</div>
|
|
</div>
|
|
|
|
<h4 style="margin-top: 32px;">Email de relance · signature de marque</h4>
|
|
<div class="signature">
|
|
<div class="from">De : Arthur · SARL Exemple</div>
|
|
<div class="from">À : compta@martin.fr</div>
|
|
<div class="subject">Petit rappel — facture F-2024-0042</div>
|
|
<div class="body">
|
|
Bonjour,<br><br>
|
|
Je me permets un petit rappel concernant la facture <b>F-2024-0042</b> d'un montant de <b>1 240,00 €</b>, échue le <b>15/05/2026</b>.<br><br>
|
|
Avez-vous reçu nos coordonnées de paiement ? Je reste disponible pour toute question.<br><br>
|
|
Bonne journée,
|
|
</div>
|
|
<div class="sig">
|
|
<svg class="brand-mark" viewBox="0 0 200 200">
|
|
<polygon points="100,10 190,100 100,190 10,100" fill="#9F1239"/>
|
|
<line x1="10" y1="100" x2="190" y2="100" stroke="rgba(255,255,255,0.55)" stroke-width="2"/>
|
|
</svg>
|
|
<div>
|
|
<div class="name">Arthur Barré</div>
|
|
<div class="role">SARL Exemple · arthur@exemple.fr</div>
|
|
</div>
|
|
<div style="margin-left: auto; font-family: var(--body); font-size: 11px; color: var(--ink-3); text-align: right;">
|
|
Envoyé via <span style="color: var(--rubis); font-weight: 600;">Rubis</span><br>
|
|
rubis.pro
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h4 style="margin-top: 32px;">Page web · hero de la landing</h4>
|
|
<div class="browser">
|
|
<div class="bar">
|
|
<div class="dot"></div><div class="dot"></div><div class="dot"></div>
|
|
<div class="url">rubis.pro</div>
|
|
</div>
|
|
<div style="padding: 56px 64px 64px; background: var(--cream); position: relative;">
|
|
<div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 64px;">
|
|
<div style="display: flex; align-items: baseline; font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: -0.025em; color: var(--ink);">
|
|
rub<span style="position: relative; display: inline-block;">i<span style="position: absolute; top: 1px; left: 50%; width: 6px; height: 6px; background: var(--rubis); transform: translateX(-50%) rotate(45deg);"></span></span>s
|
|
</div>
|
|
<div style="display: flex; gap: 24px; font-size: 13px; color: var(--ink-2);">
|
|
<span>Comment ça marche</span>
|
|
<span>Tarifs</span>
|
|
<span>Connexion</span>
|
|
<span style="background: var(--ink); color: white; padding: 6px 14px; border-radius: 4px; font-weight: 500;">Démarrer</span>
|
|
</div>
|
|
</div>
|
|
<div style="display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: center;">
|
|
<div>
|
|
<div style="font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--rubis); font-weight: 600; margin-bottom: 14px;">◆ Pour TPE et PME en France</div>
|
|
<h1 style="font-family: var(--display); font-weight: 700; font-size: 52px; line-height: 1.05; letter-spacing: -0.025em; margin: 0 0 18px;">Vos factures relancées toutes seules pendant que vous <em style="color: var(--rubis); font-style: italic;">travaillez</em>.</h1>
|
|
<p style="font-size: 17px; color: var(--ink-2); line-height: 1.5; margin: 0 0 24px; max-width: 520px;">Glissez-déposez vos PDF, choisissez un plan de relance, oubliez-les. Rubis envoie, suit, relance. Vous récupérez en moyenne 5 heures par semaine.</p>
|
|
<div style="display: flex; gap: 12px; align-items: center;">
|
|
<span style="background: var(--rubis); color: white; padding: 12px 22px; border-radius: 6px; font-size: 14px; font-weight: 600; box-shadow: 0 2px 6px rgba(159,18,57,0.25);">Démarrer gratuitement →</span>
|
|
<span style="padding: 12px 18px; font-size: 14px; color: var(--ink-2); font-weight: 500; border-bottom: 1px solid var(--ink-3);">Voir la démo en 30 s</span>
|
|
</div>
|
|
<div style="margin-top: 16px; font-size: 12px; color: var(--ink-3);">Aucune carte bancaire · 14 jours offerts · français à 100 %</div>
|
|
</div>
|
|
<div style="position: relative;">
|
|
<div style="background: white; border: 1px solid var(--line); border-radius: 12px; padding: 28px; box-shadow: 0 12px 36px -12px rgba(26,20,16,0.18);">
|
|
<div style="font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); margin-bottom: 14px;">Ce mois-ci</div>
|
|
<div style="display: flex; align-items: center; gap: 20px;">
|
|
<svg viewBox="0 0 200 200" width="56" height="56" style="filter: drop-shadow(0 2px 4px rgba(159,18,57,0.25));">
|
|
<polygon points="100,10 190,100 100,190 10,100" fill="#9F1239"/>
|
|
<line x1="10" y1="100" x2="190" y2="100" stroke="rgba(255,255,255,0.6)" stroke-width="2"/>
|
|
<line x1="55" y1="55" x2="100" y2="100" stroke="rgba(255,255,255,0.4)" stroke-width="1.5"/>
|
|
<line x1="145" y1="55" x2="100" y2="100" stroke="rgba(255,255,255,0.4)" stroke-width="1.5"/>
|
|
</svg>
|
|
<div>
|
|
<div style="font-family: var(--display); font-size: 36px; font-weight: 700; line-height: 1; letter-spacing: -0.025em; color: var(--ink);">124 rubis</div>
|
|
<div style="font-size: 13px; color: var(--ink-2); margin-top: 4px;">≈ 24h48 que vous n'avez pas passées à relancer.</div>
|
|
</div>
|
|
</div>
|
|
<div style="height: 1px; background: var(--line); margin: 18px 0;"></div>
|
|
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px; font-size: 12px;">
|
|
<div><div style="color: var(--ink-3); font-size: 11px;">Encaissé</div><div style="font-weight: 600; font-size: 16px;">14 320 €</div></div>
|
|
<div><div style="color: var(--ink-3); font-size: 11px;">DSO</div><div style="font-weight: 600; font-size: 16px;">38 j <span style="color: var(--rubis); font-size: 11px;">↘ -6j</span></div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h4 style="margin-top: 32px;">Carte de visite · post réseaux</h4>
|
|
<div class="grid-2">
|
|
<!-- Business card -->
|
|
<div style="background: var(--cream); border: 1px solid var(--line); border-radius: 8px; padding: 32px; display: flex; align-items: center; justify-content: center;">
|
|
<div style="background: white; border-radius: 6px; padding: 32px 28px; width: 320px; box-shadow: 0 8px 24px -10px rgba(26,20,16,0.15); position: relative; aspect-ratio: 85.6 / 53.98;">
|
|
<div style="position: absolute; top: 24px; right: 24px;">
|
|
<svg viewBox="0 0 200 200" width="36" height="36">
|
|
<polygon points="100,10 190,100 100,190 10,100" fill="#9F1239"/>
|
|
<line x1="10" y1="100" x2="190" y2="100" stroke="rgba(255,255,255,0.55)" stroke-width="2"/>
|
|
</svg>
|
|
</div>
|
|
<div style="font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; color: var(--ink); margin-top: 6px;">Arthur Barré</div>
|
|
<div style="font-size: 12px; color: var(--ink-3); margin-top: 4px;">Fondateur · Rubis Sur l'Ongle</div>
|
|
<div style="position: absolute; bottom: 24px; left: 28px; font-size: 11px; color: var(--ink-2); line-height: 1.5;">
|
|
arthur@rubis.pro<br>
|
|
rubis.pro
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Social post -->
|
|
<div style="background: var(--rubis); border-radius: 8px; padding: 40px; color: white; aspect-ratio: 1.91/1; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden;">
|
|
<div style="position: absolute; top: -40px; right: -40px; opacity: 0.18;">
|
|
<svg viewBox="0 0 200 200" width="240" height="240">
|
|
<polygon points="100,10 190,100 100,190 10,100" fill="white"/>
|
|
</svg>
|
|
</div>
|
|
<div style="position: relative; z-index: 1;">
|
|
<div style="font-family: var(--display); font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; opacity: 0.85;">◆ Rubis</div>
|
|
<div style="font-family: var(--display); font-weight: 700; font-size: 32px; line-height: 1.1; letter-spacing: -0.02em; margin-top: 16px; max-width: 320px;">Arrêtez de courir<br>après votre argent.</div>
|
|
</div>
|
|
<div style="position: relative; z-index: 1; font-size: 12px; opacity: 0.8;">rubis.pro</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ============================================================ -->
|
|
<!-- 6. VOIX & TON -->
|
|
<!-- ============================================================ -->
|
|
<section id="voix">
|
|
<div class="section-head">
|
|
<span class="num">06</span>
|
|
<h2>Voix & ton</h2>
|
|
<p>La marque parle comme un bon associé : direct, concret, jamais condescendant.</p>
|
|
</div>
|
|
|
|
<table class="voice-table">
|
|
<thead>
|
|
<tr><th>Trait</th><th>On dit</th><th>On ne dit pas</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Direct</td>
|
|
<td>"Vos factures relancées toutes seules."</td>
|
|
<td>"Optimisez votre processus de recouvrement amiable."</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Concret</td>
|
|
<td>"5 heures par semaine récupérées."</td>
|
|
<td>"Améliorez significativement votre productivité."</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Chaleureux</td>
|
|
<td>"Bonjour Arthur 👋"</td>
|
|
<td>"Bienvenue dans votre espace client."</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Précis</td>
|
|
<td>"Plus de 67 % des PME respectent les délais."</td>
|
|
<td>"De nombreuses entreprises sont sérieuses."</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Empathique</td>
|
|
<td>"On sait que c'est pénible. C'est pour ça qu'on le fait à votre place."</td>
|
|
<td>"Notre solution résout efficacement votre douleur client."</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Fier (sans arrogance)</td>
|
|
<td>"Notre OCR comprend les factures françaises mieux que personne."</td>
|
|
<td>"Une intelligence artificielle révolutionnaire."</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</section>
|
|
|
|
<!-- ============================================================ -->
|
|
<!-- 7. DO / DON'T -->
|
|
<!-- ============================================================ -->
|
|
<section id="dodont">
|
|
<div class="section-head">
|
|
<span class="num">07</span>
|
|
<h2>Do & Don't</h2>
|
|
<p>Quelques garde-fous pour que la marque reste cohérente même quand on délègue à un freelance ou un stagiaire.</p>
|
|
</div>
|
|
|
|
<div class="dodont">
|
|
<div class="do">
|
|
<h4>À faire</h4>
|
|
<ul>
|
|
<li>Utiliser le rubis avec parcimonie — un seul aplat fort par écran maximum.</li>
|
|
<li>Préférer le crème (#FAF7F2) au blanc pur partout où c'est possible.</li>
|
|
<li>Garder les titres en Bricolage Grotesque à 600/700, jamais en regular.</li>
|
|
<li>Aligner les chiffres (montants, rubis, dates) en colonnes nettes — la grille est notre signal de sérieux.</li>
|
|
<li>Mettre une touche d'italique <i>rubis</i> sur le mot-clé d'un titre (cf. hero) pour casser l'austérité.</li>
|
|
<li>Utiliser le ◆ comme marqueur de listes ou de gamification, jamais comme bullet point générique.</li>
|
|
</ul>
|
|
</div>
|
|
<div class="dont">
|
|
<h4>À éviter</h4>
|
|
<ul>
|
|
<li>Le rouge en aplat sur plus de 30 % d'un écran — perd l'effet "rare et précieux".</li>
|
|
<li>Le noir pur (#000) — toujours #1A1410 (encre chaude).</li>
|
|
<li>Mélanger le rubis avec d'autres rouges (orange, écarlate). Une seule famille rouge.</li>
|
|
<li>Les emojis 💎 ou 💰 dans la communication officielle — trop crypto / trop affiches de banque.</li>
|
|
<li>Utiliser le mot "recouvrement" dans la copy publique. Réservé aux pages techniques (CGU, RGPD).</li>
|
|
<li>Ajouter du bleu, du vert ou du violet pour "varier" — Rubis = rubis et neutres, point.</li>
|
|
<li>Animer le gem en rotation rapide ou en sparkle disco. Si animation : très lente, contemplative.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="footnote">
|
|
<h3>Notes & questions ouvertes</h3>
|
|
<ul style="margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.65; color: var(--ink-2);">
|
|
<li><b>Direction de logo :</b> recommandation A+C, mais la D est défendable si tu veux un positionnement plus polarisant côté éditorial.</li>
|
|
<li><b>Bricolage Grotesque vs General Sans :</b> les deux sont gratuits. Bricolage a plus de caractère "français contemporain", General Sans est plus neutre/scalable. À tester côte à côte sur un vrai bloc de copy.</li>
|
|
<li><b>Couleur primaire :</b> #9F1239 est mon best guess (rubis profond légèrement violacé). À tester sur écran imprimé/affiche — peut paraître trop sombre pour certains contextes outdoor. Variante plus vive : #B91C3C.</li>
|
|
<li><b>Or accent :</b> à utiliser <i>très</i> peu — éventuellement pour un badge "premium" ou un état spécial. Si on l'enlève complètement, ça simplifie sans appauvrir. À voir.</li>
|
|
<li><b>Animation du gem :</b> potentiel logo animé sur la landing (rotation lente, scintillement) — à scoper en tant que micro-interaction plus tard.</li>
|
|
<li><b>Iconographie :</b> on n'a pas tranché le set d'icônes UI (Lucide, Phosphor, custom ?). Pour le MVP, je recommande Lucide en regular weight — neutre et libre.</li>
|
|
</ul>
|
|
</div>
|
|
|
|
</main>
|
|
</body>
|
|
</html>
|