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.

Download the brand skill
Edition
Edition 2026.04
Audience
For product, brand, and engineering teams

Colors

One brand accent plus a functional status layer. Charcoal is the default page background, not a mode. Signal Orange is the sole brand accent. Green is no longer a brand accent - it now signals success. Status colors (success, error, warning, info, progress, review) are functional and may appear in any section.

Hard rule

One brand accent (orange). Green, red, amber, and blue are functional status colors, never brand colors. Never use orange to signal status.

Charcoal (dark base)

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

Signal Orange

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

Eucalyptus / Success

Backs the success status - done, confirmed, positive. No longer a brand accent.

Cool gray (light base)

Inverted sections. The orange brand accent carries through; green is reserved for the success status.

Semantic status colors

Functional layer, separate from the brand. Pair every status with an icon and label, never color alone. success reuses eucalyptus; error/warning/info/progress/review are dedicated hues.

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.

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.

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.

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

Ghost - Transparent, border warms to dh on hover.

Eyebrows and labels

Signal 01 - AutonomyUpdated 2026-04-21

brandGuidelines.components.dotStreamLabel

brandGuidelines.components.dotStreamNote

Spacing and layout

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

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.

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.

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.

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.
  • - End titles, headlines, or eyebrow labels with a period. Titles read as labels, not sentences.

Usage rules

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

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

brandGuidelines.richText.heading

brandGuidelines.richText.intro

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