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.

Laden Sie die Markenkompetenz herunter
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.

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.

Signalorange

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

Eukalyptus

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

Kühlgrau (helle Basis)

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

Semantische Statusfarben

Funktionale Ebene, getrennt von der Marke. Jedem Status ein Symbol und eine Beschriftung zuordnen, niemals nur eine Farbe verwenden. Erfolg verwendet Eukalyptus; Fehler/Warnung/Info/Fortschritt/Überprüfung haben jeweils eigene Farbtöne.

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.

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.

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.

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.

Augenbrauen und Etiketten

Signal 01 - AutonomieAktualisiert am 21.04.2026

brandGuidelines.components.dotStreamLabel

brandGuidelines.components.dotStreamNote

Abstand und Layout

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

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.

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.

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.

Medien

Wie Videos und andere bewegungsbasierte Inhalte in das System integriert werden. Eine zentrale Komponente (AutoplayVideo) verwaltet alle automatisch abspielenden Clips der Website - Landingpage, Kundenvideo, Markenpräsentation -, um eine einheitliche Wiedergabe zu gewährleisten.

Video automatisch abspielen

Standardmäßig stummgeschaltet, mit einem einzelnen Stummschalter unten rechts. Wird im Kundenreferenzvideo auf der Startseite und auf den Hero-Bereichen der Landingpage verwendet. Gleiche Komponente, gleiche Beschriftungen, die vom übergeordneten Element übergeben werden.

  • TORDie Wiedergabe erfolgt nur, solange das Element sichtbar ist (IntersectionObserver, Schwellenwert 0,25) und der Tab sichtbar ist. Die Wiedergabe pausiert sofort, sobald eine der beiden Bedingungen eintritt.
  • REDUZIERTE BEWEGUNGHonors bevorzugt reduzierte Bewegungen: reduzieren. Keine automatische Wiedergabe; das Poster wird mit einer manuellen Wiedergabetaste angezeigt.
  • STUMMDer Schalter befindet sich unten rechts. Das Lautsprechersymbol ändert sich bei jedem Drücken; die Wiedergabefunktion wird erneut aufgerufen, sodass das Aufheben der Stummschaltung das Video nicht stillschweigend pausiert.

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

Stimme und Tonfall

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

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.
  • - Titel, Überschriften oder Beschriftungen mit einem Punkt am Ende. Titel lesen sich wie Beschriftungen, nicht wie Sätze.

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.

  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.

Rich-Text-Text

Überschriften, Fließtext und Inline-Markierungen, wie sie in längeren Inhalten - Fallstudien, Blogbeiträgen und Dokumenten - dargestellt werden.

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