Passer au contenu principal
Système de marque v1

Le système visuel et verbal FlytBase

Couleurs, typographie, composants, animation et voix. Une référence unique pour les équipes produit, marketing et partenaires commercialisant des produits sous la marque FlytBase.

Téléchargez la compétence de marque
Édition
Édition 2026.04
Public
Pour les équipes produit, marque et ingénierie

Couleurs

Le système repose sur trois couleurs principales. Le gris anthracite est la couleur de fond par défaut, et non un mode. Orange vif est la couleur d'accentuation principale. Eucalyptus est la couleur d'accentuation secondaire, utilisée sur certaines plateformes. Il est fortement déconseillé d'utiliser simultanément Orange vif et Eucalyptus dans la même fenêtre d'affichage.

Règle stricte

Ne jamais mélanger o400 et e400 dans la même fenêtre. Choisir une seule couleur d'accentuation par section.

Charbon (fond foncé)

Arrière-plan de page par défaut. Les surfaces, les bordures et le texte sont tous dérivés de cette échelle.

Orange de signalisation

Accent principal pour les CTA, les sourcils, les points de marque et le mouvement thermique.

Eucalyptus

Accent secondaire pour les événements de plateforme et de données. Utilisé dans les sections légèrement inversées.

Gris froid (base claire)

Sections inversées où l'eucalyptus est mis en valeur.

Couleurs d'état sémantiques

Couche fonctionnelle, distincte de la marque. Associez chaque statut à une icône et une étiquette, jamais à une couleur seule. Le succès utilise la couleur eucalyptus ; les erreurs, les avertissements, les informations, la progression et les avis ont des teintes spécifiques.

Référencez le jeton par son nom, jamais par son hexadécimal. Les jetons sont déclarés dans src/app/globals.css à l'intérieur de @theme.

Typographie

Trois familles, des rôles bien définis. Lora pour l'affichage. Geist pour le texte de l'interface. Geist Mono pour les métadonnées. Chargées via next/font ; jamais depuis fonts.googleapis.com à l'exécution.

Afficher

Lora

Opérations autonomes

Titres, mise en page, accents éditoriaux. L'italique Lora met en valeur un seul mot d'un titre, jamais une phrase entière.

Interface

Geist

Logiciel de gestion de flottes de drones d'entreprise conçu pour évoluer.

Texte principal, boutons, navigation et formulaires. Tout le texte de l'interface utilisateur se trouve dans Geist.

Métadonnées

Geist Mono

FLT-2026.04 - 12:00 UTC

Sourcils, étiquettes, horodatages, nombres et code.

Échelle

Les titres suivent une courbe en pince (32 px, 4vw, 56 px). Le corps du texte a une largeur de 17 px et un espacement de 1,6 em. Les sourcils ont une hauteur de 10 px et un crénage de 0,12 em.

Iconographie

Les icônes sont verrouillées sur @phosphor-icons/react avec une épaisseur fine (trait de 1 px). L'épaisseur normale est acceptable uniquement à l'intérieur de carrés de 32 à 40 px avec bordure pour les icônes encadrées.

Permettre

  • - Phosphore mince par défaut
  • - Phosphore régulier à l'intérieur d'un carré bordé
  • - Un fichier SVG unique dans src/components/icons/ si un glyphe est manquant, correspondant au contour Phosphor

Jamais

  • - Bicolore ou poids de remplissage
  • - Émojis sous forme d'icônes
  • - Autres bibliothèques d'icônes (Lucide, Heroicons, Material, Tabler, Font Awesome)
import { House } from '@phosphor-icons/react'

<House size={20} weight="thin" />

Composants

Chaque composant hérite de l'échelle du jeton. Aucun rayon de bordure n'est appliqué, sauf si la conception exige un élément encadré. Les transitions sont exécutées sur une courbe de Bézier cubique (0,22, 1, 0,36, 1) à 200 ms.

Primaire - Fond orange signal, étiquette monochrome, effet lumineux au survol.

Ghost - Transparent, la bordure se réchauffe au survol.

Sourcils et étiquettes

Signal 01 - AutonomieMise à jour : 21 avril 2026

brandGuidelines.components.dotStreamLabel

brandGuidelines.components.dotStreamNote

Espacement et mise en page

Une grille de base de 8 px et une largeur de contenu maximale unique. Les surfaces ne sont pas arrondies.

Grille

8
16
24
32
48
64

Base de 8 px. Utiliser des incréments de 8, 16, 24, 32, 48, 64, 96.

Récipient

Largeur maximale de la page : 1200 px. Marge horizontale : 24 px sur mobile, 48 px sur ordinateur.

Rayon de bordure

Zéro par défaut. Les icônes carrées encadrées et les champs de validation sont de rares exceptions.

Motifs et surfaces

Trois motifs répétables et un gradient thermique. Utiliser un motif par section.

Grille

