Saltar al contenido principal
Sistema de marca v1

El sistema visual y verbal FlytBase

Colores, tipografía, componentes, movimiento y voz. Una referencia para los equipos de producto, marketing y socios que comercializan bajo la marca FlytBase.

Edición
Edición 2026.04
Audiencia
Para equipos de producto, marca e ingeniería.

Bandera

Tres anclas sustentan el sistema. El color carbón es el fondo de página predeterminado, no un modo. El naranja señal es el acento principal. El eucalipto es el acento secundario para momentos de plataforma. Nunca combines naranja señal y eucalipto en la misma ventana gráfica.

01

Regla dura

Nunca mezcle o400 y e400 en la misma ventana gráfica. Elija un acento por sección.

Carbón vegetal (base oscura)

Fondo de página predeterminado. Las superficies, los bordes y el texto derivan de esta escala.

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

Naranja señal

Elemento principal para llamadas a la acción, cejas, puntos de marca y movimiento térmico.

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

Eucalipto

Acento secundario para eventos de plataforma y datos. Se utiliza en secciones con inversión de color.

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

Gris frío (base clara)

Secciones invertidas donde el eucalipto lleva el acento.

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

Validación

Reservado únicamente para estados con errores de formulario. Nunca se ha utilizado como color de marca.

error - #F43F5E

Referencia por nombre de token, nunca por hexadecimal. Los tokens se declaran en src/app/globals.css dentro de @theme.

Tipografía

Tres familias, roles estrictos. Lora para la visualización. Geist para el texto de la interfaz. Geist Mono para los metadatos. Cargada a través de next/font; nunca desde fonts.googleapis.com en tiempo de ejecución.

02

Mostrar

Lora

Operaciones autónomas

Titulares, encabezados, acentos editoriales. La cursiva Lora resalta una sola palabra en un titular, nunca una oración completa.

Interfaz

Geist

Software empresarial para flotas de drones diseñado para escalar.

Texto principal, botones, navegación y formularios. Todo el texto de la interfaz de usuario se encuentra en Geist.

Metadatos

Geist Mono

FLT-2026.04 - 12:00 UTC

Cejas, etiquetas, marcas de tiempo, números y código.

Escala

Los titulares siguen una curva de sujeción (32px, 4vw, 56px). El texto principal ocupa 17px/1.6. Las cejas se sitúan a 10px con un espaciado entre caracteres de 0.12em.

Iconografía

Los iconos se fijan a @phosphor-icons/react con un grosor fino (trazo de 1 px). El grosor normal solo es aceptable dentro de cuadrados con borde de 32 a 40 px para iconografía enmarcada.

03

Permitir

  • - Delgadez de fósforo por defecto
  • - Fósforo regular dentro de un cuadrado bordeado
  • - Un SVG único en src/components/icons/ si falta un glifo, que coincide con el trazo de Phosphor.

Nunca

  • - Pesos de duotono o relleno
  • - Emoji como iconos
  • - Otras bibliotecas de iconos (Lucide, Heroicons, Material, Tabler, Font Awesome)
import { House } from '@phosphor-icons/react'

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

Componentes

Cada componente hereda la escala del token. No se aplica radio de borde a menos que el diseño requiera un elemento enmarcado. Las transiciones se ejecutan en cubic-bezier(0.22, 1, 0.36, 1) a 200 ms.

04

Principal: fondo naranja señal, etiqueta monocromática, brillo al pasar el cursor.

Ghost - Transparente, el borde se torna cálido al pasar el cursor por encima.

Verde - Eucalipto para eventos de plataforma y datos.

Cejas y etiquetas

Señal 01 - AutonomíaPlataforma 02 - EventosActualizado el 21/04/2026

Espaciado y disposición

Una cuadrícula base de 8 píxeles y un único ancho máximo de contenido. Las superficies no son redondeadas.

05

Red

8
16
24
32
48
64

Base de 8px. Utilice incrementos de 8, 16, 24, 32, 48, 64, 96.

