Zum Hauptinhalt springen
Markensystem v1

Das visuelle und verbale System FlytBase

Farben, Typografie, Komponenten, Animationen und Sprachausgabe. Eine Referenz für Produkt-, Marketing- und Partnerteams, die unter der Marke FlytBase arbeiten.

Ausgabe
Ausgabe 2026.04
Publikum
Für Produkt-, Marken- und Entwicklungsteams

Farben

Drei Grundfarben bilden das System. Anthrazit ist der Standard-Seitenhintergrund, kein Modus. Signalorange ist die primäre Akzentfarbe. Eukalyptus ist die sekundäre Akzentfarbe für besondere Momente. Signalorange und Eukalyptus dürfen niemals im selben Ansichtsfenster verwendet werden.

01

Strenge Regel

Verwenden Sie niemals O400 und E400 im selben Ansichtsfenster. Wählen Sie pro Abschnitt einen Akzent.

Holzkohle (dunkle Basis)

Standard-Seitenhintergrund. Oberflächen, Rahmen und Text leiten sich alle von diesem Maßstab ab.

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

Signalorange

Hauptakzent für CTAs, Augenbrauen, Markenpunkte und thermische Bewegung.

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

Eukalyptus

Sekundärer Akzent für Plattform- und Datenereignisse. Wird in hell-invertierten Abschnitten verwendet.

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

Kühlgrau (helle Basis)

Invertierte Abschnitte, in denen Eukalyptus die Betonung trägt.

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

Validierung

Ausschließlich für Formularfehlerzustände reserviert. Wird niemals als Markenfarbe verwendet.

error - #F43F5E

Verweisen Sie auf Tokens über ihren Namen, niemals über ihren Hexadezimalcode. Tokens werden in src/app/globals.css innerhalb von @theme deklariert.

Typografie

Drei Schriftfamilien, klare Rollen. Lora für die Anzeige. Geist für Benutzeroberflächentexte. Geist Mono für Metadaten. Geladen über next/font; niemals zur Laufzeit von fonts.googleapis.com.

02

Anzeige

Lora

Autonome Operationen

Überschriften, Darstellungsformate, redaktionelle Akzente. Kursivschrift (Lora) hebt ein einzelnes Wort in einer Überschrift hervor, niemals einen ganzen Satz.

Schnittstelle

Geist

Unternehmenssoftware für Drohnenflotten, entwickelt für den großen Maßstab.

Fließtext, Schaltflächen, Navigation und Formulare. Der gesamte UI-Text befindet sich in Geist.

Metadaten

Geist Mono

FLT-2026.04 - 12:00 UTC

Augenbrauen, Etiketten, Zeitstempel, Zahlen und Codes.

Skala

Die Überschriften folgen einer Kurve mit den Maßen 32px, 4vw, 56px. Der Fließtext ist 17px breit und hat einen Abstand von 1,6. Die Augenbrauen befinden sich bei 10px mit einem Abstand von 0,12em.

Ikonographie

Icons werden an @phosphor-icons/react mit der Strichstärke „thin“ (1px Kontur) gebunden. Die normale Strichstärke ist nur innerhalb von 32 bis 40px großen Quadraten mit Rahmen für gerahmte Icons zulässig.

03

Erlauben

  • - Phosphor Thin als Standardeinstellung
  • - Phosphor Regular innerhalb eines umrandeten Quadrats
  • - Eine einmalige SVG-Datei in src/components/icons/, falls ein Glyphe fehlt, passend zur Phosphor-Kontur.

Niemals

  • - Duotone oder Füllgewichte
  • - Emojis als Symbole
  • - Andere Symbolbibliotheken (Lucide, Heroicons, Material, Tabler, Font Awesome)
import { House } from '@phosphor-icons/react'

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

Komponenten

Jede Komponente übernimmt die Token-Skalierung. Es gibt keinen abgerundeten Rahmen, es sei denn, das Design erfordert ein gerahmtes Element. Übergänge werden mit einer kubischen Bézierkurve (0,22, 1, 0,36, 1) mit einer Dauer von 200 ms ausgeführt.

04

Primär - Signalorangefarbener Hintergrund, einfarbige Beschriftung, Leuchteffekt beim Überfahren mit der Maus.

Ghost - Transparent, Rand färbt sich beim Überfahren mit der Maus wärmer.

Green - Eucalyptus für Plattform- und Datenereignisse.

Augenbrauen und Etiketten

Signal 01 - AutonomiePlattform 02 - VeranstaltungenAktualisiert am 21.04.2026

Abstand und Layout

Ein 8px-Basisraster und eine einzige maximale Inhaltsbreite. Oberflächen werden nicht abgerundet.

05

Netz

8
16
24
32
48
64

