Skip to main content
Brand system v1

The FlytBase visual and verbal system

Colors, type, components, motion, and voice. One reference for product, marketing, and partner teams shipping under the FlytBase brand.

Edition
Edition 2026.04
Audience
For product, brand, and engineering teams

Colors

Three anchors carry the system. Charcoal is the default page background, not a mode. Signal Orange is the primary accent. Eucalyptus is the secondary accent for platform moments. Never mix Signal Orange and Eucalyptus in the same viewport.

01

Hard rule

Never mix o400 and e400 in the same viewport. Pick one accent per section.

Charcoal (dark base)

Default page background. Surfaces, borders, and text all derive from this scale.

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

Signal Orange

Primary accent for CTAs, eyebrows, brand dots, and thermal motion.

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

Eucalyptus

Secondary accent for platform and data events. Used in light-inverted sections.

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

Cool gray (light base)

Inverted sections where Eucalyptus carries the accent.

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

Validation

Reserved for form error states only. Never used as a brand color.

error - #F43F5E

Reference by token name, never by hex. Tokens are declared in src/app/globals.css inside @theme.

Typography

Three families, strict roles. Lora for display. Geist for interface copy. Geist Mono for metadata. Loaded through next/font; never from fonts.googleapis.com at runtime.

02

Display

Lora

Autonomous operations

Headlines, display, editorial accents. Italic Lora highlights a single word in a headline, never a full sentence.

Interface

Geist

Enterprise drone fleet software built for scale.

Body copy, buttons, navigation, and forms. All UI text sits in Geist.

Metadata

Geist Mono

FLT-2026.04 - 12:00 UTC

Eyebrows, labels, timestamps, numbers, and code.

Scale

Headlines ride a clamp(32px, 4vw, 56px) curve. Body copy holds 17px/1.6. Eyebrows sit at 10px with 0.12em tracking.

Iconography

Icons lock to @phosphor-icons/react at weight thin (1px stroke). Regular weight is acceptable only inside bordered 32 to 40px squares for framed iconography.

03

Allow

  • - Phosphor Thin as default
  • - Phosphor Regular inside a bordered square
  • - A one-off SVG in src/components/icons/ if a glyph is missing, matching Phosphor stroke

Never

  • - Duotone or fill weights
  • - Emoji as icons
  • - Other icon libraries (Lucide, Heroicons, Material, Tabler, Font Awesome)
import { House } from '@phosphor-icons/react'

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

Components

Every component inherits the token scale. No border-radius unless the design calls for a framed element. Transitions run on cubic-bezier(0.22, 1, 0.36, 1) at 200ms.

04

Primary - Signal Orange background, mono label, glow on hover.

Ghost - Transparent, border warms to dh on hover.

Green - Eucalyptus for platform and data events.

Eyebrows and labels

Signal 01 - AutonomyPlatform 02 - EventsUpdated 2026-04-21

Spacing and layout

An 8px base grid and a single max content width. Surfaces do not round.

05

Grid

8
16
24
32
48
64

8px base. Use increments of 8, 16, 24, 32, 48, 64, 96.

Container

Max page width 1200px. Horizontal padding 24px on mobile, 48px from md.

Border radius

Zero by default. Framed icon squares and validation inputs are the rare exceptions.

Patterns and surfaces

Three tileable patterns and one thermal gradient. Use one per section.

06

Grid

32px lines at 4% alpha over Charcoal.

Dots

20px radial dots at 14% alpha over Charcoal.

Thermal

A one-off diagonal gradient from Signal Orange into Charcoal. Used for hero moments, never inside cards.

Grain

An animated film-grain overlay applied to dark surfaces. It is decorative - the host section remains fully legible without it.

Motion

Motion is purposeful, not ambient. Reveal blocks on scroll, then hold. Honor prefers-reduced-motion.

07

Reveal

duration 0.9s - ease power3.out

0.9s ease power3.out, 24px rise, 12% threshold. Runs once per element.

Hover

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

200ms ease cubic-bezier(0.22, 1, 0.36, 1). Primary buttons lift 1px and glow.

Reduced motion

prefers-reduced-motion: reduce

All reveals resolve immediately. Grain stops. Hover lifts disabled.

Voice and tone

Write like an operator, not a marketer. Short sentences. Specific nouns. No buzzwords.

08

Do

  • - Spell the brand FlytBase. Capital F, capital B.
  • - Use regular hyphens only.
  • - Write sentence case headlines.
  • - Name the outcome, not the feature.

Do not

  • - Use em dashes or en dashes.
  • - Use emoji in product, marketing, or code.
  • - Write Flytbase, flytbase, FLYTBASE, or FLytbase.
  • - Reach for jargon like synergy, leverage, or unlock.

Usage rules

A fast reference for anyone shipping under the brand. Full rules live in Docs/AGENTS.md and Docs/DESIGN-SYSTEM.md.

09
  1. 01

    Server Components by default. Client Components only for state, effects, event handlers, or browser APIs.

  2. 02

    Every indexable page calls buildAlternates(path, locale) in generateMetadata. Do not emit link rel alternate from page bodies.

  3. 03

    All user-facing text uses useTranslations. Only src/messages/en.json is edited by hand.

  4. 04

    Import Link, useRouter, usePathname, and redirect from @/i18n/navigation. Never from next/link or next/navigation.

  5. 05

    No inline styles. No CSS modules. Tailwind utilities and token classes only.

  6. 06

    No default exports outside Next.js special files (page, layout, error, loading, not-found).

One platform for your entire back office. Infinite agents that work 24/7.

BVLOS path

Pursue your own approvals, site by site, or operate under a managed service?

ROI framework

How to secure budget for the next phase when results are trapped in one use case?

Data to intelligence

How to turn terabytes of footage into action without a team buried in review?

IT & Compliance

Where does the data reside, who has access, and is the hardware NDAA compliant?