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.

Descarga la habilidad de la marca
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.

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.

Naranja señal

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

Eucalipto

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

Gris frío (base clara)

Secciones invertidas donde el eucalipto lleva el acento.

Colores de estado semántico

Capa funcional, independiente de la marca. Asocia cada estado con un icono y una etiqueta, nunca solo con un color. El estado de éxito reutiliza el eucalipto; los estados de error, advertencia, información, progreso y revisión tienen tonalidades específicas.

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.

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.

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.

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.

Cejas y etiquetas

Señal 01 - AutonomíaActualizado el 21/04/2026

brandGuidelines.components.dotStreamLabel

brandGuidelines.components.dotStreamNote

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.

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.

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.

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.

Medios de comunicación

Cómo se integran los vídeos y otros elementos animados con el resto del sistema. Un componente compartido (AutoplayVideo) gestiona todos los clips de reproducción automática del sitio (página de inicio, vídeo de presentación del cliente, escaparate de marca), de modo que la reproducción se mantiene constante.

Reproducción automática de vídeo

Silenciado por defecto con un único interruptor de silencio en la esquina inferior derecha. Se utiliza en el vídeo de testimonios de clientes de la página de inicio y en las imágenes principales de las páginas de destino. Mismo componente, mismas etiquetas que se pasan desde el elemento principal.

  • PUERTASe reproduce únicamente mientras esté visible (IntersectionObserver, umbral 0,25) y la pestaña esté visible. Se pausa inmediatamente cuando cambia cualquiera de las dos condiciones.
  • MOVIMIENTO REDUCIDOHonors prefiere movimiento reducido: reducir. Sin reproducción automática; el póster se muestra con un botón de reproducción manual.
  • SILENCIAREl interruptor está fijado en la esquina inferior derecha. El icono del altavoz cambia con cada pulsación; vuelve a emitir play() para que al desactivar el silencio nunca se pause el vídeo en silencio.

Reproducción automática de vídeo - home/Platform/devices.webm vía Bunny Stream

Voz y tono

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

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.
  • - Finaliza los títulos, encabezados o etiquetas con un punto. Los títulos se leen como etiquetas, no como oraciones.

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.

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

Texto enriquecido

Encabezados, cuerpo del texto y marcas en línea tal como se muestran en contenido extenso: estudios de caso, publicaciones de blog y documentos.

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