Recipiente

Ancho máximo de página 1200px. Relleno horizontal 24px en móviles, 48px desde md.

radio del borde

Cero por defecto. Los cuadrados con marco y los campos de validación son raras excepciones.

Patrones y superficies

Tres patrones repetibles y un gradiente térmico. Utilice uno por sección.

06

Red

Líneas de 32 píxeles con un 4% de transparencia sobre color carbón.

Puntos

Puntos radiales de 20px con un 14% de transparencia sobre color carbón.

Térmico

Un degradado diagonal único que va del naranja señal al gris carbón. Se utiliza para momentos heroicos, nunca en el interior de las cartas.

Grano

Superposición animada con efecto de grano de película aplicada a superficies oscuras. Es decorativa; la sección principal sigue siendo totalmente legible sin ella.

Movimiento

El movimiento es intencional, no ambiental. Revela los bloques en el pergamino y luego mantén presionado. Honor prefiere el movimiento reducido.

07

Revelar

duration 0.9s - ease power3.out

0,9 s de suavizado power3.out, 24 px de elevación, 12 % de umbral. Se ejecuta una vez por elemento.

Flotar

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

200 ms de suavizado cubic-bezier(0.22, 1, 0.36, 1). Los botones principales se elevan 1 píxel y brillan.

Movimiento reducido

prefers-reduced-motion: reduce

Todas las revelaciones se resuelven de inmediato. El grano se detiene. Los elevadores flotantes se desactivan.

Voz y tono

Escribe como un operador, no como un vendedor. Frases cortas. Sustantivos específicos. Nada de palabras de moda.

08

Hacer

  • - Deletrea la marca FlytBase. F mayúscula, B mayúscula.
  • - Utilice únicamente guiones normales.
  • - Escribe encabezados de oraciones con mayúscula inicial.
  • - Nombra el resultado, no la característica.

No

  • - Utilice guiones largos o guiones cortos.
  • - Utiliza emojis en productos, marketing o código.
  • - Escriba Flytbase, flytbase, FLYTBASE o FLytbase.
  • - Recurre a términos técnicos como sinergia, apalancamiento o desbloqueo.

Reglas de uso

Una guía rápida para cualquier persona que realice envíos bajo esta marca. Las reglas completas se encuentran en Docs/AGENTS.md y Docs/DESIGN-SYSTEM.md.

09
  1. 01

    Componentes del servidor por defecto. Componentes del cliente solo para estado, efectos, controladores de eventos o API del navegador.

  2. 02

    Cada página indexable llama a buildAlternates(path, locale) en generateMetadata. No emita enlaces rel alternate desde el cuerpo de las páginas.

  3. 03

    Todo el texto visible para el usuario utiliza useTranslations. Solo se edita manualmente el archivo src/messages/en.json.

  4. 04

    Importa Link, usaRouter, usaPathname y redirige desde @/i18n/navigation. Nunca desde next/link o next/navigation.

  5. 05

    Sin estilos en línea. Sin módulos CSS. Solo utilidades de Tailwind y clases de token.

  6. 06

    No se realizan exportaciones predeterminadas fuera de los archivos especiales de Next.js (página, diseño, error, carga, no encontrado).

Una única plataforma para toda su gestión administrativa. Agentes ilimitados que trabajan las 24 horas del día, los 7 días de la semana.

trayectoria BVLOS

¿Desea obtener sus propias aprobaciones, sitio por sitio, o prefiere operar bajo un servicio gestionado?

Marco de ROI

¿Cómo asegurar el presupuesto para la siguiente fase cuando los resultados están limitados a un solo caso de uso?

Datos para inteligencia

¿Cómo convertir terabytes de metraje en acción sin un equipo sepultado en la revisión?

Tecnologías de la Información y Cumplimiento Normativo

¿Dónde se almacenan los datos, quién tiene acceso a ellos y el hardware cumple con la Ley de Autorización de Defensa Nacional (NDAA)?