Brandbook v1.0 — 10 sections — Scroll ↓
02 / Logo
Identité visuelle
Le logo Futur Is Next combine le symbole chevron › (le pas suivant) et le wordmark en Geist Sans. Ensemble, ils forment un système vectoriel net, lisible jusqu'à 16 px.
Version sombre
Version claire
Symbole seul — tampon, favicon, avatar
Clearspace — zone de protection
L'espace minimum autour du logo est égal à C = hauteur du symbole chevron dans le contexte d'utilisation. Aucun élément visuel ne doit entrer dans cette zone.
Tailles minimales
Do / Don't
Logo sur fond sombre — contrastes validés AAA.
Logo sur fond clair — chevron ambre, texte graphite.
Tampon d'endossement — chevron + mention mono.
Ne jamais étirer, comprimer, ni déformer le logo.
Ambre = formes/icônes sur fond clair — jamais du texte (2.1:1, WCAG échoue).
Ne pas descendre sous 16 px de hauteur totale — illisible, illégal.
03 / Couleur
Palette de tokens
7 primitives calibrées WCAG AAA. Les tokens sémantiques (--color-bg, --color-text…) commutent automatiquement entre les thèmes dark et light.
Règle dure — Ambre sur fond clair
✓ Formes & icônes — usage correct
Texte graphite
✗ Texte ambre sur clair — 2.1:1 échec
Texte ambre sur clair
Ratio 2.1:1 — échec WCAG AA et AAA
Sur fond clair, l'ambre (#E99942) ne passe pas le contraste en texte. Réserver l'ambre aux formes, icônes et chevrons pleins. Le texte sur fond clair utilise toujours --ink-text (#17191D, 15.9:1 AAA).
04 / Typographie
Échelle modulaire
Geist Sans pour le display et le corps. Geist Mono pour les labels, chiffres, code et la baseline.
Les deux polices sont self-hostées via @font-face local — zéro appel Google Fonts au runtime. Format variable (woff2) : axes wght 100–900.
05 / Motion
Geste signature
Avancée / glissement vers l'avant. Les éléments entrent depuis la gauche avec un ease expo-out. Le séquençage révèle les éléments dans l'ordre logique. prefers-reduced-motion désactive toutes les animations.
Tokens durée & easing
06 / Blueprint
Dispositif graphique
Grille de schéma d'ingénierie — lignes fines, nœuds d'ancrage, fragments d'infra en accent ambre discret sur encre neutre. Composant réutilisable <Blueprint /> paramétrable par densité (low / medium / high) et opacité.
<Blueprint density="medium" opacity={0.55} />07 / Ton & voix
Comment on parle
Futur Is Next parle comme un partenaire technique de confiance : précis, rassurant, jamais condescendant. On vulgarise le bénéfice — pas la technique.
Autorité sans arrogance. La confiance s'installe sans avoir à se déclarer.
Une phrase, une idée. Pas de conditionnel inutile, pas de précaution oratoire.
On prend en charge. On revient avec un résultat concret, pas une question.
Ce que le client gagne, jamais comment ça fonctionne.
01
Le bénéfice, pas la technique
Le prospect ne veut pas savoir comment ça marche. Il veut savoir ce qu'il gagne et en combien de temps.
Notre architecture multi-agents RAG avec vector store Pinecone garantit une pertinence élevée sur vos requêtes.
Vos données restent privées. Vos réponses deviennent précises. En 4 semaines.
02
Direct et affirmatif
On affirme. On ne sous-entend pas. Le doute est une perte de temps pour le lecteur.
On pourrait potentiellement envisager d'intégrer quelque chose qui ressemble à une solution adaptée.
On déploie. On mesure. On améliore. C'est tout.
03
Jamais le jargon nu
Les termes techniques existent — mais ils doivent s'encapsuler dans un bénéfice immédiat ou rester absents.
Fine-tuning sur cluster GPU A100 en FSDP distributed training avec LoRA adapters.
Un modèle entraîné sur vos données, pas sur celles de vos concurrents.
04
Premium sans arrogance
Haut de gamme ne signifie pas inaccessible. On est l'expert de confiance, pas l'élite inapprochable.
Seules les entreprises suffisamment matures pour l'IA avancée peuvent prétendre à ce niveau d'infrastructure.
Pour les équipes qui veulent aller plus vite que leur marché.
05
Présent, actif, court
Verbes d'action au présent, voix active. On supprime les qualificatifs qui n'ajoutent rien.
Il serait important de noter que les résultats observés ont démontré une amélioration potentiellement significative.
Résultats : +40 % de productivité en 6 semaines.
08 / Endossement
Marque endossante
FIN est une marque endossante : elle pose sa caution sur des produits libres (client-template, Devio…). Le tampon by Futur Is Next = chevron amber + mention en Geist Mono.
Le tampon — zone de protection
C = hauteur du chevron dans le contexte d'utilisation (min 8 px). Aucun élément visuel tiers ne doit entrer dans la zone de clearspace.
En situation — produits endossés
DEVIO / INTERFACE IA
Votre assistant métier
Répond en moins de 2 secondes, comprend votre contexte.
CLIENT-TEMPLATE / RAPPORT
Rapport mensuel IA
Généré automatiquement, validé par vos équipes.
POSITION : bas-droite · CLEARSPACE : C = 8px min · TEXTE : couleur du fond, jamais amber
Do / Don't
Position canonique. Le tampon se pose en discret en bas à droite. Clearspace C min 8px.
Le chevron est toujours amber (forme). Le texte est toujours en couleur de texte du fond — jamais amber.
La mention « by Futur Is Next » est toujours en Geist Mono. Jamais en Geist Sans ni autre fonte.
Le sigle FIN seul = collision avec « fin » en français. Toujours « by Futur Is Next » en toutes lettres.
Le tampon n'existe qu'en amber/offwhite (dark) ou amber/graphite (light). Pas de version rouge, bleue, blanche.
Le tampon est un endossement secondaire. Il ne remplace jamais le lockup complet Futur Is Next.
09 / Composants
Bibliothèque UI
Tous les composants sont construits sur les tokens. Couleur, typographie, radius, motion — les mises à jour du système se propagent automatiquement.
Boutons
Primary
Ghost
↹ Tab jusqu'aux boutons "default" pour voir le focus ring ambre. États simulés (demo-*) non interactifs.
Cartes
Surface graphite, border subtile. Composant de base.
.card-ds
Bord ambre discret — pour les éléments prioritaires.
.card-ds .card-ds-accent
Hover ou Tab ici → bord ambre, élévation, translateY.
.card-ds .card-ds-interactive
Box-shadow légère pour la hiérarchie visuelle.
.card-ds + box-shadow
Badges
badge-amber · badge-neutral · badge-green · badge-outline — en mode clair, le texte ambre passe automatiquement en graphite (règle WCAG).
Liens
Mode sombre
Notre approche de l'infrastructure IA repose sur des agents autonomes déployés en production.
Texte ambre #E99942 — contraste 8.3:1 AAA
Mode clair — règle dure appliquée
Notre approche de l'infrastructure IA repose sur des agents autonomes déployés en production.
Texte graphite + soulignement ambre — pas de texte ambre (2.1:1 échoue)
10 / Export
Design Tokens
Les tokens CSS et JSON sont générés depuis la même source de vérité JS — réutilisables directement dans client-template et Devio.
TÉLÉCHARGEMENT
7 primitives · tokens sémantiques dark/light · typographie · motion · radius
APERÇU — 7 PRIMITIVES
--ink#0E0F12--graphite#1A1C20--offwhite#ECEAE4--amber#E99942--amber-bright#F4B461--paper#F5F3EE--ink-text#17191DIMPORT CSS
/* 1. Copier tokens.css dans votre projet */
@import './tokens.css';
/* Utilisation via CSS custom properties */
.my-component {
background: var(--color-bg);
color: var(--color-text);
border: 1px solid var(--color-border);
accent-color: var(--amber);
}IMPORT JSON (JS/TS)
// 2. Ou via JSON (JS/TS)
import tokens from './tokens.json';
const accent = tokens.primitive['--amber'];
// '#E99942'STRUCTURE tokens.json
{
"$meta": { "brand": "Futur Is Next", "version": "1.0.0" },
"primitive": { "--ink": "#0E0F12", "--amber": "#E99942", ... },
"semantic": {
"dark": { "--color-bg": "var(--ink)", ... },
"light": { "--color-bg": "var(--paper)", ... }
},
"type": { "--font-sans": "...", "--text-xs": "0.75rem", ... },
"motion": { "--ease-out-expo": "cubic-bezier(...)", ... },
"radius": { "--radius-sm": "4px", "--radius-lg": "12px", ... }
}