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.

É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.

01

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.

dbg#1A1A1A
ds#242424
de#2E2E2E
db#3D3D3D
dm#5C5C5C
dsc#999999
dbd#D6D6D6
dh#F0F0F0

Orange de signalisation

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

o50#FDF0E8
o100#F4B896
o200#EC7D42
o400#D95B28
o600#A33D14
o800#7A2B0E
o900#4A1808

Eucalyptus

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

e50#EAF0EE
e100#BACDD0
e200#72A899
e400#3A7A65
e600#2B5A4A
e800#1B3A30
e900#0F2219

Gris froid (base claire)

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

lbg#F5F5F7
ls#FFFFFF
lb#DDDFE3
lsc#555555
lp#111111

Validation

Réservé aux états présentant des erreurs de formulaire uniquement. Jamais utilisé comme couleur de marque.

error - #F43F5E

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.

02

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.

03

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.

04

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

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

Vert - Eucalyptus pour les événements liés à la plateforme et aux données.

Sourcils et étiquettes

Signal 01 - AutonomiePlateforme 02 - ÉvénementsMise à jour : 21 avril 2026

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.

05

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.

06

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.

07

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.

Voix et ton

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

08

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.

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.

09
  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).

Une seule plateforme pour toute votre fonction administrative. Des agents à l'infini, disponibles 24h/24 et 7j/7.

Chemin BVLOS

Obtenez vos propres approbations, site par site, ou optez pour un service géré ?

cadre de retour sur investissement

Comment obtenir le budget pour la phase suivante lorsque les résultats sont limités à un seul cas d'utilisation ?

Des données transformées en intelligence

Comment transformer des téraoctets de séquences vidéo en actions concrètes sans une équipe submergée par le visionnage ?

Informatique et conformité

Où sont stockées les données, qui y a accès et le matériel est-il conforme à la loi NDAA ?