8px Basis. Verwenden Sie Schritte von 8, 16, 24, 32, 48, 64, 96.

Container

Maximale Seitenbreite 1200px. Horizontaler Abstand 24px auf Mobilgeräten, 48px ab MD-Bildschirm.

Randradius

Standardmäßig Null. Eingerahmte Symbolquadrate und Validierungseingabefelder sind die seltenen Ausnahmen.

Muster und Oberflächen

Drei kachelbare Muster und ein Temperaturverlauf. Verwenden Sie eines pro Abschnitt.

06

Netz

32px Linien bei 4% Alpha über Anthrazit.

Punkte

20px radiale Punkte bei 14% Alpha über Anthrazit.

Thermal

Ein einmaliger diagonaler Farbverlauf von Signalorange zu Anthrazit. Wird für besondere Momente verwendet, niemals innerhalb von Karten.

Getreide

Eine animierte Filmkorn-Überlagerung wird auf dunkle Oberflächen angewendet. Sie ist rein dekorativ - der eigentliche Text bleibt auch ohne sie vollständig lesbar.

Bewegung

Bewegung ist gezielt, nicht zufällig. Blöcke werden beim Scrollen aufgedeckt, dann gedrückt halten. Honor bevorzugt reduzierte Bewegung.

07

Aufdecken

duration 0.9s - ease power3.out

0,9 Sekunden Verzögerung, Power3.out, 24 Pixel Anstieg, 12 % Schwellenwert. Wird einmal pro Element ausgeführt.

Schweben

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

200ms ease cubic-bezier(0.22, 1, 0.36, 1). Primäre Schaltflächen heben sich um 1px an und leuchten.

Eingeschränkte Bewegung

prefers-reduced-motion: reduce

Alle Enthüllungen werden sofort aufgelöst. Der Getreidefluss stoppt. Schwebelifte sind deaktiviert.

Stimme und Tonfall

Schreiben Sie wie ein Praktiker, nicht wie ein Marketingexperte. Kurze Sätze. Präzise Substantive. Keine Modewörter.

08

Tun

  • - Buchstabieren Sie den Markennamen FlytBase. Großes F, großes B.
  • - Verwenden Sie ausschließlich normale Bindestriche.
  • - Schreiben Sie Überschriften in Form von Satzbeispielen.
  • - Benennen Sie das Ergebnis, nicht das Merkmal.

Nicht

  • - Verwenden Sie Gedankenstriche oder Halbgeviertstriche.
  • - Verwenden Sie Emojis in Produktbeschreibungen, Marketingmaterialien oder im Code.
  • - Schreiben Sie Flytbase, Flytbase, FLYTBASE oder FLytbase.
  • - Greifen Sie zu Fachbegriffen wie Synergie, Hebelwirkung oder Freischaltung.

Nutzungsregeln

Eine Kurzübersicht für alle, die unter dieser Marke vertreiben. Die vollständigen Regeln finden Sie in den Dateien Docs/AGENTS.md und Docs/DESIGN-SYSTEM.md.

09
  1. 01

    Serverkomponenten standardmäßig. Clientkomponenten nur für Status, Effekte, Ereignisbehandler oder Browser-APIs.

  2. 02

    Jede indexierbare Seite ruft `buildAlternates(path, locale)` in `generateMetadata` auf. Link-Rel-Alternativen werden nicht aus dem Seiteninhalt generiert.

  3. 03

    Alle für Benutzer sichtbaren Texte verwenden useTranslations. Nur die Datei src/messages/en.json wird manuell bearbeitet.

  4. 04

    Importieren Sie Link, useRouter, usePathname und redirect von @/i18n/navigation. Niemals von next/link oder next/navigation.

  5. 05

    Keine Inline-Styles. Keine CSS-Module. Nur Tailwind-Utilities und Token-Klassen.

  6. 06

    Außerhalb der Next.js-Spezialdateien (page, layout, error, loading, not-found) gibt es keine Standardexporte.

Eine Plattform für Ihr gesamtes Backoffice. Unzählige Agenten, die rund um die Uhr arbeiten.

BVLOS-Pfad

Holen Sie Ihre Genehmigungen selbst ein, Standort für Standort, oder nutzen Sie einen Managed Service?

ROI-Rahmenwerk

Wie kann das Budget für die nächste Phase gesichert werden, wenn die Ergebnisse auf einen einzigen Anwendungsfall beschränkt sind?

Daten zu Erkenntnissen

Wie lassen sich Terabytes an Videomaterial in konkrete Aktionen umsetzen, ohne dass ein Team in der Sichtung versinkt?

IT & Compliance

Wo werden die Daten gespeichert, wer hat Zugriff darauf und entspricht die Hardware dem NDAA?