Lignes de 32px à 4% d'alpha sur fond anthracite.

Points

Points radiaux de 20 px à 14 % d'alpha sur fond anthracite.

Thermique

Un dégradé diagonal unique, allant du orange signal au gris anthracite. À utiliser pour les moments forts, jamais à l'intérieur des cartes.

Grain

Un effet de grain animé appliqué aux surfaces sombres. Il est décoratif ; le texte reste parfaitement lisible sans lui.

Mouvement

Le mouvement est intentionnel, non ambiant. Dévoilez les blocs en faisant défiler, puis maintenez la pression. Honor privilégie les mouvements réduits.

Révéler

duration 0.9s - ease power3.out

Intervalle de transition de 0,9 s, puissance 3.out, élévation de 24 px, seuil de 12 %. Exécuté une fois par élément.

Flotter

duration 200ms - cubic-bezier(0.22, 1, 0.36, 1)

Intervalle de transition cubique de Bézier (0,22, 1, 0,36, 1) : 200 ms. Les boutons principaux se soulèvent de 1 px et s’illuminent.

Mouvement réduit

prefers-reduced-motion: reduce

Tout se résout immédiatement. Le grain s'arrête. Les ascenseurs à sustentation sont désactivés.

Médias

Comment les vidéos et autres contenus animés s'intègrent au reste du système. Un composant partagé (AutoplayVideo) héberge tous les clips à lecture automatique du site (page d'accueil, vidéo client, présentation de la marque), garantissant ainsi une lecture cohérente.

Lecture automatique de la vidéo

Désactivé par défaut, avec un simple bouton de désactivation en bas à droite. Utilisé dans la vidéo de témoignages clients de la page d'accueil et sur les bannières des pages de destination. Même composant, mêmes étiquettes transmises par le composant parent.

  • GRILLELa lecture n'a lieu que lorsque l'onglet est visible (IntersectionObserver, seuil 0,25). La séquence se met en pause dès que l'une des conditions change.
  • MOUVEMENTS RÉDUITSHonors privilégie une animation réduite : réduire. Pas de lecture automatique ; l’affiche s’affiche manuellement via un bouton de lecture.
  • MUETBouton situé en bas à droite. L'icône du haut-parleur change à chaque pression ; la fonction play() est réactivée afin que la réactivation du son n'interrompe jamais silencieusement la lecture de la vidéo.

AutoplayVideo - home/Platform/devices.webm via Bunny Stream

Voix et ton

Rédigez comme un opérateur, pas comme un marketeur. Phrases courtes. Noms précis. Pas de jargon inutile.

Faire

  • - Épelez la marque FlytBase. F majuscule, B majuscule.
  • - Utilisez uniquement des traits d'union réguliers.
  • - Rédigez des titres de phrases en casse.
  • - Nommez le résultat, pas la caractéristique.

Ne pas

  • - Utilisez des tirets cadratins ou des tirets demi-cadratins.
  • - Utilisez des émojis dans vos produits, votre marketing ou votre code.
  • - Écrivez Flytbase, flytbase, FLYTBASE ou FLytbase.
  • - Utilisez un jargon technique comme synergie, effet de levier ou déblocage.
  • - Terminez les titres, les en-têtes ou les légendes par un point. Les titres se lisent comme des légendes, et non comme des phrases.

Règles d'utilisation

Un guide de référence rapide pour toute personne expédiant des produits sous cette marque. Le règlement complet se trouve dans les fichiers Docs/AGENTS.md et Docs/DESIGN-SYSTEM.md.

  1. 01

    Composants serveur par défaut. Composants client uniquement pour l'état, les effets, les gestionnaires d'événements ou les API du navigateur.

  2. 02

    Chaque page indexable appelle la fonction `buildAlternates(path, locale)` dans `generateMetadata`. Ne générez pas d'alternative `rel` pour les liens depuis le corps des pages.

  3. 03

    Tous les textes destinés aux utilisateurs utilisent useTranslations. Seul le fichier src/messages/en.json est modifié manuellement.

  4. 04

    Importez Link, useRouter, usePathname et redirectez depuis @/i18n/navigation. Jamais depuis next/link ou next/navigation.

  5. 05

    Pas de styles en ligne. Pas de modules CSS. Uniquement les utilitaires Tailwind et les classes token.

  6. 06

    Aucune exportation par défaut en dehors des fichiers spéciaux de Next.js (page, mise en page, erreur, chargement, introuvable).

Texte enrichi

Titres, corps du texte et marques en ligne tels qu'ils s'affichent dans les contenus longs (études de cas, articles de blog et documents).

Heading 1

Heading 2

Heading 3

Heading 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Block quotes set a passage apart from the body — used for pulled statements and emphasis within an article.

  1. First ordered item
  2. Second ordered item
  3. Third ordered item
  • First unordered item
  • Second unordered item
  • Third unordered item

Text link

Bold text

Emphasis